ボタン

ボタンのサンプル

button.btn.btn-(primary|secondary|success|danger|warning|info|light|dark|link)

Primary Secondary Success Danger Warning Info Light Dark Link

各種要素への設定例

アウトラインボタン

button.btn.btn-outline-(primary|secondary|success|danger|warning|info|light|dark)

Primary Secondary Success Danger Warning Info Light Dark

サイズの設定

.btn.btn-(lg|sm)

大 .btn-lg

Large button Large button

中(デフォルト)

Medium button Medium button

小 .btn-sm

Small button Small button

ブロックレベルボタン

.btn-block を追加

Block level button Block level button

アクティブ状態

.active を設定すると常に押された状態(pressed/active)の(濃い)配色で表示する。

Primary link Secondary link 

無効化状態

• button の場合
  • 属性 disabled を設定すると灰色表示になり動作も無効化
  • クラス .disabled を設定すると灰色表示(動作は有効)
• a の場合
  • クラス .disabled を設定すると灰色表示になり動作も無効化
  • アクセシビリティ属性(推奨) aria-disabled="true"

例1: button 要素に属性 disabled を設定(表示・機能とも無効化)

例2: button にクラス .disabled を設定(表示効果のみ、押せる)

例3: a にクラス .disabled を設定(表示・機能とも無効化)

ボタングループ

基本例

• ボタングループ div.btn-group 属性
  • アクセシビリティ属性 role="group"
  • アクセシビリティ属性(例) aria-label="Basic example"
  • ボタンアイテム(通常複数) button.btn.btn-(primary|secondary|...) 属性
    • 属性 type="button"
    • テキスト(例) Left

ボタンツールバー

ボタングループや他のコンポーネントを上位でグループ化する親要素。

• ツールバー div.btn-toolbar 属性
  • アクセシビリティ属性 role="toolbar"
  • アクセシビリティ属性(例) aria-label="Toolbar with button groups"
  • ボタングループ(通常複数) div.btn-group
    • 以下 基本例 を参照
  • または インプットグループ , etc.

ボタンツールバーの基本例

インプットグループとの組み合わせ例

div.btn-toolbar

div.btn-toolbar.justify-content-between (⇒ Flexboxユーティリティ )

応用: ボタンツールバーとラジオボタンの組み合わせ (⇒ ラジオボタン(インライン配置) )

ラジオボタンは div.form.form-inline の中に入れて .mx-auto で均等配置

サイズ設定

.btn-group-(lg|sm) を用いる: 以下は設定サンプル

div.btn-group.btn-group-lg

div.btn-group

div.btn-group.btn-group-sm

ドロップダウン

ボタンの中にドロップダウンを用いる場合はボタングループを2重にネストする。

• div.btn-group
  • 通常のボタン button.btn.btn-secondary
  • ネストしたボタングループ div.btn-group
    • ドロップダウン button.btn.btn-secondary.dropdown-toggle
    • アイテムリスト div.dropdown-menu
      • メニューアイテム a.dropdown-item

縦の配置

div.btn-group-vertical

応用: 縦配置とネスティング(ドロップダウン)の組み合わせ