了解我们如何以及为何使用基类和修饰类构建几乎所有组件。
基础类
Bootstrap 的组件主要采用基类-修饰符命名法构建。我们将尽可能多的共享属性归入一个基类，如 .btn，然后将每个变体的单独样式归入修改器类，如 .btn-primary 或 .btn-success。
为了建立修改器类，我们使用 Sass 的 @each 循环来遍历 Sass 映射。这尤其有助于通过我们的 $theme-colors 生成组件的变体，并为每个断点创建响应变体。当你自定义这些 Sass 地图并重新编译时，你会自动看到你的更改反映在这些循环中。
请查看 我们的 Sass 映射和循环文档，了解如何自定义这些循环，并将 Bootstrap 的基础修改器方法扩展到您自己的代码中。
修饰符
Bootstrap 的许多组件都是采用基类-修饰类方法构建的。这意味着大部分样式都包含在一个基类（如 .btn）中，而样式变化则局限于修改器类（如 .btn-danger）。这些修改器类由 $theme-colors 映射建立，以便自定义修改器类的数量和名称。
以下是两个示例，说明我们如何循环使用 $theme-colors 映射来为 .alert 和 .list-group 组件生成修改器。
// 生成上下文修改器类，为警报着色
@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);
}
}
// 列表组上下文变体
//
// 添加修改器类，以更改单个项目的文字和背景颜色。
// 从组织结构上讲，这必须在 `:hover`状态之后。
@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 循环也不仅限于颜色映射。您还可以生成组件的响应变化。以我们的下拉菜单响应式对齐为例，我们将$grid-breakpoints Sass 映射的@each循环与媒体查询 include 混合使用。
// 我们特意硬编码了 `bs-` 前缀，因为我们要检查
// 在 JS 中使用此自定义属性来确定 Popper 的定位
@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 映射和变量的更多信息和示例，请参阅网格文档的 CSS 部分。
创建属于自己的组件
我们鼓励您在使用 Bootstrap 创建自己的组件时采用这些指导原则。我们已将这种方法扩展到我们文档和示例中的自定义组件。像我们的 callouts 这样的组件就像我们提供的组件一样，使用基类和修饰类来构建。
<div class="callout">...</div>
在您的 CSS 中，您可以使用类似下面的内容，其中大部分样式都是通过 .callout 来完成的。然后，通过修改器类来控制每个变量之间的独特样式。
// 基类
.callout {}
// 修改器类
.callout-info {}
.callout-warning {}
.callout-danger {}
对于这个callouts，独特的样式只是 border-left-color。将该基类与其中一个修改器类结合后，就得到了完整的组件系列：