组件

了解我们如何以及为什么通过基类和修饰符类快速构建几乎所有的组件。

在本页面

基类

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

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

查看我们的Sass映射和循环文档,以了解如何自定义这些循环并将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映射和变量的更多信息和示例，请参阅Grid文档的Sass部分。

创建自己的

我们鼓励您在使用Bootstrap进行构建以创建自己的组件时采用这些准则。我们已经将这种方法扩展到了文档和示例中的自定义组件。像我们的callouts 这样的组件的构建就像我们提供的带有基类和修饰符类的组件一样。

这是一个callout. 我们为文档定制了它，因此我们给您的信息脱颖而出。它通过修饰符类具有三个变体。

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

在你的CSS中，你可以像下面这样，大部分样式是通过.callout完成的。然后通过修饰符类控制每个变量之间的唯一样式。

// Base class
.callout {}

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

对于callouts，唯一的样式只是border-left-color。当您将该基类与其中一个修饰符类组合时，您将获得完整的组件系列：

This is an info callout. Example text to show it in action.

This is a warning callout. Example text to show it in action.

This is a danger callout. Example text to show it in action.