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

分手后的思念是犯贱 2022-01-15 08:21 166阅读 0赞

[为什么80%的码农都做不了架构师？>>> ][80_]  ![hot3.png][]

## 示例 ##

![110708\_jU2P\_199513.png][110708_jU2P_199513.png]

<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类。

## 上下文的变化 ##

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

![111035\_uJmg\_199513.png][111035_uJmg_199513.png]

<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，它很有用。

![111323\_UWWV\_199513.png][111323_UWWV_199513.png]

<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：作为一个一种提示存在，感觉非常便利。

转载于:https://my.oschina.net/asktao/blog/646466

[80_]: https://my.oschina.net/u/2663968/blog/3051541
[hot3.png]: /images/20220115/1c453d87cbc943b084af6fa86b9dd634.png
[110708_jU2P_199513.png]: /images/20220115/3e62a7440a7646abb32094041c98a6d2.png
[111035_uJmg_199513.png]: /images/20220115/a6ad190b3e5548328e265a3b6ef1fe32.png
[111323_UWWV_199513.png]: /images/20220115/fec188239a2e492599f167ff6758a4e7.png