「Bootstrap ComponentsのBreadcrumbs」のサンプル
「BootstrapのComponentsのサンプル：和訳」の「Breadcrumbs」のサンプルページです。
パンくずリストのこと。
- 「.breadcrumb」で囲む。
基本
区切り文字を変更したい時はCSSを直接修正する必要があるっぽい。
実際のソース
<ol class="breadcrumb bootstrap">
<li class="active">Home</li>
</ol>
<ol class="breadcrumb bootstrap">
<li><a href="#">Home</a></li>
<li class="active">Library</li>
</ol>
<ol class="breadcrumb bootstrap">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>構造データとの組合せ
Bootstrapには記載はないけど、構造データにしてみた。
実際のソース
<nav vocab="http://schema.org/" typeof="BreadcrumbList">
<ol class="breadcrumb bootstrap">
<li class="is" property="itemListElement" typeof="ListItem">
<a href="//tips.recatnap.info/" property="item" typeof="WebPage"><span property="name">HOME</span></a>
<meta property="position" content="0">
</li>
<li class="is" property="itemListElement" typeof="ListItem">
<a href="//tips.recatnap.info/wiki" property="item" typeof="WebPage"><span property="name">Wiki</span></a>
<meta property="position" content="1">
</li>
<li class="is active" property="itemListElement" typeof="ListItem">
<a href="//tips.recatnap.info/sample/sample_bootstrap_breadcrumbs.php" property="item" typeof="WebPage" class="active"><span property="name">「Bootstrap ComponentsのBreadcrumbs」のサンプル</span></a>
<meta property="position" content="4">
</li>
</ol>
</nav>※クラス「bootstrap」は不要です（このサイトで使っているCSSで「.breadcrumb」をすでに設定しているためbootstrap.cssと競合。その回避用につくったクラスです）