Bulma 面包屑
说明
.breadcrumb 类需要定义面包屑组件，
.is-active 类可用于显示特定的活动页面。
默认的
.breadcrumb 类是左对齐的。您可以通过将
.breadcrumb 类与用于居中对齐的
is-centric 类和用于右对齐的
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>Tutorialspoint</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 = "#">Tutorialspoint</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 = "#">Tutorialspoint</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 = "#">Tutorialspoint</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 = "#">Tutorialspoint</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 和
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 = "#">Tutorialspoint</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 = "#">Tutorialspoint</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 = "#">Tutorialspoint</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>
它显示以下输出-
