bootstrap使用手册
面包屑导航
Bootstrap面包屑导航是一种常用的导航组件,可用于网站建设、网页设计、网站开发、小程序、独立站和跨境电商等领域,提供了清晰的导航路径,方便用户浏览和定位,提高了网站的用户体验。
有兴趣与 DEVDIY 开发者合作吗?
在通过BootStrap的内置CSS样式,自动添加分隔符、并呈现导航层次和网页结构结构,从而指示当前页面的位置为访客创造优秀用户体验。
概览
分隔符号是通过::before
和 content
两个方法定义添加的。
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">Home</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<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>
</ol>
</nav>
更改分隔符
分隔符通过::before和自动添加到CSS中content。他们可以通过改变来改变$breadcrumb-divider。该报价是需要函数生成围绕一个字符串的报价,所以如果你想>为分隔符,你可以这样做:
$breadcrumb-divider: quote(">");
也可以使用base64嵌入式SVG图标:
$breadcrumb-divider: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+);
分隔符可以通过设置$breadcrumb-divider
为none
:
$breadcrumb-divider: none;
加入 DEVDIY 开发者社区
利用 DEVDIY 资源快速拓展您的业务有兴趣与 DEVDIY 开发者合作吗?