組件
了解我們如何以及為什么使用基類和修飾符類響應地構建幾乎所有的組件。
基礎類
Bootstrap的組件基本上是用一個基本的修飾符命名法構建的。我們將盡可能多的共享屬性分組到一個基類中，如.btn，然后將每個變體的各個樣式分組到修改器類中，如.btn primary或.btn success。
為了構建修飾符類，我們使用Sass的@each循環在Sass映射上迭代。這對于通過$theme顏色生成組件的變體以及為每個斷點創建響應變體特別有用。當您自定義這些Sass映射并重新編譯時，您將自動看到這些循環中反映的更改。
查看我們的Sass映射和循環文檔，了解如何定制這些循環，并將Bootstrap的基本修飾符方法擴展到您自己的代碼中。
修飾符
Bootstrap的許多組件都是用基類修飾符方法構建的。這意味著大部分樣式都包含在基類（例如.btn）中，而樣式變體僅限于修飾類（例如.btn）。這些修飾符類是從$theme colors映射構建的，用于定制修飾符類的數量和名稱。
下面是兩個示例，說明如何循環使用$theme colors映射來生成.alert和.list組組件的修飾符。
// 生成上下文修飾符類以著色警報。
@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);
}
}
// 列表組上下文變量
//
// 添加修改器類以更改單個項上的文本和背景色。
// 在組織上，這必須在`:hover`狀態之后。
@each $state, $value in $theme-colors {
$list-group-background: shift-color($value, $list-group-item-bg-scale);
$list-group-color: shift-color($value, $list-group-item-color-scale);
@if (contrast-ratio($list-group-background, $list-group-color) < $min-contrast-ratio) {
$list-group-color: mix($value, color-contrast($list-group-background), abs($alert-color-scale));
}
@include list-group-item-variant($state, $list-group-background, $list-group-color);
}
響應式
這些Sass循環也不限于顏色貼圖。您還可以生成組件的響應變化。以我們對下拉列表的響應對齊為例，我們將$grid breakpoints sas映射的@each循環與媒體查詢include混合在一起。
// 我們故意硬編碼'bs-`前綴，因為我們檢查
// JS中的這個自定義屬性決定了Popper的位置
@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斷點，所做的更改將應用于在該映射上迭代的所有循環。
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
有關如何修改Sass映射和變量的更多信息和示例，請參閱網格文檔的Sass部分。
創建你自己的版本
我們鼓勵您在使用Bootstrap構建以創建自己的組件時采用這些準則。我們已經將這種方法擴展到文檔和示例中的自定義組件。像callout這樣的組件就像我們提供的帶有基類和修飾符類的組件一樣構建。
<div class="callout">...</div>
在您的CSS中，您將有如下內容，其中大部分樣式是通過.callout完成的。然后，通過修飾符類控制每個變量之間的唯一樣式。
// Base class
.callout {}
// Modifier classes
.callout-info {}
.callout-warning {}
.callout-danger {}
對于詳圖索引，這種獨特的樣式只是左邊框顏色 border-left-color。當您將該基類與其中一個修飾符類組合時，將得到完整的構件族：
報錯 筆記 拼音 雙語對照