Bootstrap4 基礎教程

Bootstrap4 パンくずリスト（Breadcrumb）

パンくずリストは、ユーザーに現在のページがウェブサイトやアプリケーション内のどの位置にあるかを示すナビゲーションスキームです。パンくずリストナビゲーションは、多くのページや複雑なナビゲーション階層を持つウェブサイトのアクセス性を大幅に向上させることができます。

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

Bootstrapのパンくずリストナビゲーションはシンプルな .breadcrumb classの無序列表。区切り文字はCSS(bootstrap.min.css)の::beforeとcontentで追加されます。以下のclassが自動的に追加されます：

.breadcrumb-item　+　.breadcrumb-item::before　{
　　display: inline-block;
　　padding-right: 0.5rem;
　　color: "#6c757d;
　　content: "/";
}

Bootstrapを使って静的なパンくずリストレイアウトを作成するには、オーダリストの.breadcrumbクラスを使用するだけで十分です。以下はBootstrapの例です：4 パンくずリスト例

例

!DOCTYPE　html
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jQuery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<ol　class="breadcrumb">
　　<li　class="breadcrumb-item　active">ホーム</li>
</ol>
<ol　class="breadcrumb">
　　<li　class="breadcrumb-item"><a　href="#">ホーム</a></li>
　　<li　class="breadcrumb-item　active">ライブラリ</li>
</ol>
<ol　class="breadcrumb">
　　<li　class="breadcrumb-item"><a　href="#">ホーム</a></li>
　　<li　class="breadcrumb-item"><a　href="#">ライブラリ</a></li>
　　<li　class="breadcrumb-item　active">データ</li>
</ol>
</body>
</html>

テストしてみてください ‹/›

リスト形式を使わない場合もできます：

Bootstrap4 パンくずリスト例

!DOCTYPE　html
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jQuery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav　class="breadcrumb">
　　<a　class="breadcrumb-item"　href="#">ホーム</a>
　　<a　class="breadcrumb-item"　href="#">ライブラリ</a>
　　<a　class="breadcrumb-item"　href="#">データ</a>
　　<span　class="breadcrumb-item　active">Bootstrap</span>
</nav>
</body>
</html>

テストしてみてください ‹/›

実行後の効果は以下の通りです：

Bootstrap4 フォーム Bootstrap4 ナビゲーションバー