Skip to main content Skip to docs navigation

コンポーネント

Components

基本・修飾子クラスを用いて、要求に応じてほぼすべてのコンポーネントを構築する仕組みを学びましょう。

基本クラス

Bootstrapのコンポーネントのほとんどは基本・修飾子命名法によって構成されています。できる限り共通のプロパティは.btnのような基本クラスにまとめ、個別のスタイルは.btn-primary.btn-successなど、それぞれのvariantにまとめています。

修飾子クラスを作るためには、Sassマップをループする@eachを利用しています。これは$theme-colorsを使いコンポーネントのバリアントを生成する際や、各ブレークポイントのバリアントを作る際に特に有用です。Sassマップをカスタマイズし再コンパイルすると、変更はこれらのループに自動的に反映されます。

これらのループのカスタマイズやBootstrapの基本・修飾子アプローチの利用法についてはSassマップとループのドキュメントをご覧ください。

Modifiers

ほとんどの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-breakpoints Sassマップとメディアクエリによって構築されます。

// 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マップと変数のカスタマイズ方法についてより詳しい情報はグリッド・ドキュメントのSassセクションをご覧ください。

自分だけのものを作る

独自のコンポーネントを作る際は、これらのガイドラインに従ってください。Bootstrapは、自身の手でドキュメントやサンプル内でこのアプローチをカスタムコンポーネントに拡張しています。CalloutのようなコンポーネントはBootstrapの提供するコンポーネントと基本・修飾子クラスのみで構成されています。

This is a callout. We built it custom for our docs so our messages to you stand out. It has three variants via modifier classes.
<div class="callout">...</div>

CSSでは、まず.calloutのようなスタイルを定義します。そして、個別のスタイルはそれぞれの修飾子クラスで制御します。

// Base class
.callout {}

// Modifier classes
.callout-info {}
.callout-warning {}
.callout-danger {}

calloutにおいては、個別のスタイルはborder-left-colorのみです。この基本クラスを修飾子クラスと組み合わせることで、全コンポーネントファミリーを用意できます。

This is an info callout. Example text to show it in action.
This is a warning callout. Example text to show it in action.
This is a danger callout. Example text to show it in action.