2018-10-09Bootstrap05

Bootstrap 分頁(yè)

本章將講解 Bootstrap 支持的分頁(yè)特性蛔钙。分頁(yè)（Pagination）替久，是一種無序列表葬燎，Bootstrap 像處理其他界面元素一樣處理分頁(yè)奥帘。

分頁(yè)（Pagination）

下表列出了 Bootstrap 提供的處理分頁(yè)的 class。

image.png

默認(rèn)的分頁(yè)
下面的實(shí)例演示了上表中所討論的 class .pagination 的用法：

<ul class="pagination">
    <li><a href="#">&laquo;</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">&raquo;</a></li>
</ul>

image.png

分頁(yè)的狀態(tài)
下面的實(shí)例演示了上表中所討論的 class .disabled舅桩、.active 的用法：

<ul class="pagination">
    <li><a href="#">&laquo;</a></li>
    <li class="active"><a href="#">1</a></li>
    <li class="disabled"><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">&raquo;</a></li>
</ul>

image.png

分頁(yè)的大小
下面的實(shí)例演示了上表中所討論的 class .pagination-* 的用法：

<ul class="pagination pagination-lg">
<li><a href="#">&laquo;</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">&raquo;</a></li>
</ul><br>
<ul class="pagination">
    <li><a href="#">&laquo;</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">&raquo;</a></li>
</ul><br>
<ul class="pagination pagination-sm">
    <li><a href="#">&laquo;</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">&raquo;</a></li>
</ul>

image.png

翻頁(yè)（Pager）

如果您想要?jiǎng)?chuàng)建一個(gè)簡(jiǎn)單的分頁(yè)鏈接為用戶提供導(dǎo)航酱虎，可通過翻頁(yè)來實(shí)現(xiàn)。與分頁(yè)鏈接一樣擂涛，翻頁(yè)也是無序列表读串。默認(rèn)情況下，鏈接是居中顯示撒妈。下表列出了 Bootstrap 處理翻頁(yè)的 class恢暖。

image.png

默認(rèn)的翻頁(yè)
下面的實(shí)例演示了上表中所討論的 class .pager 的用法：

<ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
</ul>

image.png

對(duì)齊的鏈接
下面的實(shí)例演示了上表中所討論的 class .previous、.next 的用法：

<ul class="pager">
    <li class="previous"><a href="#">&larr; Older</a></li>
    <li class="next"><a href="#">Newer &rarr;</a></li>
</ul>

image.png

分頁(yè)更多實(shí)例

<div class="container">
  <h2>分頁(yè)</h2>
  <p>.pager 類提供了一個(gè)簡(jiǎn)單的分頁(yè)樣式:</p>
  <ul class="pager">
    <li><a href="#">上一頁(yè)</a></li>
    <li><a href="#">下一頁(yè)</a></li>
  </ul>
</div>

image.png

<div class="container">
  <h2>分頁(yè)</h2>
  <p>.previous 和 .next 類設(shè)置左右對(duì)齊:</p>
  <ul class="pager">
    <li class="previous"><a href="#">上一頁(yè)</a></li>
    <li class="next"><a href="#">下一頁(yè)</a></li>
  </ul>
</div>

image.png

<div class="container">
  <h2>分頁(yè)</h2>
  <p>.disabled 設(shè)置分頁(yè)鏈接不可以:</p>
  <ul class="pager">
    <li class="previous disabled"><a href="#">上一頁(yè)</a></li>
    <li class="next"><a href="#">下一頁(yè)</a></li>
  </ul>
</div>

image.png

<div class="container">
  <h2>分頁(yè)</h2>
  <p> .pagination 類提供多個(gè)分頁(yè)導(dǎo)航鏈接:</p>
  <ul class="pagination">
    <li><a href="#">?</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li><a href="#">?</a></li>
  </ul>
</div>

image.png

<div class="container">
  <h2>分頁(yè)</h2>
  <p>大尺寸的分頁(yè) .pagination 類:</p>
  <ul class="pagination pagination-lg">
    <li><a href="#">?</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">?</a></li>
  </ul>

  <p>標(biāo)準(zhǔn)尺寸的分頁(yè) .pagination 類:</p>
  <ul class="pagination">
    <li><a href="#">?</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">?</a></li>
  </ul>

  <p>小尺寸的分頁(yè) .pagination 類:</p>
  <ul class="pagination pagination-sm">
    <li><a href="#">?</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">?</a></li>
  </ul>
</div>

image.png

<div class="container">
 <h2>分頁(yè)</h2>
  <p>.disabled 類指定不可訪問的分頁(yè)鏈接狰右， .active 類設(shè)置當(dāng)前訪問的頁(yè)面： </p>
  <ul class="pagination">
    <li><a href="#">?</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li class="disabled"><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li class="active"><a href="#">6</a></li>
    <li><a href="#">?</a></li>
  </ul>
