コンポーネント

Bootstrapで用意されているコンポーネントの説明。

パンくずリスト breadcrumb

Bootstrapで用意されているパンくずリストの紹介。

パンくずリストの基本

リストのulol.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:beforecontent内の指定を変更することで区切り線を変更できます。下記は標準の『/』から『>』に区切り線を変更した例です。画像を指定することも可能です。

				.breadcrumb > li + li:before {
				  content: ">";
				}

FontAwesomeを利用しこんな風にもできます。