Components
了解我们如何以及为什么使用基类和修饰符类构建几乎所有的组件。
Base classes
Bootstrap的组件在很大程度上是使用base-modifier 命名法构建的。 我们将尽可能多的共享属性分组到一个基类中，如“.btn”，然后将每个变体的单独样式分组到修饰符类中，例如.btn-primary或.btn-success。
为了构建我们的修饰符类，我们使用Sass的@each循环来迭代Sass Map。 这对于通过$theme-colors生成组件的变体以及为每个断点创建响应变体特别有用。 当你自定义这些Sass映射并重新编译时，你将自动看到这些循环中反映的更改。
查看我们的Sass Map和循环文档 ，了解如何自定义这些循环，并将Bootstrap的基本修饰符方法扩展到你自己的代码中。
Modifiers
Bootstrap的许多组件都是使用base-modifier class方法构建的。 这意味着样式的大部分包含在基类中(例如.btn)，而样式变体仅限于修饰符类中(例如，.btn-danger)。 这些修饰符类是从$theme-colors Map构建的，用于自定义修饰符类的数量和名称。
下面是两个例子，说明我们如何在 $theme-colors Map 上循环以生成.alert和 .list-group组件的修饰符。
// Generate contextual modifier classes for colorizing the alert
@each $state in map-keys($theme-colors) {
.alert-#{$state} {
--#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis);
--#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle);
--#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle);
--#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text-emphasis);
}
}
// List group contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.
@each $state in map-keys($theme-colors) {
.list-group-item-#{$state} {
--#{$prefix}list-group-color: var(--#{$prefix}#{$state}-text-emphasis);
--#{$prefix}list-group-bg: var(--#{$prefix}#{$state}-bg-subtle);
--#{$prefix}list-group-border-color: var(--#{$prefix}#{$state}-border-subtle);
--#{$prefix}list-group-action-hover-color: var(--#{$prefix}emphasis-color);
--#{$prefix}list-group-action-hover-bg: var(--#{$prefix}#{$state}-border-subtle);
--#{$prefix}list-group-action-active-color: var(--#{$prefix}emphasis-color);
--#{$prefix}list-group-action-active-bg: var(--#{$prefix}#{$state}-border-subtle);
--#{$prefix}list-group-active-color: var(--#{$prefix}#{$state}-bg-subtle);
--#{$prefix}list-group-active-bg: var(--#{$prefix}#{$state}-text-emphasis);
--#{$prefix}list-group-active-border-color: var(--#{$prefix}#{$state}-text-emphasis);
}
}
响应式
这些Sass循环也不局限于color maps。 你还可以生成组件的响应变化。 以我们对下拉列表的响应对齐为例，我们将$grid-breakpoints Sass map的 @each 循环与媒体查询include混合在一起。
// We deliberately hardcode the `bs-` prefix because we check
// this custom property in JS to determine Popper's positioning
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
.dropdown-menu#{$infix}-start {
--bs-position: start;
&[data-bs-popper] {
right: auto;
left: 0;
}
}
.dropdown-menu#{$infix}-end {
--bs-position: end;
&[data-bs-popper] {
right: 0;
left: auto;
}
}
}
}
如果你修改 $grid-breakpoints，你的更改将应用于在该映射上迭代的所有循环。
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
有关如何修改Sass Map和变量的更多信息和示例，请参阅网格文档的CSS部分。
创建自己的
我们鼓励你在使用Bootstrap构建时采用这些指导原则来创建自己的组件。 我们已经将这种方法扩展到了文档和示例中的自定义组件。 像我们的callout这样的组件就像我们提供的具有基类和修饰符类的组件一样构建。
<div class="callout">...</div>
在你的CSS中，你会有如下的东西，其中大部分样式是通过.callout完成的。 然后，通过修饰符类控制每个变体之间的唯一样式。
// Base class
.callout {}
// Modifier classes
.callout-info {}
.callout-warning {}
.callout-danger {}
对于 callouts ，这种独特的样式只是 border-left-color。 将该基类与其中一个修饰类组合时，将获得完整的构件族：