パンくずリスト Breadcrumbs

パンくずリストに最適なスタイル。

使い方

ポイントは2つ。

1. class属性にbreadcrumbを指定したol要素を用意し、リスト形式でパンくずを指定。
2. 現在開いているページを表すリスト項目のli要素のclass属性には、activeを指定する。

<ol class="breadcrumb">
	<li><a href="http://bootstrap3.cyberlab.info">Bootstrap3日本語リファレンス</a></li>
	<li><a href="http://bootstrap3.cyberlab.info/components/">コンポーネント</a></li>
	<li class="active">パンくず</li>
</ol>

基本

基本的使い方。

表示サンプル

1. Bootstrap3日本語リファレンス
2. コンポーネント
3. パンくず

ソースコード

<ol class="breadcrumb">
	<li><a href="http://bootstrap3.cyberlab.info">Bootstrap3日本語リファレンス</a></li>
	<li><a href="http://bootstrap3.cyberlab.info/components/">コンポーネント</a></li>
	<li class="active">パンくず</li>
</ol>

アイコンを使用

ホーム用のアイコンを使用するスタイル。

表示サンプル

1. Bootstrap3日本語リファレンス
2. コンポーネント
3. パンくず

ソースコード

<ol class="breadcrumb">
	<li><a href="http://bootstrap3.cyberlab.info"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> Bootstrap3日本語リファレンス</a></li>
	<li><a href="http://bootstrap3.cyberlab.info/components/">コンポーネント</a></li>
	<li class="active">パンくず</li>
</ol>