元件
瞭解我們如何以及為何建立幾乎所有元件都具備回應式，並使用基礎和修改器類別。
基礎類別
Bootstrap 的元件主要以基礎修改器命名法建立。我們將儘可能多的共用屬性分組到一個基礎類別中，例如 .btn，然後將每個變體的個別樣式分組到修改器類別中，例如 .btn-primary 或 .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 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);
}
}
// 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);
}
}
回應式
這些 Sass 迴圈也不限於顏色地圖。您也可以產生元件的回應式變異。以我們的下拉式選單回應式對齊為例，我們將 $grid-breakpoints Sass 地圖的 @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;
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 地圖和變數的更多資訊和範例，請參閱 網格文件中的 CSS 區段。
建立您自己的
我們鼓勵您在使用 Bootstrap 建置時採用這些準則，以建立您自己的元件。我們已將此方法延伸至文件和範例中的自訂元件。我們的標題等元件的建置方式就像我們提供的元件一樣，採用基礎類別和修改器類別。
<div class="callout">...</div>
在你的 CSS 中，你會看到類似以下的內容，其中大部分的樣式都是透過 .callout 完成。然後，每個變體之間的獨特樣式是透過修改器類別控制。
// Base class
.callout {}
// Modifier classes
.callout-info {}
.callout-warning {}
.callout-danger {}
對於註解，這種獨特的樣式只是一個 border-left-color。當你將那個基礎類別與其中一個修改器類別結合時，你就會得到你的完整元件系列。