Bootstrap 4参考手册
组件·面包屑导航 | Breadcrumb
面包屑 | Breadcrumb
在通过 CSS 自动添加分隔符的导航层次结构中指示当前页面的位置。
概观
分隔符通过::before
和content
自动添加到CSS中。
在 getbootstrap.com 上打开示例
<nav aria-label="breadcrumb" role="navigation">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">Home</li>
</ol>
</nav>
<nav aria-label="breadcrumb" role="navigation">
<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" role="navigation">
<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>
无障碍
由于breadcrumbs提供导航,因此最好添加一个有意义的标签,例如aria-label="breadcrumb"
描述<nav>
元素中提供的导航类型,并将该元素应用于aria-current="page"
该集合的最后一项,以表示它代表当前页面。
有关更多信息,请参阅 breadcrumb模式WAI-ARIA创作实践。
组件·面包屑导航 | Breadcrumb相关
Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统,能够快速为你的想法开发出原型或者构建整个 app 。
主页 | https://getbootstrap.com/ |
源码 | https://github.com/twbs/bootstrap |
版本 | 4 |
发布版本 | 4.0.0-beta.2 |