最新的Web開發教程
 

Bootstrap Badges and Labels


徽章

徽章是多少項與鏈接相關的數字指標:

新聞5
評論10
更新2

的數字(5,10,和2)的徽章。

使用.badge內的類<span>元素,創造徽章:

<a href="#">News <span class="badge">5</span></a><br>
<a href="#">Comments <span class="badge">10</span></a><br>
<a href="#">Updates <span class="badge">2</span></a>
試一試»

徽章也可以其它元件,如按鈕內使用:



下面的例子說明如何徽章添加按鈕:

<button type="button" class="btn btn-primary">Primary <span class="badge">7</span></button>
試一試»

標籤

標籤是用來提供一些附加信息:

例如

例如

例如

例如

例如
例如

使用.label類,接著的六個上下文類之一.label-default.label-primary.label-success.label-info.label-warning.label-danger ,一內<span>元素創建標籤:

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

下面的例子顯示了所有的上下文標註類:

默認標籤 主標籤 成功標籤 信息標籤 警告標籤 危險標籤

<span class="label label-default">Default Label</span>
<span class="label label-primary">Primary Label</span>
<span class="label label-success">Success Label</span>
<span class="label label-info">Info Label</span>
<span class="label label-warning">Warning Label</span>
<span class="label label-danger">Danger Label</span>
試一試»

自測練習用!

練習1» 練習2» 練習3» 練習4»