Bootstrap4.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-info badge-pill">4.x</a>
    </h3>

二、面包屑导航

使用.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>