</div>

image.png

Bootstrap 標(biāo)簽

本章將講解 Bootstrap 標(biāo)簽杰捂。標(biāo)簽可用于計(jì)數(shù)、提示或頁(yè)面上其他的標(biāo)記顯示棋蚌。使用 class .label 來顯示標(biāo)簽嫁佳，如下面的實(shí)例所示：

<h1>Example Heading <span class="label label-default">Label</span></h1>
<h2>Example Heading <span class="label label-default">Label</span></h2>
<h3>Example Heading <span class="label label-default">Label</span></h3>
<h4>Example Heading <span class="label label-default">Label</span></h4>

image.png

您可以使用修飾的 class label-default、label-primary谷暮、label-success蒿往、label-info、label-warning湿弦、label-danger 來改變標(biāo)簽的外觀瓤漏，如下面的實(shí)例所示：

<span class="label label-default">默認(rèn)標(biāo)簽</span>
<span class="label label-primary">主要標(biāo)簽</span>
<span class="label label-success">成功標(biāo)簽</span>
<span class="label label-info">信息標(biāo)簽</span>
<span class="label label-warning">警告標(biāo)簽</span>
<span class="label label-danger">危險(xiǎn)標(biāo)簽</span>

image.png

標(biāo)簽更多實(shí)例

類	描述	實(shí)例
.label label-default	默認(rèn)的灰色標(biāo)簽	嘗試一下
.label label-primary	"primary" 類型的藍(lán)色標(biāo)簽	嘗試一下
.label label-success	"success" 類型的綠色標(biāo)簽	嘗試一下
.label label-info	"info" 類型的淺藍(lán)色標(biāo)簽	嘗試一下
.label label-warning	"warning" 類型的黃色標(biāo)簽	嘗試一下
.label label-danger	"danger" 類型的紅色標(biāo)簽	嘗試一下

Bootstrap 徽章（Badges）

本章將講解 Bootstrap 徽章（Badges）〖瞻＃徽章與標(biāo)簽相似蔬充，主要的區(qū)別在于徽章的邊角更加圓滑。

徽章（Badges）主要用于突出顯示新的或未讀的項(xiàng)班利。如需使用徽章饥漫，只需要把 <span class="badge"> 添加到鏈接、Bootstrap 導(dǎo)航等這些元素上即可肥败。

下面的實(shí)例演示了這點(diǎn)：

<a href="#">Mailbox <span class="badge">50</span></a>

image.png

當(dāng)沒有新的或未讀的項(xiàng)時(shí)趾浅，通過 CSS 的 :empty 選擇器愕提，徽章會(huì)折疊起來，表示里邊沒有內(nèi)容皿哨。

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

image.png

激活導(dǎo)航狀態(tài)

您可以在激活狀態(tài)的膠囊式導(dǎo)航和列表導(dǎo)航中放置徽章浅侨。通過使用 <span class="badge"> 來激活鏈接，如下面的實(shí)例所示：

<h4>膠囊式導(dǎo)航中的激活狀態(tài)</h4>
<ul class="nav nav-pills">
    <li class="active">
        <a href="#">首頁(yè)
            <span class="badge">42</span>
        </a>
    </li>
    <li>
        <a href="#">簡(jiǎn)介</a>
    </li>
    <li>
        <a href="#">消息
            <span class="badge">3</span>
        </a>
    </li>
</ul>
<br>
<h4>列表導(dǎo)航中的激活狀態(tài)</h4>
<ul class="nav nav-pills nav-stacked" style="max-width: 260px;">
    <li class="active">
        <a href="#">
            <span class="badge pull-right">42</span>首頁(yè)</a>
        </li>
    <li>
        <a href="#">簡(jiǎn)介</a>
    </li>
    <li>
        <a href="#">
            <span class="badge pull-right">3</span>消息
        </a>
    </li>
</ul>

image.png

Bootstrap 超大屏幕（Jumbotron）

本章將講解 Bootstrap 支持的另一個(gè)特性证膨，超大屏幕（Jumbotron）如输。顧名思義該組件可以增加標(biāo)題的大小，并為登陸頁(yè)面內(nèi)容添加更多的外邊距（margin）央勒。使用超大屏幕（Jumbotron）的步驟如下：

創(chuàng)建一個(gè)帶有 class .jumbotron. 的容器 <div>不见。
除了更大的 <h1>，字體粗細(xì) font-weight 被減為 200崔步。
下面的實(shí)例演示了這點(diǎn)：

