|
4 bootstrap4组件——面包屑导航
1、基本结构2、分隔符原理
在通过BootStrap的内置CSS样式，自动添加分隔符、并呈现导航层次和网页结构，从而指示当前页面的位置为访客创造优秀用户体验。
1、基本结构
首页
web前端
Bootstrap
.breadcrumb：标记为面包屑导航 .breadcrumb-item：标记为面包屑导航内容项 .active：表示当前页面（高亮） aria-label="breadcrumb"：针对面包屑这样具备导航功能的模块，添加一个有意义的标签来描述 元素 aria-current=“page”：这组导航的最后一个项目，以标明当前页面名称（路径）
2、分隔符原理
分隔符通过::before和自动添加到CSS中content.
.breadcrumb-item + .breadcrumb-item::before {
display: inline-block;
padding-right: 0.5rem;
color: #6c757d;
content: "/";
}
可以通过重置CSS中的content属性值，如果你想>为分隔符，你可以添加如下CSS样式：
.breadcrumb-item + .breadcrumb-item::before {
content: ">";
}
|