元件（Components）

了解我們如何以及為何使用基礎類別和修飾類別來響應式地建構幾乎所有元件。

本頁內容

基礎類別（Base classes）

Bootstrap 的元件主要是使用基礎-修飾命名法建構的。我們將盡可能多的共用屬性分組到基礎類別中，如 .btn，然後將每個變體的個別樣式分組到修飾類別中，如 .btn-primary 或 .btn-success。

為了建構我們的修飾類別，我們使用 Sass 的 @each 迴圈來迭代 Sass map。這對於透過 $theme-colors 產生元件的變體以及為每個中斷點建立響應式變體特別有用。當您自訂這些 Sass maps 並重新編譯時，您會自動看到這些迴圈反映出您的變更。

查看我們的 Sass maps 和迴圈文件以了解如何自訂這些迴圈並將 Bootstrap 的基礎-修飾方法擴充到您自己的程式碼。

修飾類別（Modifiers）

Bootstrap 的許多元件都是使用基礎-修飾類別方法建構的。這意味著大部分樣式包含在基礎類別中（例如 .btn），而樣式變體則限制在修飾類別中（例如 .btn-danger）。這些修飾類別是從 $theme-colors map 建構的，以便自訂我們修飾類別的數量和名稱。

以下是兩個範例，展示我們如何迴圈遍歷 $theme-colors map 來為 .alert 和 .list-group 元件產生修飾類別。

scss/_alert.scss

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

scss/_list-group.scss

// 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 迴圈不僅限於色彩 maps。您也可以產生元件的響應式變體。以下拉選單的響應式對齊為例，我們將 $grid-breakpoints Sass map 的 @each 迴圈與媒體查詢 include 混合使用。

scss/_dropdown.scss

// 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，您的變更將套用至迭代該 map 的所有迴圈。

scss/_variables.scss

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

如需更多關於如何修改我們的 Sass maps 和變數的資訊和範例，請參閱格線文件的 CSS 區段。

建立您自己的（Creating your own）

我們鼓勵您在使用 Bootstrap 建構時採用這些指南來建立自己的元件。我們已經將這種方法擴充到文件和範例中的自訂元件。像我們的提示方塊這樣的元件就是使用基礎類別和修飾類別建構的，就像我們提供的元件一樣。

This is a callout. We built it custom for our docs so our messages to you stand out. It has three variants via modifier classes.

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

在您的 CSS 中，您會有類似以下的內容，其中大部分樣式是透過 .callout 完成的。然後，每個變體之間的獨特樣式透過修飾類別控制。

// Base class
.callout {}

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

對於提示方塊，這個獨特的樣式只是一個 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.