Bootstrap4 面包屑导航(Breadcrumb)
Bootstrap 4 面包屑导航(Breadcrumb)
Bootstrap 4的面包屑导航(Breadcrumb)是一种类别地图的导航方式,可以让用户了解自己进入网站的路径、在何处以及如何返回。本文将详细介绍如何使用Bootstrap 4的面包屑导航。
基本用法
使用Bootstrap 4的面包屑导航,可以通过以下的代码实现:
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active">Data</li>
</ol>
在以上的代码中,<ol>
元素包含了一个class为breadcrumb
的<li>
元素列表。每个<li>
元素都表示一个面包屑导航里的一个元素。每一个面包屑导航元素包含一个<a>
标签,可以通过点击该标签返回到前面的页面。最后一个面包屑导航元素不需要包含<a>
标签,直接使用active
的class即可。效果如下图所示:
面包屑导航样式
在Bootstrap 4的面包屑导航中,每一个面包屑导航元素都有默认的样式。如果需要修改样式,可以使用以下的class:
breadcrumb
:作用于面包屑导航顶层的<ol>
元素。breadcrumb-item
:作用于面包屑导航的每一个元素。active
:作用于面包屑导航的最后一个元素,用于表示当前页面。
例如,如果需要给面包屑导航在上方增加一个边距,可以使用以下的class:
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active">Data</li>
</ol>
.breadcrumb {
padding: 8px 15px;
margin-bottom: 20px;
list-style: none;
background-color: #f5f5f5;
border-radius: 4px;
}
面包屑导航的尺寸
Bootstrap 4的面包屑导航提供了以下的尺寸大小:
breadcrumb-lg
:大尺寸breadcrumb-sm
:小尺寸
例如,如果需要使用大尺寸的面包屑导航,可以使用以下的代码:
<ol class="breadcrumb breadcrumb-lg">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active">Data</li>
</ol>
同样地,如果需要使用小尺寸的面包屑导航,可以使用以下的代码:
<ol class="breadcrumb breadcrumb-sm">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active">Data</li>
</ol>
自定义分隔符
在默认情况下,Bootstrap 4的面包屑导航中使用“/”作为分隔符。如果需要使用不同的分隔符,可以使用以下的方式:
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
<li class="breadcrumb-item separator">></li>
<li class="breadcrumb-item active">Subdata</li>
</ol>
.breadcrumb .separator {
display: inline-block;
padding: 0 5px;
}
其中,通过添加一个具有样式的<li>
元素,可以插入一个自定义分隔符。在这里,我们使用了一个separator
类,并添加了padding
,使分隔符与面包屑导航的其他元素之间留有间隔。
总结
Bootstrap 4的面包屑导航(Breadcrumb)是一种非常实用的导航方式,能够让用户快速了解自己在网站上的位置,以及如何返回。本文详细介绍了如何使用Bootstrap 4的面包屑导航,并提供了一些常用的样式和尺寸。希望这篇文章能够帮助您更好地使用Bootstrap 4的面包屑导航。