コンポーネント（Components）

基本のクラス（Base classes）v5.0.0-alpha1新設

Bootstrapのコンポーネントは、主に基本修飾子の命名法を使用して構築される。できるだけ多くの共有プロパティを .btn などの基本クラスにグループ化し、各バリエーションの個々のスタイルを .btn-primary や .btn-success などの修飾子クラスでグループ化する。

修飾子クラスを構築するために、Sassマップを反復処理する @each ループを使用。これは、$theme-colors によってコンポーネントのバリエーションを生成し、特に各ブレークポイントのレスポンシブ・バリエーションを作成するのに便利。これらのSassマップをカスタマイズして再コンパイルすると、これらのループに反映された変更が自動的に表示される。

これらのループをカスタマイズし、Bootstrapの基本修飾子アプローチを独自のコードに拡張する方法については、Sassマップとループの解説に記載。

修飾子（Modifiers）

Bootstrapのコンポーネントの多くは、基本の修飾子クラスのアプローチで構築されている。これは、スタイルのバリエーションが修飾子クラス（.btn-danger など）に限定されている間、スタイルの大部分が基本クラス（.btn など）に組み込まれていることを意味する。これらの修飾子クラスは $theme-colors マップから構築され、修飾子クラスの数と名前をカスタマイズする。

.alert と .list-group コンポーネントの修飾子を生成するために $theme-colors マップをループする方法の2つの実例を以下に表示。

scss/_alert.scss 内 alert-modifiers の設定// アラートを色分けするための修飾子クラスを生成
@each $color, $value in $theme-colors {
  .alert-#{$color} {
    @include alert-variant(color-level($value, $alert-bg-level), color-level($value, $alert-border-level), color-level($value, $alert-color-level));
  }
}

scss/_list-group.scss 内 list-group-modifiers の設定// グループコンテキストのバリエーションを一覧表示する
//
// 修飾子クラスを追加して、個々のアイテムのテキストと背景色を変更
// 組織的には、`:hover`状態の後に来る必要あり

@each $color, $value in $theme-colors {
  @include list-group-item-variant($color, color-level($value, $list-group-item-bg-level), color-level($value, $list-group-item-color-level));
}

レスポンシブ（Responsive）

これらのSassループもカラーマップに限定されない。また、コンポーネントやユーティリティのレスポンシブ・バリエーションも生成できる。実例として、$grid-breakpoints Sassマップの @each ループとメディアクエリの @include を組み合わせるレスポンシブテキスト配置ユーティリティを掲げる。

scss/_dropdown.scss 内 responsive-breakpoints の設定@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .dropdown-menu#{$infix}-start {
      right: auto;
      left: 0;
    }

    .dropdown-menu#{$infix}-end {
      right: 0;
      left: auto;
    }
  }
}

$grid-breakpoints を変更する必要がある場合、変更はそのマップを反復するすべてのループに適用される。

デフォルトの設定

scss/_variables.scss 内 grid-breakpoints の設定$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

Sassマップと変数を変更する方法の詳細と例については、グリッドのCSSの項目に記載。

自分で作成（Creating your own）v5.0.0-alpha1新設

Bootstrapを構築して独自のコンポーネントを作成する場合は、これらのガイドラインを採用することを推奨。公式サイトでは解説とサンプルのカスタムコンポーネントにアプローチを拡張している。吹き出しのようなコンポーネントは、基本クラスと修飾子クラスを備えた提供コンポーネントと同じように構築されている（※ここでは公式サイトとは別のCSS設定をしている）。

見本

設定例

<div class="callout">...</div>

CSSには、以下のようなものがあり、スタイリングの大部分は .callout を経由して行う。次に、各バリエーション間の一意のスタイルは、修飾子クラスによって制御される。

設定例

// 基本のクラス
.callout {}

// 修飾子クラス
.callout-info {}
.callout-warning {}
.callout-danger {}

吹き出しの場合、そのユニークなスタイルは border-left-color。その基本クラスをこれらの修飾子クラスの1つと組み合わせると、完全なコンポーネントのセットが得られる：

見本