<div class="container">
   <div class="jumbotron">
        <h1>歡迎登陸頁(yè)面稳吮！</h1>
        <p>這是一個(gè)超大屏幕（Jumbotron）的實(shí)例。</p>
        <p><a class="btn btn-primary btn-lg" role="button">
        學(xué)習(xí)更多</a>
      </p>
   </div>
</div>

image.png

為了獲得占用全部寬度且不帶圓角的超大屏幕井濒，請(qǐng)?jiān)谒械?.container class 外使用 .jumbotron class灶似，如下面的實(shí)例所示：

<div class="jumbotron">
    <div class="container">
        <h1>歡迎登陸頁(yè)面！</h1>
        <p>這是一個(gè)超大屏幕（Jumbotron）的實(shí)例瑞你。</p>
        <p><a class="btn btn-primary btn-lg" role="button">
         學(xué)習(xí)更多</a>
        </p>
    </div>
</div>

image.png

Bootstrap 頁(yè)面標(biāo)題（Page Header）

頁(yè)面標(biāo)題（Page Header）是個(gè)不錯(cuò)的功能酪惭，它會(huì)在網(wǎng)頁(yè)標(biāo)題四周添加適當(dāng)?shù)拈g距。當(dāng)一個(gè)網(wǎng)頁(yè)中有多個(gè)標(biāo)題且每個(gè)標(biāo)題之間需要添加一定的間距時(shí)者甲，頁(yè)面標(biāo)題這個(gè)功能就顯得特別有用春感。如需使用頁(yè)面標(biāo)題（Page Header），請(qǐng)把您的標(biāo)題放置在帶有 class .page-header 的 <div> 中：

<div class="page-header">
    <h1>頁(yè)面標(biāo)題實(shí)例
        <small>子標(biāo)題</small>
    </h1>
</div>
<p>這是一個(gè)示例文本虏缸。這是一個(gè)示例文本鲫懒。這是一個(gè)示例文本。這是一個(gè)示例文本刽辙。這是一個(gè)示例文本刀疙。</p>

image.png

Bootstrap 縮略圖

本章將講解 Bootstrap 縮略圖。大多數(shù)站點(diǎn)都需要在網(wǎng)格中布局圖像扫倡、視頻、文本等竟纳。Bootstrap 通過縮略圖為此提供了一種簡(jiǎn)便的方式撵溃。使用 Bootstrap 創(chuàng)建縮略圖的步驟如下：

在圖像周圍添加帶有 class .thumbnail 的 <a> 標(biāo)簽。
這會(huì)添加四個(gè)像素的內(nèi)邊距（padding）和一個(gè)灰色的邊框锥累。
當(dāng)鼠標(biāo)懸停在圖像上時(shí)缘挑，會(huì)動(dòng)畫顯示出圖像的輪廓。
下面的實(shí)例演示了默認(rèn)的縮略圖：

<div class="row">
    <div class="col-sm-6 col-md-3">
        <a href="#" class="thumbnail">
            <img src="/wp-content/uploads/2014/06/kittens.jpg"
                 alt="通用的占位符縮略圖">
        </a>
    </div>
    <div class="col-sm-6 col-md-3">
        <a href="#" class="thumbnail">
            <img src="/wp-content/uploads/2014/06/kittens.jpg"
                 alt="通用的占位符縮略圖">
        </a>
    </div>
    <div class="col-sm-6 col-md-3">
        <a href="#" class="thumbnail">
            <img src="/wp-content/uploads/2014/06/kittens.jpg"
                 alt="通用的占位符縮略圖">
        </a>
    </div>
    <div class="col-sm-6 col-md-3">
        <a href="#" class="thumbnail">
            <img src="/wp-content/uploads/2014/06/kittens.jpg"
                 alt="通用的占位符縮略圖">
        </a>
    </div>
</div>

image.png

添加自定義的內(nèi)容
現(xiàn)在我們有了一個(gè)基本的縮略圖桶略，我們可以向縮略圖添加各種 HTML 內(nèi)容语淘，比如標(biāo)題诲宇、段落或按鈕。具體步驟如下：

把帶有 class .thumbnail 的 <a> 標(biāo)簽改為 <div>惶翻。
在該 <div> 內(nèi)姑蓝，您可以添加任何您想要添加的東西。由于這是一個(gè) <div>吕粗，我們可以使用默認(rèn)的基于 span 的命名規(guī)則來調(diào)整大小纺荧。
如果您想要給多個(gè)圖像進(jìn)行分組，請(qǐng)把它們放置在一個(gè)無序列表中颅筋，且每個(gè)列表項(xiàng)向左浮動(dòng)宙暇。
下面的實(shí)例演示了這點(diǎn)：

