组件
了解我们如何以及为什么使用基类和修饰符类响应地构建几乎所有的组件。
基础类
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。当您将该基类与其中一个修饰符类组合时，将得到完整的构件族：
报错 笔记 拼音 双语对照