Bootstrap 內(nèi)聯(lián)標(biāo)簽和徽章
使用 Bootstrap,您可以創(chuàng)建內(nèi)聯(lián)標(biāo)簽(即 Label 和注釋的文本)和徽章(即指標(biāo)和未讀計數(shù))。
內(nèi)聯(lián)標(biāo)簽
通過內(nèi)聯(lián)標(biāo)簽?zāi)梢詣?chuàng)建醒目的標(biāo)簽和注釋文本。
實(shí)例
HTML 實(shí)例
<div class="container">
<div class="row">
<div class="span12">
<p><span class="label">默認(rèn)</span></p>
<p><span class="label label-success">成功</span></p>
<p><span class="label label-warning">警告</span></p>
<p><span class="label label-important">重要</span></p>
<p><span class="label label-info">信息</span></p>
<p><span class="label label-inverse">反選</span></p>
</div>
</div>
</div>
嘗試一下 ? bootstrap.css 中,從行號 3162 到行號 3200,呈現(xiàn)的是 label、label-success、label-warning、label-important、label-info 和 label-inverse 的樣式。
徽章
就像 Bootstrap 提到的,
徽章是用于顯示指標(biāo)或一些分類的計數(shù)的小而簡單的組件。它們通??梢栽谟糜谕扑屯ㄖ碾娮余]件客戶端比如 Mail.app 或移動 app 上找到。
實(shí)例
實(shí)例
<div class="container">
<div class="row">
<div class="span12">
<p><span class="badge">1</span></p>
<p><span class="badge badge-success">2</span></p>
<p><span class="badge badge-warning">4</span></p>
<p><span class="badge badge-important">6</span></p>
<p><span class="badge badge-info">8</span></p>
<p><span class="badge badge-inverse">10</span></p>
</div>
</div>
</div>
在線查看請注意,在該實(shí)例中,我們使用了 bootstrap-2.0.3.css,因?yàn)樵?Bootstrap v2.0.1 中沒有定義徽章的樣式。
點(diǎn)擊這里,下載本教程中使用到的所有 HTML、CSS、JS 和圖片文件。
更多建議: