Bootstrap 內(nèi)聯(lián)標簽和徽章

2018-11-07 17:45 更新

Bootstrap 內(nèi)聯(lián)標簽和徽章

簡介

使用 Bootstrap，您可以創(chuàng)建內(nèi)聯(lián)標簽（即 Label 和注釋的文本）和徽章（即指標和未讀計數(shù)）。

內(nèi)聯(lián)標簽

通過內(nèi)聯(lián)標簽您可以創(chuàng)建醒目的標簽和注釋文本。

實例

HTML 實例

<div class="container">
    <div class="row">
        <div class="span12">
            <p><span class="label">默認</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 提到的，

徽章是用于顯示指標或一些分類的計數(shù)的小而簡單的組件。它們通常可以在用于推送通知的電子郵件客戶端比如 Mail.app 或移動 app 上找到。

實例

實例

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

在線查看

請注意，在該實例中，我們使用了 bootstrap-2.0.3.css，因為在 Bootstrap v2.0.1 中沒有定義徽章的樣式。

點擊這里，下載本教程中使用到的所有 HTML、CSS、JS 和圖片文件。

以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號