1.Bootstrap 徽章（Badges）

徽章與標簽相似，主要的區別在於徽章的邊角更加圓滑。

徽章（Badges）主要用於突出顯示新的或未讀的項。如需使用徽章，只需要把 <span class="badge"> 添加到鏈接、Bootstrap 導航等這些元素上即可。

下面的實例演示了這點：

<div class="container">
    <h2>徽章</h2>
    <p>.badge 類指定未讀消息的數量:</p>
    <p><a href="#">收件箱 <span class
 
="badge">21</span></a></p>
</div>

2.Bootstrap 頁面標題（Page Header）

頁面標題（Page Header）是個不錯的功能，它會在網頁標題四周添加適當的間距。當一個網頁中有多個標題且每個標題之間需要添加一定的間距時，頁面標題這個功能就顯得特別有用。如需使用頁面標題（Page Header），請把您的標題放置在帶有 class .page-header 的 <div> 中：

<div class="page-header">
    <h1>頁面標題實例
        
 
<small>子標題</small>
    </h1>
</div>

3.Bootstrap 縮略圖

使用 Bootstrap 創建縮略圖的步驟如下：

• 在圖像周圍添加帶有 class .thumbnail 的 <a> 標簽。
• 這會添加四個像素的內邊距（padding）和一個灰色的邊框。
• 當鼠標懸停在圖像上時，會動畫顯示出圖像的輪廓。

4.Bootstrap 警告（Alerts）

通過創建一個 <div>，並向其添加一個 .alert class 和四個上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger

<div class="alert alert-success">成功！很好地完成了提交。</div>
<div class="alert alert-info">信息！請註意這個信息。</div>
<div class="alert alert-warning">警告！請不要提交。</div>
<div class="alert alert-danger">錯誤！請進行一些更改。</div>

4.1 可取消的警告（Dismissal Alerts）

• 通過創建一個 <div>，並向其添加一個 .alert class 和四個上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，來添加一個基本的警告框。
• 同時向上面的 <div> class 添加可選的 .alert-dismissable。
• 添加一個關閉按鈕。

<div class="alert alert-success alert-dismissable">
    <button type="button" class="close" data-dismiss="alert"
            aria-hidden="true">
        &times;
    </button>
    成功！很好地完成了提交。
</div>
<div class="alert alert-info alert-dismissable">
    <button type="button" class="close" data-dismiss="alert"
            aria-hidden="true">
        &times;
    </button>
    信息！請註意這個信息。
</div>
<div class="alert alert-warning alert-dismissable">
    <button type="button" class="close" data-dismiss="alert"
            aria-hidden="true">
        &times;
    </button>
    警告！請不要提交。
</div>
<div class="alert alert-danger alert-dismissable">
    <button type="button" class="close" data-dismiss="alert"
            aria-hidden="true">
        &times;
    </button>
    錯誤！請進行一些更改。
</div>

5.Bootstrap 進度條

5.1默認的進度條

創建一個基本的進度條的步驟如下：

• 添加一個帶有 class .progress 的 <div>。
• 接著，在上面的 <div> 內，添加一個帶有 class .progress-bar 的空的 <div>。
• 添加一個帶有百分比表示的寬度的 style 屬性，例如 style="60%"; 表示進度條在 60% 的位置。

讓我們看看下面的實例：

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" 
        aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
        <span class="sr-only">40% 完成</span>
    </div>
</div>

5.2條紋的進度條

創建一個條紋的進度條的步驟如下：

• 添加一個帶有 class .progress 和 .progress-striped 的 <div>。
• 接著，在上面的 <div> 內，添加一個帶有 class .progress-bar 和 class progress-bar-* 的空的 <div>。其中，* 可以是success、info、warning、danger。
• 添加一個帶有百分比表示的寬度的 style 屬性，例如 style="60%"; 表示進度條在 60% 的位置。

讓我們看看下面的實例：

<div class="progress progress-striped">
    <div class="progress-bar progress-bar-success" role="progressbar"
         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
         style="width: 90%;">
        <span class="sr-only">90% 完成（成功）</span>
    </div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-danger" role="progressbar"
         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
         style="width: 10%;">
        <span class="sr-only">10% 完成（危險）</span>
    </div>
</div>

Boostrap 布局控件（四）