组件
了解以及为什么用base和modifier类响应地快速构建几乎所有的组件。
基本的类
Bootstrap的组件基本上是用基修改器命名的。我们将尽可能多的共享属性分组到一个基类中，比如 .btn，然后将每个变量的单独样式分类到修饰符类中，比如
.btn-primary 或 .btn-success。
为了构建修饰符类，我们使用Sass的 @each 循环在Sass映射上进行迭代。这对于通过 $theme-colors
生成组件的变体和为每个断点创建响应式变体特别有帮助。当你自定义这些Sass映射并重新编译时，你将在这些循环中看到你的修改。
你也可以查看 Sass map和循环文档，了解如何自定这些循环，并将Bootstrap的base-modifier方法扩展到你的项目中去。
修饰符
Bootstrap的许多组件都是使用基本修饰类方法构建的。这意味着大部分样式被包含在一个基类中(例如 .btn)，而样式变化被限制在修饰类中(例如
.btn-danger)。这些修改器类是从 $theme-colors 映射构建的，用于定制修改器类的编号和名称。
你可以参考下面的两个示例，了解如何循环遍历 $theme-colors 映射以生成 .alert 和 .list-group 组件的修饰符。
// Generate contextual modifier classes for colorizing the alert.
@each $state, $value in $theme-colors {
$background: shift-color($value, $alert-bg-scale);
$border: shift-color($value, $alert-border-scale);
$color: shift-color($value, $alert-color-scale);
@if (contrast-ratio($background, $color) < $min-contrast-ratio) {
$color: mix($value, color-contrast($background), abs($alert-color-scale));
}
.alert-#{$state} {
@include alert-variant($background, $border, $color);
}
}// 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, $value in $theme-colors {
$background: shift-color($value, $list-group-item-bg-scale);
$color: shift-color($value, $list-group-item-color-scale);
@if (contrast-ratio($background, $color) < $min-contrast-ratio) {
$color: mix($value, color-contrast($background), abs($alert-color-scale));
}
@include list-group-item-variant($state, $background, $color);
}响应
这些Sass循环也不局限于彩色地图。你还可以生成组件的变化。例如，我们将 $grid-breakpoints Sass映射的 @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;
right: auto #{"/* rtl:ignore */"};
left: 0 #{"/* rtl:ignore */"};
}
.dropdown-menu#{$infix}-end {
--bs-position: end;
right: 0 #{"/* rtl:ignore */"};
left: auto #{"/* rtl:ignore */"};
}
}
}如果你修改 $grid-breakpoints，你的修改将应用于遍历该映射的所有循环。
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);有关如何修改Sass映射和变量的更多信息和示例，请参阅网格文档的Sass部分。
创建自己的组件
我们希望你在使用Bootstrap构建组件时采用这些指导原则来构建自己的组件。在文档和示例中，已经将这种方法扩展到自定义组件。像我们的标注这样的组件的构建就像我们提供的带有基类和修饰符类的组件一样。
<div class="callout">...</div>
在您的CSS中，您会有如下内容，其中大部分样式是通过 .callout完成的。然后，通过修饰类控制每个变量之间的唯一样式。
// Base class
.callout {}
// Modifier classes
.callout-info {}
.callout-warning {}
.callout-danger {}
对于callouts，那个独特的样式只是一个 border-left-color。当你把这个基类和其中一个修饰类结合起来，你就得到了完整的组件族: