元件 (Components)
學習如何以及為什麼我們要通過基礎樣式與修飾符類別快速建構幾乎所有元件。
基本類別
Bootstrap 的元件主要使用基本-修飾符命名法建構。我們盡可能將多數共享屬性分到一個基礎類別，如 .btn ，並將每個變數的樣式分到修飾符類別中，如 .btn-primary 或 .btn-success.
為了建構我們的修飾符類別，我們使用 Sass 的 @each 循環來迭代 Sass map。這對我們透過 $theme-colors 生成元件變數以及為每個斷點創造響應式變數特別有幫助。當您自定義這些 Sass maps 並重新編譯時，您將在這些循環中自動看到您做的更改。
查看 我們的 Sass maps 與 loops docs 了解如何自定義這些循環與擴展 Bootstrap 的基礎-修飾符到自己的程式碼中。
修飾符
Bootstrap 的許多元件都是由基礎-修飾符類別建構的。這代表大部分樣式都包含在基礎類別 (e.g., .btn) 而樣式變數則限於修飾符類別 (e.g., .btn-danger)。這些修飾符類別是由 $theme-colors map 建構的，用來自定義修飾符類別的數量與名稱。
這裡有兩個範例，說明如何循環 $theme-colors map 以生成元件 .alert 與 .list-group 的修飾符類別。
// Generate contextual modifier classes for colorizing the alert.
@each $state, $value in $theme-colors {
$alert-background: shift-color($value, $alert-bg-scale);
$alert-border: shift-color($value, $alert-border-scale);
$alert-color: shift-color($value, $alert-color-scale);
@if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
$alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
}
.alert-#{$state} {
@include alert-variant($alert-background, $alert-border, $alert-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 {
$list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
$list-group-variant-color: shift-color($value, $list-group-item-color-scale);
@if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
$list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
}
@include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
}
響應式
這些 Sass 循環也不限於 color maps。您也可以生成元件的響應式變數。例如，我們對下拉列表使用 media query 混合 $grid-breakpoints 的 @each 循環。
// 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 #{"/* rtl:ignore */"};
left: 0 #{"/* rtl:ignore */"};
}
}
.dropdown-menu#{$infix}-end {
--bs-position: end;
&[data-bs-popper] {
right: 0 #{"/* rtl:ignore */"};
left: auto #{"/* rtl:ignore */"};
}
}
}
}
如果您修改了 $grid-breakpoints ， 您的更改將應用於 map 上迭代的所有循環。
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
有關如何修改 Sass maps 與 變數的更多資訊與範例，請參考 the Sass section of the Grid documentation.
創建您自己的版本
我們鼓勵您在使用 Bootstrap 進行建立自己的元件時採用這些準則。我們已將這種方法擴展到我們的文件與範例中的自定義元件。像我們標注的元件也與我們提供的基礎與修飾符類別的元件一樣。
<div class="callout">...</div>
在您的 CSS 中，您將擁有一些類似於以下內容的樣式，其中大部分樣式是通過 .callout 完成的。並通過修飾符類別控制每個變數之間的原始樣式。
// Base class
.callout {}
// Modifier classes
.callout-info {}
.callout-warning {}
.callout-danger {}
對於標註物，原始樣式只有 border-left-color。當您基於基礎類別與修飾符類別之一結合使用時，您將獲得完整的元件系列組合：