4.8、Bootstrap V4自学之路------组件---标签

示例

<h1>h1 span class="label-default"> <span class="label-default">New</span></h1>
<h1>h1 span class="label label-default"> <span class="label label-default">New</span></h1>
<h2>h2 span class="label label-default"> <span class="label label-default">New</span></h2>
<h3>h3 span class="label label-default"> <span class="label label-default">New</span></h3>
<h4>h4 span class="label label-default"> <span class="label label-default">New</span></h4>
<h5>h5 span class="label label-default"> <span class="label label-default">New</span></h5>
<h6>h6 span class="label label-default"> <span class="label label-default">New</span></h6>

PS：看了半天，原来是最后面的那个New，享受  .label 和 .label-default类。

上下文的变化

添加下面提到的修饰类的任一个，以改变标签的外观。

<span class="label-default">class="label-default"</span>    <br>
<span class="label label-default">class="label label-default"</span>    <br>
<span class="label label-primary">class="label label-primary"</span>    <br>
<span class="label label-success">class="label label-success"</span>    <br>
<span class="label label-info">class="label label-info"</span>  <br>
<span class="label label-warning">class="label label-warning"</span>    <br>
<span class="label label-danger">class="label label-danger"</span>

丸状标签

使用.label-pill修饰类以使标签变得更圆（更大的border-radius以及额外的横向padding）。如果你想念v3的badges，它很有用。

<span class="label-default label-pill">class="label-default label-pill"</span>    <br>
<span class="label label-pill label-default">class="label label-pill label-default "</span>    <br>
<span class="label label-pill label-primary">class="label label-pill label-primary"</span>    <br>
<span class="label label-pill label-success">class="label label-pill label-success"</span>    <br>
<span class="label label-pill label-info">class="label label-pill label-info"</span>  <br>
<span class="label label-pill label-warning">class="label label-pill label-warning"</span>    <br>
<span class="label label-pill label-danger">class="label label-pill label-danger"</span>

PS：作为一个一种提示存在，感觉非常便利。