组件

基类

¥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 循环也不限于彩色图。你还可以生成组件的响应式变体。以下拉菜单的响应式对齐为例，我们将 $grid-breakpoints Sass 映射的 @each 循环与媒体查询包含混合在一起。

¥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 映射和变量的更多信息和示例，请参阅 Grid 文档的 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: