アラート

基本例

• 外枠 div.alert.alert-(primary|secondary|success|danger|warning|info|light|dark) 属性
  • アクセシビリティ属性 role="alert"
  • ヘッダ h(1|2|3|...).alert-heading
  • リンク a.alert-link
  • その他任意の要素を使用可

div.alert.alert-primary

div.alert.alert-secondary

div.alert.alert-success

div.alert.alert-danger

div.alert.alert-warning

div.alert.alert-info

div.alert.alert-light

div.alert.alert-dark

内部レイアウト例(+表示サンプル)

消去機能付きアラート

• div.alert.alert-(primary|secondary|...) 属性
  • (オプション)フェードアウト効果 .fade.show
  • 内部テキスト(略)
  • クローズボタン button.close 属性
    • 属性 type="button"
    • 属性 data-dismiss="alert"
    • アクセシビリティ属性 aria-label="Close"
    • スクリーンリーダ用 span 属性
      • アクセシビリティ属性 aria-hidden="true"
      • テキスト ×

バッジ

例

タイトルに付けるバッジの例 ( New がバッジ)

h1 タイトル New

h2 タイトル New

h3 タイトル New

h4 タイトル New

h5 タイトル New

h6 タイトル New

ボタン内の使用例 ( 5 がバッジ)

通知5未読数

• button.btn.btn-primary
• テキスト 通知
• バッジ span.badge.badge-light 属性
  • 左マージン ml-2
  • テキスト 5
• スクリーンリーダ用 span.sr-only
  • テキスト 未読数

バッジ一覧

span.badge.badge-(primary|secondary|success|danger|warning|info|light|dark)

Primary Secondary Success Danger Warning Info Light Dark 

ピルバッジ

span.badge.badge-pill.badge-(primary|secondary|success|danger|warning|info|light|dark)

Primary Secondary Success Danger Warning Info Light Dark 

バッジを使ったリンク( a 要素)

a.badge.badge-(primary|secondary|success|danger|warning|info|light|dark)

Primary Secondary Success Danger Warning Info Light Dark 

パンくずリスト

パンくずリスト(ブレッドクラム)は主にサイト階層の表現に用いる。

構造

• アクセシビリティ用親要素 nav 属性
• アクセシビリティ属性 aria-label="breadcrumb"
• ol.breadcrumb
• リンク付きアイテム li.breadcrumb-item
  • リンク a 属性
    • 属性 href="..."
    • テキスト(例) Home
• 現在位置(最後、リンクなし) li.breadcrumb-item.active 属性
  • アクセシビリティ属性 aria-current="page"
  • テキスト(例) Data

設定例

セパレータの変更

セパレータ文字はデフォルトで "/" に設定されているが、 ブロックの最後に次のCSSを追加すれば変更できる(本ページに設定している実例)。

breadcrumb-item + .breadcrumb-item::before { content: "\00bb" }

より本格的にbootstrap.cssをソースコードからカスタマイズすることも可能。詳しくはCSSのカスタマイズを参照(Sassの知識が必要)。

(最後に実例) この下にあるのが本ページのパンくずリスト。