BootStrap 徽章和面包屑导航

内容选自李炎恢的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