组件

基类

🌐 Base classes

Bootstrap 的组件大多使用基类-修饰符命名法构建。我们尽可能将尽可能多的共享属性分组到一个基类中，比如 .btn，然后将每个变体的单独样式分组到修饰符类中，比如 .btn-primary 或 .btn-success。

🌐 Bootstrap’s components are largely built with a base-modifier nomenclature. We group as many shared properties as possible into a base class, like .btn, and then group individual styles for each variant into modifier classes, like .btn-primary or .btn-success.

为了构建我们的修饰符类，我们使用 Sass 的 @each 循环来遍历 Sass 映射。这对于通过我们的 $theme-colors 生成组件的各种变体特别有用，并为每个断点创建响应式变体。当你自定义这些 Sass 映射并重新编译时，你会自动在这些循环中看到你的更改。

🌐 To build our modifier classes, we use Sass’s @each loops to iterate over a Sass map. This is especially helpful for generating variants of a component by our $theme-colors and creating responsive variants for each breakpoint. As you customize these Sass maps and recompile, you’ll automatically see your changes reflected in these loops.

查看 我们的 Sass 映射和循环文档 了解如何自定义这些循环，并将 Bootstrap 的基础修改器方法扩展到你自己的代码中。

🌐 Check out our Sass maps and loops docs for how to customize these loops and extend Bootstrap’s base-modifier approach to your own code.

修饰符

🌐 Modifiers

Bootstrap 的许多组件是使用基础-修饰符类方法构建的。这意味着大部分样式包含在基础类中（例如，.btn），而样式变体则限定在修饰符类中（例如，.btn-danger）。这些修饰符类是从 $theme-colors 映射构建的，以便自定义我们修饰符类的数量和名称。

🌐 Many of Bootstrap’s components are built with a base-modifier class approach. This means the bulk of the styling is contained to a base class (e.g., .btn) while style variations are confined to modifier classes (e.g., .btn-danger). These modifier classes are built from the $theme-colors map to make customizing the number and name of our modifier classes.

这里有两个例子，展示了我们如何遍历 $theme-colors 映射来生成 .alert 和 .list-group 组件的修饰符。

🌐 Here are two examples of how we loop over the $theme-colors map to generate modifiers to the .alert and .list-group components.

// 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);
  }
}

响应式

🌐 Responsive

这些 Sass 循环也不仅限于颜色映射。你还可以生成组件的响应式变体。比如我们在下拉菜单的响应式对齐中，混合使用了 @each 循环用于 $grid-breakpoints Sass 映射，并包含了媒体查询。

🌐 These Sass loops aren’t limited to color maps, either. You can also generate responsive variations of your components. Take for example our responsive alignment of the dropdowns where we mix an @each loop for the $grid-breakpoints Sass map with a media query 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，你的更改将应用到所有迭代该映射的循环中。

🌐 Should you modify your $grid-breakpoints, your changes will apply to all the loops iterating over that map.

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

有关如何修改我们的 Sass 映射和变量的更多信息和示例，请参阅网格文档的 CSS 部分。

🌐 For more information and examples on how to modify our Sass maps and variables, please refer to the CSS section of the Grid documentation.

创建你自己的

🌐 Creating your own

我们鼓励你在使用 Bootstrap 构建时采用这些指南，以创建你自己的组件。我们自己也将这种方法扩展到了文档和示例中的自定义组件。像我们的提示组件就是像我们提供的组件一样使用基础类和修饰类构建的。

🌐 We encourage you to adopt these guidelines when building with Bootstrap to create your own components. We’ve extended this approach ourselves to the custom components in our documentation and examples. Components like our callouts are built just like our provided components with base and modifier classes.

<div class="callout">...</div>

在你的 CSS 中，你会有类似如下的内容，其中大部分样式是通过 .callout 完成的。然后，每个变体之间的独特样式由修饰类控制。

🌐 In your CSS, you’d have something like the following where the bulk of the styling is done via .callout. Then, the unique styles between each variant is controlled via modifier class.

// Base class
.callout {}

// Modifier classes
.callout-info {}
.callout-warning {}
.callout-danger {}

对于标注，那种独特的样式只是一个 border-left-color。当你将这个基础类与其中一个修饰类结合时，你就得到了完整的组件系列：

🌐 For the callouts, that unique styling is just a border-left-color. When you combine that base class with one of those modifier classes, you get your complete component family: