天天看點

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" 類型的紅色标簽