パンくずリスト breadcrumb
Bootstrapで用意されているパンくずリストの紹介。
パンくずリストの基本
リストのul、olに.breadcrumbを指定するだけです。
.activeを指定することで現在地を明示。色が灰色になります。
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
パンくずリストのカスタマイズ
パンくずリストは説明が少ないので、少しカスタマイズの方法を追記しておきます。
背景色の変更
.breadcrumbのCSSを別の色に指定することで変更できます。
.breadcrumb{
background-color: aqua;
}
区切り線の変更
CSSで.breadcrumb > li + li:beforeのcontent内の指定を変更することで区切り線を変更できます。下記は標準の『/』から『>』に区切り線を変更した例です。画像を指定することも可能です。
.breadcrumb > li + li:before {
content: ">";
}
FontAwesomeを利用しこんな風にもできます。