天天看点

Bootstrap 标签

本章将讲解 Bootstrap 标签。标签可用于计数、提示或页面上其他的标记显示。使用 class <b>.label</b> 来显示标签,如下面的实例所示:

&lt;h1&gt;Example Heading &lt;span class="label label-default"&gt;Label&lt;/span&gt;&lt;/h1&gt;

&lt;h2&gt;Example Heading &lt;span class="label label-default"&gt;Label&lt;/span&gt;&lt;/h2&gt;

&lt;h3&gt;Example Heading &lt;span class="label label-default"&gt;Label&lt;/span&gt;&lt;/h3&gt;

&lt;h4&gt;Example Heading &lt;span class="label label-default"&gt;Label&lt;/span&gt;&lt;/h4&gt;

结果如下所示:

Bootstrap 标签

您可以使用修饰的 class <b>label-default、label-primary、label-success、label-info、label-warning、label-danger</b> 来改变标签的外观,如下面的实例所示:

&lt;span class="label label-default"&gt;默认标签&lt;/span&gt;

&lt;span class="label label-primary"&gt;主要标签&lt;/span&gt;

&lt;span class="label label-success"&gt;成功标签&lt;/span&gt;

&lt;span class="label label-info"&gt;信息标签&lt;/span&gt;

&lt;span class="label label-warning"&gt;警告标签&lt;/span&gt;

&lt;span class="label label-danger"&gt;危险标签&lt;/span&gt;

Bootstrap 标签

描述

实例

.label label-default

默认的灰色标签

.label label-primary

"primary" 类型的蓝色标签

.label label-success

"success" 类型的绿色标签

.label label-info

"info" 类型的浅蓝色标签

.label label-warning

"warning" 类型的黄色标签

.label label-danger

"danger" 类型的红色标签