成分
了解我們如何以及為什麼我們以響應方式以及使用基類和修飾類構建幾乎所有組件。
基類
Bootstrap 的組件主要是使用基本修飾符命名法構建的。我們將盡可能多的共享屬性分組到一個基類中，例如.btn，然後將每個變體的單獨樣式分組到修飾符類中，例如.btn-primaryor .btn-success。
為了構建我們的修飾符類，我們使用 Sass 的@each循環來迭代 Sass 映射。這對於我們生成組件的$theme-colors變體以及為每個斷點創建響應變體特別有用。當您自定義這些 Sass 映射並重新編譯時，您將自動看到您的更改反映在這些循環中。
查看我們的 Sass 映射和循環文檔，了解如何自定義這些循環並將 Bootstrap 的基本修飾符方法擴展到您自己的代碼。
修飾符
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 {
$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 循環也不限於彩色地圖。您還可以生成組件的響應式變體。以我們的下拉響應對齊為例，我們將 Sass 地圖的@each循環$grid-breakpoints與媒體查詢包含混合在一起。
// 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，您的更改將應用於遍歷該地圖的所有循環。
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
有關如何修改 Sass 映射和變量的更多信息和示例，請參閱Grid 文檔的 Sass 部分。
創建你自己的
我們鼓勵您在使用 Bootstrap 構建以創建自己的組件時採用這些準則。我們已經將這種方法自己擴展到我們的文檔和示例中的自定義組件。像我們的標註這樣的組件就像我們提供的帶有基類和修飾符類的組件一樣構建。
<div class="callout">...</div>
在您的 CSS 中，您將擁有類似於以下內容的內容，其中大部分樣式是通過.callout. 然後，通過修飾符類控制每個變體之間的獨特樣式。
// Base class
.callout {}
// Modifier classes
.callout-info {}
.callout-warning {}
.callout-danger {}
對於標註，這種獨特的樣式只是一個border-left-color. 當您將該基類與其中一個修飾符類結合使用時，您將獲得完整的組件系列：