組件
了解我們?nèi)绾我约盀槭裁词褂没惡托揎椃愴憫?yīng)地構(gòu)建幾乎所有的組件。
基礎(chǔ)類
Bootstrap的組件基本上是用一個(gè)基本的修飾符命名法構(gòu)建的。我們將盡可能多的共享屬性分組到一個(gè)基類中，如.btn，然后將每個(gè)變體的各個(gè)樣式分組到修改器類中，如.btn primary或.btn success。
為了構(gòu)建修飾符類，我們使用Sass的@each循環(huán)在Sass映射上迭代。這對(duì)于通過(guò)$theme顏色生成組件的變體以及為每個(gè)斷點(diǎn)創(chuàng)建響應(yīng)變體特別有用。當(dāng)您自定義這些Sass映射并重新編譯時(shí)，您將自動(dòng)看到這些循環(huán)中反映的更改。
查看我們的Sass映射和循環(huán)文檔，了解如何定制這些循環(huán)，并將Bootstrap的基本修飾符方法擴(kuò)展到您自己的代碼中。
修飾符
Bootstrap的許多組件都是用基類修飾符方法構(gòu)建的。這意味著大部分樣式都包含在基類（例如.btn）中，而樣式變體僅限于修飾類（例如.btn）。這些修飾符類是從$theme colors映射構(gòu)建的，用于定制修飾符類的數(shù)量和名稱。
下面是兩個(gè)示例，說(shuō)明如何循環(huán)使用$theme colors映射來(lái)生成.alert和.list組組件的修飾符。
// 生成上下文修飾符類以著色警報(bào)。
@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);
}
}
// 列表組上下文變量
//
// 添加修改器類以更改單個(gè)項(xiàng)上的文本和背景色。
// 在組織上，這必須在`:hover`狀態(tài)之后。
@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);
}
響應(yīng)式
這些Sass循環(huán)也不限于顏色貼圖。您還可以生成組件的響應(yīng)變化。以我們對(duì)下拉列表的響應(yīng)對(duì)齊為例，我們將$grid breakpoints sas映射的@each循環(huán)與媒體查詢include混合在一起。
// 我們故意硬編碼'bs-`前綴，因?yàn)槲覀儥z查
// JS中的這個(gè)自定義屬性決定了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斷點(diǎn)，所做的更改將應(yīng)用于在該映射上迭代的所有循環(huán)。
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
有關(guān)如何修改Sass映射和變量的更多信息和示例，請(qǐng)參閱網(wǎng)格文檔的Sass部分。
創(chuàng)建你自己的版本
我們鼓勵(lì)您在使用Bootstrap構(gòu)建以創(chuàng)建自己的組件時(shí)采用這些準(zhǔn)則。我們已經(jīng)將這種方法擴(kuò)展到文檔和示例中的自定義組件。像callout這樣的組件就像我們提供的帶有基類和修飾符類的組件一樣構(gòu)建。
<div class="callout">...</div>
在您的CSS中，您將有如下內(nèi)容，其中大部分樣式是通過(guò).callout完成的。然后，通過(guò)修飾符類控制每個(gè)變量之間的唯一樣式。
// Base class
.callout {}
// Modifier classes
.callout-info {}
.callout-warning {}
.callout-danger {}
對(duì)于詳圖索引，這種獨(dú)特的樣式只是左邊框顏色 border-left-color。當(dāng)您將該基類與其中一個(gè)修飾符類組合時(shí)，將得到完整的構(gòu)件族：
報(bào)錯(cuò) 筆記 拼音 雙語(yǔ)對(duì)照