<div class="row">
    <div class="col-sm-6 col-md-3">
         <div class="thumbnail">
            <img src="/wp-content/uploads/2014/06/kittens.jpg" 
             alt="通用的占位符縮略圖">
            <div class="caption">
                <h3>縮略圖標(biāo)簽</h3>
                <p>一些示例文本。一些示例文本议泵。</p>
                <p>
                    <a href="#" class="btn btn-primary" role="button">
                        按鈕
                    </a> 
                    <a href="#" class="btn btn-default" role="button">
                        按鈕
                    </a>
                </p>
            </div>
         </div>
    </div>
    <div class="col-sm-6 col-md-3">
        <div class="thumbnail">
            <img src="/wp-content/uploads/2014/06/kittens.jpg" 
            alt="通用的占位符縮略圖">
            <div class="caption">
                <h3>縮略圖標(biāo)簽</h3>
                <p>一些示例文本占贫。一些示例文本。</p>
                <p>
                    <a href="#" class="btn btn-primary" role="button">
                        按鈕
                    </a> 
                    <a href="#" class="btn btn-default" role="button">
                        按鈕
                    </a>
                </p>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-md-3">
        <div class="thumbnail">
            <img src="/wp-content/uploads/2014/06/kittens.jpg" 
            alt="通用的占位符縮略圖">
            <div class="caption">
                <h3>縮略圖標(biāo)簽</h3>
                <p>一些示例文本先口。一些示例文本型奥。</p>
                <p>
                    <a href="#" class="btn btn-primary" role="button">
                        按鈕
                    </a> 
                    <a href="#" class="btn btn-default" role="button">
                        按鈕
                    </a>
                </p>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-md-3">
        <div class="thumbnail">
            <img src="/wp-content/uploads/2014/06/kittens.jpg" 
            alt="通用的占位符縮略圖">
            <div class="caption">
                <h3>縮略圖標(biāo)簽</h3>
                <p>一些示例文本。一些示例文本池充。</p>
                <p>
                    <a href="#" class="btn btn-primary" role="button">
                        按鈕
                    </a> 
                    <a href="#" class="btn btn-default" role="button">
                        按鈕
                    </a>
                </p>
            </div>
        </div>
    </div>
</div>

image.png

Bootstrap 警告（Alerts）

本章將講解警告（Alerts）以及 Bootstrap 所提供的用于警告的 class桩引。警告（Alerts）向用戶提供了一種定義消息樣式的方式。它們?yōu)榈湫偷挠脩舨僮魈峁┝松舷挛男畔⒎答仭?/p>

您可以為警告框添加一個(gè)可選的關(guān)閉按鈕收夸。為了創(chuàng)建一個(gè)內(nèi)聯(lián)的可取消的警告框坑匠，請(qǐng)使用警告（Alerts） jQuery 插件。

您可以通過創(chuàng)建一個(gè) <div>卧惜，并向其添加一個(gè) .alert class 和四個(gè)上下文 class（即** .alert-success厘灼、.alert-info、.alert-warning咽瓷、.alert-danger**）之一设凹，來添加一個(gè)基本的警告框。下面的實(shí)例演示了這點(diǎn)：

<div class="alert alert-success">成功茅姜！很好地完成了提交闪朱。</div>
<div class="alert alert-info">信息！請(qǐng)注意這個(gè)信息钻洒。</div>
<div class="alert alert-warning">警告奋姿！請(qǐng)不要提交。</div>
<div class="alert alert-danger">錯(cuò)誤素标！請(qǐng)進(jìn)行一些更改馒索。</div>

image.png

可取消的警告（Dismissal Alerts）

創(chuàng)建一個(gè)可取消的警告（Dismissal Alert）步驟如下：

通過創(chuàng)建一個(gè) <div>膀懈，并向其添加一個(gè) .alert class 和四個(gè)上下文 class（即 .alert-success虫碉、.alert-info、.alert-warning癣诱、.alert-danger）之一，來添加一個(gè)基本的警告框袜香。
同時(shí)向上面的 <div> class 添加可選的 .alert-dismissable撕予。
添加一個(gè)關(guān)閉按鈕。
下面的實(shí)例演示了這點(diǎn)：

<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>
            信息！請(qǐng)注意這個(gè)信息疾就。
        </div>
        <div class="alert alert-warning alert-dismissable">
            <button type="button" class="close" data-dismiss="alert"
                    aria-hidden="true">
                &times;
            </button>
            警告澜术！請(qǐng)不要提交。
        </div>
        <div class="alert alert-danger alert-dismissable">
            <button type="button" class="close" data-dismiss="alert"
                    aria-hidden="true">
                &times;
            </button>
            錯(cuò)誤猬腰！請(qǐng)進(jìn)行一些更改鸟废。
        </div>

