Bulma-components-breadcrumb
提供：Dev Guides
ブルマ-パンくずリスト
説明
.breadcrumb_クラスはブレッドクラムコンポーネントを定義するために必要であり、。is-active_クラスは特定のアクティブページを表示するために使用できます。
デフォルトの_.breadcrumb_クラスは左揃えです。 _.breadcrumb_クラスと中央揃えの_is-centered_クラス、および右揃えの_is-right_クラスと組み合わせることで、パンくずリストコンテナを揃えることができます。
以下の例では、パンくずリスト（_nav_タグの_breadcrumb_クラスを使用）とページ内の要素の配置を表示する方法について説明します-
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Card</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script defer src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
<script defer src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<h1 class = "is-size-2">Breadcrumb</h1>
<nav class = "breadcrumb is-small" aria-label = "breadcrumbs">
<ul>
<li><a href = "#">Bulma</a></li>
<li><a href = "#">Documentation</a></li>
<li><a href = "#">Components</a></li>
<li class = "is-active"><a href = "#" aria-current = "page">Breadcrumb</a></li>
</ul>
</nav>
<br>
<!-- <p class = "is-size-3">Alignment </p> <br> -->
<h1 class = "is-size-3">Alignment</h1>
<br>
<h1 class = "is-size-5">Center</h1>
<nav class = "breadcrumb is-centered" aria-label = "breadcrumbs">
<ul>
<li><a href = "#">Bulma</a></li>
<li><a href = "#">Documentation</a></li>
<li><a href = "#">Components</a></li>
<li class = "is-active">
<a href = "#" aria-current = "page">Breadcrumb</a>
</li>
</ul>
</nav>
<br>
<h1 class = "is-size-5">Right</h1>
<nav class = "breadcrumb is-right" aria-label =" breadcrumbs">
<ul>
<li><a href = "#">Bulma</a></li>
<li><a href = "#">Documentation</a></li>
<li><a href = "#">Components</a></li>
<li class = "is-active">
<a href = "#" aria-current = "page">Breadcrumb</a>
</li>
</ul>
</nav>
</div>
</section>
</body>
</html>上記のコードを実行すると、以下の出力が得られます-
アイコン
.breadcrumb_クラスは_Font Awesome_アイコンで使用でき、_has-arrow-separator _、 has-bullet-separator 、 has-dot-separator 、 has-succeeds-separator_クラスなどの追加のセパレータクラスと組み合わせることもできます。
以下の例は、_。breadcrumb_クラスコンテナとともに、アイコンと上記の追加のセパレータクラスの使用を示しています-
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Breadcrumb - Icons</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script defer src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
<script defer src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<p class = "is-size-4">Breadcrumb with Icons</p>
<nav class = "breadcrumb" aria-label = "breadcrumbs">
<ul>
<li>
<a href = "#">
<span class = "icon is-small">
<i class = "fas fa-home" aria-hidden = "true"></i>
</span>
<span>Home</span>
</a>
</li>
<li>
<a href = "#">
<span class = "icon is-small">
<i class = "fas fa-book" aria-hidden = "true"></i>
</span>
<span>finddevguides</span>
</a>
</li>
<li>
<a href = "#">
<span class = "icon is-small">
<i class = "fas fa-puzzle-piece" aria-hidden = "true"></i>
</span>
<span>Bulma</span>
</a>
</li>
<li class = "is-active">
<a href = "#">
<span class = "icon is-small">
<i class = "fas fa-thumbs-up" aria-hidden = "true"></i>
</span>
<span>Documentation</span>
</a>
</li>
</ul>
</nav>
<p class = "is-size-4">Different types of Breadcrumbs</p>
<br>
<nav class = "breadcrumb has-arrow-separator" aria-label = "breadcrumbs">
<ul>
<li><a href = "#">Home</a></li>
<li><a href = "#">finddevguides</a></li>
<li><a href = "#">Bulma</a></li>
<li class = "is-active">
<a href = "#" aria-current = "page">Documentation</a>
</li>
</ul>
</nav>
<br>
<nav class = "breadcrumb has-bullet-separator" aria-label = "breadcrumbs">
<ul>
<li><a href = "#">Home</a></li>
<li><a href = "#">finddevguides</a></li>
<li><a href = "#">Bulma</a></li>
<li class = "is-active">
<a href = "#" aria-current = "page">Documentation</a>
</li>
</ul>
</nav>
<br>
<nav class = "breadcrumb has-dot-separator" aria-label = "breadcrumbs">
<ul>
<li><a href = "#">Home</a></li>
<li><a href = "#">finddevguides</a></li>
<li><a href = "#">Bulma</a></li>
<li class = "is-active">
<a href = "#" aria-current="page">Documentation</a>
</li>
</ul>
</nav>
<br>
<nav class = "breadcrumb has-succeeds-separator" aria-label = "breadcrumbs">
<ul>
<li><a href = "#">Home</a></li>
<li><a href = "#">finddevguides</a></li>
<li><a href = "#">Bulma</a></li>
<li class = "is-active">
<a href = "#" aria-current = "page">Documentation</a>
</li>
</ul>
</nav>
</div>
</section>
</body>
</html>以下の出力が表示されます-
サイズ
.breadcrumb_クラスは、_is-small _、 is-medium 、 is-largeなどの3種類のサイズクラスと組み合わせることができます。
以下の例は、ページ内のパンくずのサイズを示しています-
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Breadcrumb - Sizes</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script defer src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
<script defer src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<h1 class = "is-size-2">Breadcrumb Sizes</h1>
<br>
<p class = "is-size-5">Small</p>
<nav class = "breadcrumb is-small" aria-label = "breadcrumbs">
<ul>
<li><a href = "#">Home</a></li>
<li><a href = "#">finddevguides</a></li>
<li><a href = "#">Bulma</a></li>
<li class = "is-active">
<a href = "#" aria-current="page">Documentation</a>
</li>
</ul>
</nav>
<!-- <p class = "is-size-3">Alignment</p><br> -->
<p class = "is-size-5">Medium</p>
<br>
<nav class = "breadcrumb is-medium" aria-label = "breadcrumbs">
<ul>
<li><a href = "#">Home</a></li>
<li><a href = "#">finddevguides</a></li>
<li><a href = "#">Bulma</a></li>
<li class = "is-active">
<a href = "#" aria-current = "page">Documentation</a>
</li>
</ul>
</nav>
<p class = "is-size-5">Large</p>
<br>
<nav class = "breadcrumb is-large" aria-label = "breadcrumbs">
<ul>
<li><a href = "#">Home</a></li>
<li><a href = "#">finddevguides</a></li>
<li><a href = "#">Bulma</a></li>
<li class = "is-active">
<a href = "#" aria-current = "page">Documentation</a>
</li>
</ul>
</nav>
</div>
</section>
</body>
</html>以下の出力が表示されます-
