メインコンテンツへスキップ

コンポーネント(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つの実例を次に示す。

Sass// アラートを色分けするための修飾子クラスを生成
@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));
	}
}
Sass// グループコンテキストのバリエーションを一覧表示する
//
// 修飾子クラスを追加して、個々のアイテムのテキストと背景色を変更
// 組織的には、`: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 を組み合わせるレスポンシブテキスト配置ユーティリティを掲げる。

Sassマップ@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: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

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

 

自分で作成(Creating your own)v5.0.0-alpha1新設

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

見本
これは吹き出しです。ドキュメント用にカスタムを構築したので、皆さんへのメッセージが目立ちます。修飾子クラスによる3つのバリエーションがあります。
設定例
<div class="callout">...</div>

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

設定例
// 基本のクラス
.callout {}

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

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

見本

.callout.callout-info

これは情報用の吹き出しです。実際に表示するためのテキストの例。

.callout.callout-warning

これは警告用の吹き出しです。実際に表示するためのテキストの例。

.callout.callout-danger

これは危険用の吹き出しです。実際に表示するためのテキストの例。