請(qǐng)確保使用帶有 data-dismiss="alert" data 屬性的 <button> 元素。

image.png

警告（Alerts）中的鏈接

在警告（Alerts）中創(chuàng)建鏈接的步驟如下：

通過創(chuàng)建一個(gè) <div>姑荷，并向其添加一個(gè) .alert class 和四個(gè)上下文 class（即 .alert-success盒延、.alert-info、.alert-warning鼠冕、.alert-danger）之一添寺，來添加一個(gè)基本的警告框。
使用 .alert-link 實(shí)體類來快速提供帶有匹配顏色的鏈接懈费。

<div class="alert alert-success">
    <a href="#" class="alert-link">成功计露！很好地完成了提交。</a>
</div>
<div class="alert alert-info">
    <a href="#" class="alert-link">信息憎乙！請(qǐng)注意這個(gè)信息票罐。</a>
</div>
<div class="alert alert-warning">
    <a href="#" class="alert-link">警告！請(qǐng)不要提交泞边。</a>
</div>
<div class="alert alert-danger">
    <a href="#" class="alert-link">錯(cuò)誤该押！請(qǐng)進(jìn)行一些更改。</a>
</div>

image.png

Bootstrap 進(jìn)度條

本章將講解 Bootstrap 進(jìn)度條阵谚。在本教程中蚕礼，您將看到如何使用 Bootstrap 創(chuàng)建加載、重定向或動(dòng)作狀態(tài)的進(jìn)度條梢什。
Bootstrap 進(jìn)度條使用 CSS3 過渡和動(dòng)畫來獲得該效果闻牡。Internet Explorer 9 及之前的版本和舊版的 Firefox 不支持該特性，Opera 12 不支持動(dòng)畫绳矩。

默認(rèn)的進(jìn)度條

創(chuàng)建一個(gè)基本的進(jìn)度條的步驟如下：

添加一個(gè)帶有 class .progress 的 <div>。
接著玖翅，在上面的 <div> 內(nèi)翼馆，添加一個(gè)帶有 class .progress-bar 的空的 <div>割以。
添加一個(gè)帶有百分比表示的寬度的 style 屬性，例如 style="width: 60%"; 表示進(jìn)度條在 60% 的位置应媚。
讓我們看看下面的實(shí)例：

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

image.png

交替的進(jìn)度條

創(chuàng)建不同樣式的進(jìn)度條的步驟如下：

添加一個(gè)帶有 class .progress 的 <div>严沥。
接著，在上面的 <div> 內(nèi)中姜，添加一個(gè)帶有 class .progress-bar 和 class progress-bar-* 的空的 <div>消玄。其中，* 可以是 success丢胚、info翩瓜、warning、danger携龟。
添加一個(gè)帶有百分比表示的寬度的 style 屬性兔跌，例如 style="60%"; 表示進(jìn)度條在 60% 的位置。
讓我們看看下面的實(shí)例：

<div class="progress">
    <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">
    <div class="progress-bar progress-bar-info" role="progressbar"
         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
         style="width: 30%;">
        <span class="sr-only">30% 完成（信息）</span>
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning" role="progressbar"
         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
         style="width: 20%;">
        <span class="sr-only">20% 完成（警告）</span>
    </div>
</div>
<div class="progress">
    <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% 完成（危險(xiǎn)）</span>
    </div>
</div>

image.png

條紋的進(jìn)度條

創(chuàng)建一個(gè)條紋的進(jìn)度條的步驟如下：

添加一個(gè)帶有 class .progress 和 .progress-striped 的 <div>峡蟋。
接著坟桅，在上面的 <div> 內(nèi)，添加一個(gè)帶有 class .progress-bar 和 class progress-bar-* 的空的 <div>蕊蝗。其中仅乓，* 可以是 success、info蓬戚、warning夸楣、danger。
添加一個(gè)帶有百分比表示的寬度的 style 屬性碌更，例如 style="60%"; 表示進(jìn)度條在 60% 的位置裕偿。
讓我們看看下面的實(shí)例：

<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-info" role="progressbar"
         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
         style="width: 30%;">
        <span class="sr-only">30% 完成（信息）</span>
    </div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-warning" role="progressbar"
         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
         style="width: 20%;">
        <span class="sr-only">20% 完成（警告）</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% 完成（危險(xiǎn)）</span>
    </div>
</div>

image.png

動(dòng)畫的進(jìn)度條

創(chuàng)建一個(gè)動(dòng)畫的進(jìn)度條的步驟如下：

