コンポーネント
ほぼすべてのコンポーネントをレスポンシブに、基本クラスと修飾子クラスを使用して構築する方法とその理由について学びます。
基本クラス
Bootstrapのコンポーネントは、主にベース修飾子の命名規則で構築されています。.btnのように、できるだけ多くの共有プロパティを基本クラスにグループ化し、次に、.btn-primaryや.btn-successのように、各バリアントの個々のスタイルを修飾子クラスにグループ化します。
修飾子クラスを作成するために、Sassの@eachループを使用してSassマップを反復処理します。これは、$theme-colorsによってコンポーネントのバリアントを生成したり、各ブレークポイントのレスポンシブバリアントを作成したりする場合に特に役立ちます。これらのSassマップをカスタマイズして再コンパイルすると、これらのループで変更が自動的に反映されます。
これらのループをカスタマイズし、Bootstrapの基本修飾子アプローチを独自のコードに拡張する方法については、Sassマップとループのドキュメントを参照してください。
修飾子
Bootstrapの多くのコンポーネントは、基本修飾子クラスのアプローチで構築されています。これは、スタイリングの大部分が基本クラス（例：.btn）に含まれ、スタイルのバリエーションが修飾子クラス（例：.btn-danger）に限定されることを意味します。これらの修飾子クラスは、$theme-colorsマップから構築され、修飾子クラスの数と名前をカスタマイズできるようにします。
$theme-colorsマップをループして.alertおよび.list-groupコンポーネントの修飾子を生成する方法の2つの例を次に示します。
// 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-breakpointsSassマップの@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だけです。基本クラスをこれらの修飾子クラスの1つと組み合わせると、完全なコンポーネントファミリが得られます。