Bootstrap基本チュートリアル

Bootstrapプラグイン

Bootstrap パンくずリストナビゲーション

パンくずリスト(Breadcrumbs)は、ウェブサイトの階層情報に基づいた表示方法です。ブログの場合、パンくずリストは投稿日、カテゴリ、タグを表示できます。これらは、現在のページがナビゲーション階層内のどの位置にあるかを示します。

Bootstrapのパンくずリスト(Breadcrumbs)は、シンプルな .breadcrumb classの無序列表。区切り記号は、以下に示されるCSS(bootstrap.min.css)のclassに自動的に追加されます：

.breadcrumb　>　li　+　li:before　{
　　　　color:　#CCCCCC;
　　　　content:　"/　";
　　　　padding:　0　5px;
}

以下のサンプルは、パンくずリストの使用例を示しています：

オンラインサンプル

サンプル

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　サンプル　-　パンくずリスト</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<ul　class="breadcrumb">
	<li><a　href="#">ホーム</a></li>
	<li><a　href="#">2012</a></li>
	<li　class="active">十二月</li>
</ul>
</body>
</html>

テストをしてみる ‹/›

以下の結果が表示されました：

Bootstrap ページネーション Bootstrap ナビゲーションバー