添加一個(gè)帶有 class .progress 和 .progress-striped 的 <div>。同時(shí)添加 class .active痛单。
接著嘿棘，在上面的 <div> 內(nèi)，添加一個(gè)帶有 class .progress-bar 的空的 <div>旭绒。
添加一個(gè)帶有百分比表示的寬度的 style 屬性鸟妙，例如 style="60%"; 表示進(jìn)度條在 60% 的位置。
這將會(huì)使條紋具有從右向左的運(yùn)動(dòng)感挥吵。

讓我們看看下面的實(shí)例：

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

image.png

堆疊的進(jìn)度條

您甚至可以堆疊多個(gè)進(jìn)度條重父。把多個(gè)進(jìn)度條放在相同的 .progress 中即可實(shí)現(xiàn)堆疊，如下面的實(shí)例所示：

<div class="progress">
    <div class="progress-bar progress-bar-success" role="progressbar"
         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
         style="width: 40%;">
        <span class="sr-only">40% 完成</span>
    </div>
    <div class="progress-bar progress-bar-info" role="progressbar"
         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
         style="width: 30%;">
        <span class="sr-only">30% 完成（信息）</span>
    </div>
    <div class="progress-bar progress-bar-warning" role="progressbar"
         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
         style="width: 20%;">
        <span class="sr-only">20% 完成（警告）</span>
    </div>
</div>

image.png

Bootstrap 多媒體對(duì)象（Media Object）

本章我們將講解 Bootstrap 中的多媒體對(duì)象（Media Object）忽匈，如：圖像房午、視頻、音頻等丹允。多媒體對(duì)象的樣式可用于創(chuàng)建各種類型的組件（比如：博客評(píng)論）郭厌，我們可以在組件中使用圖文混排袋倔，圖像可以左對(duì)齊或者右對(duì)齊。媒體對(duì)象可以用更少的代碼來實(shí)現(xiàn)媒體對(duì)象與文字的混排折柠。

接下來我們先來看哥實(shí)例：

<!-- 左對(duì)齊 -->
<div class="media">
  <div class="media-left">
    <img src="img_avatar1.png" class="media-object" style="width:60px">
  </div>
  <div class="media-body">
    <h4 class="media-heading">RUNOOB</h4>
    <p>這是一些示例文本...</p>
  </div>
</div>
 
<!-- 右對(duì)齊 -->
<div class="media">
  <div class="media-body">
    <h4 class="media-heading">RUNOOB</h4>
    <p>這是一些示例文本...</p>
  </div>
  <div class="media-right">
    <img src="img_avatar1.png" class="media-object" style="width:60px">
  </div>
</div>

image.png

實(shí)例解析
在 <div> 元素上添加 .media 類來創(chuàng)建一個(gè)多媒體對(duì)象宾娜。

使用 .media-left 類讓多媒體對(duì)象(圖片)來實(shí)現(xiàn)左對(duì)齊，同樣 .media-right 類實(shí)現(xiàn)了右對(duì)齊扇售。

文本內(nèi)容放在 class="media-body" 的 div 中前塔，圖片左對(duì)齊則放在 class="media-body" 之前，圖片右對(duì)齊則放在 class="media-body" 之后承冰。

此外华弓，你還可以使用 .media-heading 類來設(shè)置標(biāo)題。

讓我們來看看下面這個(gè)有關(guān)媒體對(duì)象列表 .media-list 的實(shí)例：

頂部巷懈、底部该抒、居中對(duì)齊

<!-- 置頂 -->
<div class="media">
  <div class="media-left media-top">
    <img src="img_avatar1.png" class="media-object" style="width:60px">
  </div>
  <div class="media-body">
    <h4 class="media-heading">置頂</h4>
    <p>這是一些示例文本...</p>
  </div>
</div>
 
<!-- 居中對(duì)齊 -->
<div class="media">
  <div class="media-left media-middle">
    <img src="img_avatar1.png" class="media-object" style="width:60px">
  </div>
  <div class="media-body">
    <h4 class="media-heading">居中</h4>
    <p>這是一些示例文本...</p>
  </div>
</div>
 
<!-- 置底 -->
<div class="media">
  <div class="media-left media-bottom">
    <img src="img_avatar1.png" class="media-object" style="width:60px">
  </div>
  <div class="media-body">
    <h4 class="media-heading">置底</h4>
    <p>這是一些示例文本...</p>
  </div>
</div>

image.png

內(nèi)嵌多媒體對(duì)象

一個(gè)多媒體對(duì)象內(nèi)還可以包含多個(gè)多媒體對(duì)象：

