Bootstrap 4 tutorial

コンポーネント(1): アラート / バッジ / パンくずリスト

アラート

基本例

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

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

消去機能付きアラート

バッジ

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

h1 タイトル New

h2 タイトル New

h3 タイトル New

h4 タイトル New

h5 タイトル New
h6 タイトル New
ボタン内の使用例 ( 5 がバッジ)

バッジ一覧

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.badge.badge-(primary|secondary|success|danger|warning|info|light|dark)

Primary Secondary Success Danger Warning Info Light Dark 

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

設定例

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

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

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

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