内容选自李炎恢的Bootstrap v4.x教程笔记
一.徽章样式
1. 使用.badge 设置徽章基础样式,并使用.badge-success 等设置徽章颜色;
<h1>Bootstrap <span class="badge badge-secondary">4.x</span></h1> <h2>Bootstrap <span class="badge badge-success">4.x</span></h2> <h3>Bootstrap <span class="badge badge-info">4.x</span></h3> <h4>Bootstrap <span class="badge badge-danger">4.x</span></h4> <h5>Bootstrap <span class="badge badge-warning">4.x</span></h5> <h6>Bootstrap <span class="badge badge-light">4.x</span></h6> <h6>Bootstrap <span class="badge badge-primary">4.x</span></h6> <h6>Bootstrap <span class="badge badge-dark">4.x</span></h6>
2. 使用.badge-pill 将徽章设置成椭圆胶囊式;
<h3>Bootstrap <span class="badge badge-info badge-pill">4.x</span> </h3>
3. 在超链接使用徽章,鼠标悬停时会有换色效果;
<h3>Bootstrap <a href="#" class="badge badge-success badge-pill">4.x</a> </h3>
二.面包屑导航
1. 使用.breadcrumb 设置一个层次导航(一行分割显示那种);
<nav> <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">Bootstrap4.x</li> </ol> </nav