<div class="media">
  <div class="media-left">
    <img src="https://static.runoob.com/images/mix/img_avatar.png" class="media-object" style="width:45px">
  </div>
  <div class="media-body">
    <h4 class="media-heading">RUNOOB-1 <small><i>Posted on February 19, 2016</i></small></h4>
    <p>這是一些示例文本。這是一些示例文本顶燕。這是一些示例文本凑保。這是一些示例文本。這是一些示例文本涌攻。這是一些示例文本欧引。這是一些示例文本。這是一些示例文本恳谎。</p>
    
    <!-- 內(nèi)嵌多媒體對(duì)象 -->
    <div class="media">
      <div class="media-left">
        <img src="https://static.runoob.com/images/mix/img_avatar.png" class="media-object" style="width:45px">
      </div>
      <div class="media-body">
        <h4 class="media-heading">RUNOOB-2 <small><i>Posted on February 19, 2016</i></small></h4>
        <p>這是一些示例文本芝此。這是一些示例文本。這是一些示例文本因痛。這是一些示例文本婚苹。這是一些示例文本。這是一些示例文本鸵膏。這是一些示例文本膊升。這是一些示例文本。</p>
 
        <!-- 內(nèi)嵌多媒體對(duì)象 -->
        <div class="media">
          <div class="media-left">
            <img src="https://static.runoob.com/images/mix/img_avatar.png" class="media-object" style="width:45px">
          </div>
          <div class="media-body">
            <h4 class="media-heading">RUNOOB-3 <small><i>Posted on February 19, 2016</i></small></h4>
            <p>這是一些示例文本谭企。這是一些示例文本廓译。這是一些示例文本。這是一些示例文本债查。這是一些示例文本非区。這是一些示例文本。這是一些示例文本盹廷。這是一些示例文本征绸。</p>
          </div>
        </div>
        
      </div>
    </div>
    
  </div>
</div>

image.png

<div class="media">
  <div class="media-left">
    <img src="https://static.runoob.com/images/mix/img_avatar.png" class="media-object" style="width:45px">
  </div>
  <div class="media-body">
    <h4 class="media-heading">RUNOOB-1 <small><i>Posted on February 19, 2016</i></small></h4>
    <p>這是一些示例文本。這是一些示例文本。這是一些示例文本歹垫。這是一些示例文本剥汤。這是一些示例文本。這是一些示例文本排惨。這是一些示例文本。這是一些示例文本碰凶。</p>
    
    <!-- 內(nèi)嵌多媒體對(duì)象 -->
    <div class="media">
      <div class="media-left">
        <img src="https://static.runoob.com/images/mix/img_avatar.png" class="media-object" style="width:45px">
      </div>
      <div class="media-body">
        <h4 class="media-heading">RUNOOB-2 <small><i>Posted on February 20, 2016</i></small></h4>
        <p>這是一些示例文本暮芭。這是一些示例文本。這是一些示例文本欲低。這是一些示例文本辕宏。這是一些示例文本。這是一些示例文本砾莱。這是一些示例文本瑞筐。這是一些示例文本。</p>
 
        <!-- 內(nèi)嵌多媒體對(duì)象 -->
        <div class="media">
          <div class="media-left">
            <img src="https://static.runoob.com/images/mix/img_avatar.png" class="media-object" style="width:45px">
          </div>
          <div class="media-body">
            <h4 class="media-heading">RUNOOB-3 <small><i>Posted on February 21, 2016</i></small></h4>
            <p>這是一些示例文本腊瑟。這是一些示例文本聚假。這是一些示例文本。這是一些示例文本闰非。這是一些示例文本膘格。這是一些示例文本。這是一些示例文本财松。這是一些示例文本瘪贱。</p>
          </div>
        </div>
        
      </div>
      
      <!-- 內(nèi)嵌多媒體對(duì)象 -->
      <div class="media">
        <div class="media-left">
          <img src="https://static.runoob.com/images/mix/img_avatar.png" class="media-object" style="width:45px">
        </div>
        <div class="media-body">
          <h4 class="media-heading">RUNOOB-4 <small><i>Posted on February 20, 2016</i></small></h4>
          <p>這是一些示例文本。這是一些示例文本辆毡。這是一些示例文本菜秦。這是一些示例文本。這是一些示例文本舶掖。這是一些示例文本球昨。這是一些示例文本。這是一些示例文本访锻。</p>
        </div>
      </div>
      
    </div>
  </div>
  
  <!-- 內(nèi)嵌多媒體對(duì)象 -->    
  <div class="media">
    <div class="media-left">
      <img src="https://static.runoob.com/images/mix/img_avatar.png" class="media-object" style="width:45px">
    </div>
    <div class="media-body">
      <h4 class="media-heading">RUNOOB-5 <small><i>Posted on February 19, 2016</i></small></h4>
      <p>這是一些示例文本河哑。這是一些示例文本佳吞。這是一些示例文本。這是一些示例文本。這是一些示例文本。這是一些示例文本镊叁。這是一些示例文本蛔添。這是一些示例文本凶硅。</p>
    </div>
  </div>
