说明

本文每个bootstra4的class用法和HTML结构相关
结构和样式的表明用css选择器简单表示
其中[]代表可选
||代表或者
其中data-是H5中数据存储的方式，
在bootstrap4中不能缺省，用[]进行表示，会和class分开

Jumbotron

div.jumbotron[jumbotron-fluid]
<div class="jumbotron jumbotron-fluid">
    <h1>Title</h1>
    <p>content</p>
</div>

Badge（徽章）

徽章（Badges）主要用于突出显示新的或未读的项主要用于span标签

    span.badge
    [.badge-pill ||
    颜色
    .badge-default ||
    .badge-primary ||
    .......
    ]

徽章嵌入到按钮内：

<button type="button" class="btn btn-primary">
    Message <sapn class="badge badge-pill badge-light"></sapn>
</button>

进度条

div.progress
    div.progress-bar[.progress-bar-striped || .progress-bar-animated || .bg-success]

striped>>>条纹
animated>>>条纹滚动
显示长度，高度：width:70%;height:20px

<div class="progress">
    <div class="progress-bar progress-bar-striped bg-info" style="width:40%">40%</div>
    <div class="progress-bar" style="width:30%">30%</div>
</div>

分页

ul.pagination[.pagination-sm || .paginatin-lg]
      li.page-item[.active || .disable]
          a.page-link

<ul class="pagination pagination-sm">
    <li class="page-item active"><a href="" class="page-link"></a></li>
    <li class="page-item disable"><a href="" class="page-link"></a></li>
    <li class="page-item"><a href="" class="page-link"></a></li>
    <li class="page-item"><a href="" class="page-link"></a></li>
</ul>

卡片

普通卡片

div.card[.bg-*]
      div.card-header
      div.card-body
            h4.card-title
            p.card-text
            a.card-link
       div.footer

图片卡片

div.card
    img.card-img-[top||bottom]
        [.card-body || .card-image-overlay] 
        .card-body>h4.card-title
         ...

//card-image-overlay表示图片设置为背景，文字浮于图片上方

    <div class="card" style="width:500px">
          <img class="card-img-top" src="img_avatar1.png" alt="Card image">
          <div class="card-img-overlay">
                <h4 class="card-title">John Doe</h4>
                <p class="card-text">Some example text.</p>
                <a href="#" class="btn btn-primary">See Profile</a>
          </div>
    </div>