</div>

image.png

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市进苍，隨后出現(xiàn)的幾起案子杠人，更是在濱河造成了極大的恐慌，老刑警劉巖绅你，帶你破解...
沈念sama閱讀 219,188評(píng)論 6贊 508
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件张咳，死亡現(xiàn)場(chǎng)離奇詭異龙助，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)蝗蛙，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,464評(píng)論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門捡硅，熙熙樓的掌柜王于貴愁眉苦臉地迎上來哮内，“玉大人，你說我怎么就攤上這事壮韭”狈ⅲ” “怎么了？”我有些...
開封第一講書人閱讀 165,562評(píng)論 0贊 356
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵喷屋，是天一觀的道長(zhǎng)琳拨。經(jīng)常有香客問我，道長(zhǎng)屯曹，這世上最難降的妖魔是什么狱庇？我笑而不...
開封第一講書人閱讀 58,893評(píng)論 1贊 295
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮恶耽，結(jié)果婚禮上密任，老公的妹妹穿的比我還像新娘。我一直安慰自己偷俭，他們只是感情好浪讳，可當(dāng)我...
茶點(diǎn)故事閱讀 67,917評(píng)論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著涌萤，像睡著了一般淹遵。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上形葬，一...
開封第一講書人閱讀 51,708評(píng)論 1贊 305
城市分裂傳說
那天合呐，我揣著相機(jī)與錄音，去河邊找鬼笙以。笑死淌实，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的猖腕。我是一名探鬼主播拆祈，決...
沈念sama閱讀 40,430評(píng)論 3贊 420
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長(zhǎng)吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼倘感！你這毒婦竟也來了放坏？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 39,342評(píng)論 0贊 276
萬榮殺人案實(shí)錄
序言：老撾萬榮一對(duì)情侶失蹤老玛，失蹤者是張志新（化名）和其女友劉穎淤年，沒想到半個(gè)月后钧敞，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 45,801評(píng)論 1贊 317
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡麸粮，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,976評(píng)論 3贊 337
?白月光啟示錄
正文我和宋清朗相戀三年溉苛，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片弄诲。...
茶點(diǎn)故事閱讀 40,115評(píng)論 1贊 351
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡愚战，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出齐遵，到底是詐尸還是另有隱情寂玲，我是刑警寧澤，帶...
沈念sama閱讀 35,804評(píng)論 5贊 346
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布梗摇，位于F島的核電站拓哟，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏伶授。R本人自食惡果不足惜彰檬，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,458評(píng)論 3贊 331
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望谎砾。院中可真熱鬧，春花似錦捧颅、人聲如沸景图。這莊子的主人今日做“春日...
開封第一講書人閱讀 32,008評(píng)論 0贊 22
一樁弒父案碉哑，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽挚币。三九已至，卻和暖如春扣典，著一層夾襖步出監(jiān)牢的瞬間妆毕，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 33,135評(píng)論 1贊 272
情欲美人皮
我被黑心中介騙來泰國(guó)打工贮尖，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留笛粘，地道東北人。一個(gè)月前我還...
沈念sama閱讀 48,365評(píng)論 3贊 373
代替公主和親
正文我出身青樓湿硝，卻偏偏與公主長(zhǎng)得像薪前，于是被迫代替她去往敵國(guó)和親。傳聞我的和親對(duì)象是個(gè)殘疾皇子关斜，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 45,055評(píng)論 2贊 355

2018-10-09Bootstrap05

Bootstrap 分頁(yè)

分頁(yè)（Pagination）

翻頁(yè)（Pager）

分頁(yè)更多實(shí)例

Bootstrap 標(biāo)簽

標(biāo)簽更多實(shí)例

Bootstrap 徽章（Badges）

激活導(dǎo)航狀態(tài)

Bootstrap 超大屏幕（Jumbotron）

Bootstrap 頁(yè)面標(biāo)題（Page Header）

Bootstrap 縮略圖

Bootstrap 警告（Alerts）

可取消的警告（Dismissal Alerts）

警告（Alerts）中的鏈接

Bootstrap 進(jìn)度條

默認(rèn)的進(jìn)度條

交替的進(jìn)度條

條紋的進(jìn)度條

動(dòng)畫的進(jìn)度條

堆疊的進(jìn)度條

Bootstrap 多媒體對(duì)象（Media Object）

頂部巷懈、底部该抒、居中對(duì)齊

內(nèi)嵌多媒體對(duì)象

推薦閱讀更多精彩內(nèi)容