bootstrap-16

進度條----基本樣式：

　　Bootstrap框架中對於進度條提供了一個基本的樣式，一個100%寬度的背景色，而後高亮顏色表示完成進度。其實製做這樣的進度條很是容易，通常是使用兩個容器，外容器具備必定的寬度，而且設置一個背景顏色，他的子元素設置一個寬度。

　　使用方法：

　　　　Bootstrap框架中也是按照這樣的方式實現的。它提供了兩個容器，外容器使用"progress"樣式，子容器使用"progress-bar"樣式。其中progress用來設置進度條的容器樣式，而progress-bar用來限制進度條的進度。

<div class="progress">
       <div class="progress-bar" style="width:40%"></div>
</div>

　　結構優化：雖然這樣實現了基本進度條效果，可是對於殘障人員瀏覽網頁有點困難，因此咱們能夠將結構作的好些

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

　　1.role屬性做用：告訴搜索引擎這個div的做用是進度條；

　　2.aria-valuenow="40"屬性做用：進度條的進度是40%；

　　3.aria-valuemin="0"屬性做用：進度條的最小值是0%；

　　4.aria-valuemax="100"屬性做用：進度條的最大值是100%；

 

進度條----彩色進度條：

　　progress-bar-info:表示信息進度條，進度條顏色爲藍色；

　　progress-bar-success:表示成功進度條，進度條顏色爲綠色；

　　progress-bar-warning:表示警告進度條，進度條顏色爲黃色；

　　progress-bar-danger:表示錯誤進度條，進度條顏色爲紅色；

<div class="progress">
    <div class="progress-bar progress-bar-success" style="width:40%"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-info" style="width:60%"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning" style="width:80%"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger" style="width:50%"></div>
</div>

　　

條紋進度條----條紋進度條：

　　在Bootstrap框架中除了提供了彩色進度條以外，還提供了一種條紋進度條，這種條紋進度條採用css3的線性漸變來實現，並未藉助任何圖片，使用Bootstrap框架中的條紋進度條只須要在進度條的容器「progress」基礎上添加類名「progress-striped」,固然，若是你要讓你的進度條條紋像彩色進度同樣，具備彩色效果，你只須要在進度條上添加相應的顏色類名：

<div class="progress progress-striped">
    <div class="progress-bar progress-bar-success" style="width:40%"></div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-info" style="width:60%"></div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-warning" style="width:80%"></div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-danger" style="width:50%"></div>
</div>

　　

進度條----動態條紋進度條：

　　使用方法：「progress progress-striped」兩個類的基礎上再加入「active」類名。以下代碼：

<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-success" style="width:40%"></div>
</div>

　　注意：要讓條紋進度條動起來，就須要讓"progress-stripes"和"active"同時運用，否則條紋進度條是不具有動效效果。

 

進度條----層疊進度條：

　　將不一樣狀態的進度條放置在一塊兒，按水平方式排列：

<div class="progress">
    <div class="progress-bar progress-bar-success" style="width:20%"></div>
    <div class="progress-bar progress-bar-info" style="width:10%"></div>
    <div class="progress-bar progress-bar-warning" style="width:30%"></div>
    <div class="progress-bar progress-bar-danger" style="width:15%"></div>
</div>

　　

進度條----帶Label的進度條

　　有不少時候，須要在進度條中直接用相關的數值向用戶傳遞完成的進度條，在Bootstrap就爲你們考慮了這種使用場景。

<div class="progress">
    <div class="progress-bar progress-bar-success"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%">20%</div>
</div>

　　

媒體對象：

　　在web頁面或者移動頁面製做中，經常看見這樣的效果，左邊居左，內容居右排列。咱們經常把這樣的效果成爲媒體對象，能夠說他是一種抽象的樣式，能夠用來構建不一樣類型的組件。

 

媒體對象----默認的媒體對象：

　　媒體對象的容器：常使用"media"類名錶示，用來容納媒體對象的全部內容

　　媒體對象的對象：常使用"media-object"表示，就是媒體對象中的對象，經常是圖片

　　媒體對象的主體：常使用"media-body"表示，就是媒體對象中的主體內容，可使任何元素，經常是圖片側邊內容

　　媒體對象的標題：常使用"media-heading"表示，就是用來描述對象的一個標題，此部分可選

 

媒體對象----媒體對象的嵌套：

　　

<div class="media">
    <a class="pull-left" href="#">
        <img class="media-object" src="…" alt="...">
    </a>
    <div class="media-body">
        <h4 class="media-heading">Media Heading</h4>
        <div>…</div>
        <div class="media">
            <a class="pull-left" href="#">
                <img class="media-object" src="…" alt="...">
            </a>
            <div class="media-body">
                <h4 class="media-heading">Media Heading</h4>
                <div>…</div>
                <div class="media">
                    <a class="pull-left" href="#">
                        <img class="media-object" src="…" alt="...">
                    </a>
                    <div class="media-body">
                        <h4 class="media-heading">Media Heading</h4>
                        <div>...</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

　　

媒體對象----媒體對象列表：

　　Bootstrap框架中提供了一個列表展現的效果，在寫結構的時候可使用ul，而且在ul上添加類名「media-list」,而在li上使用「media」,

<ul class="media-list">
    <li class="media">
        <a class="pull-left" href="#">
            <img class="media-object" src=" " alt="...">
        </a>
        <div class="media-body">
            <h4 class="media-heading">Media Header</h4>
            <div>…</div>
        </div>
    </li>
    <li class="media">…</li>
    <li class="media">…</li>
</ul>

　　

列表組：列表組時Bootstrap框架中新增的一個組件，能夠製做列表清單、垂直導航效果，也能夠匹配其餘的組件製做出更漂亮的組件，因爲其在Bootstrap是一個獨立的組件，因此也對應有本身的獨立源碼。

 

列表組----基礎列表組：

　　基礎列表組，看上去就是去掉了列表符號的列表項，而且配上一些特定的樣式。在Bootstrap框架中的基礎列表組主要包括兩個部分：

　　list-group:列表組容器，經常使用的是ul元素，固然也能夠是ol或者div元素

　　list-group-item:列表項，經常使用的是li元素，固然也能夠是div元素；

<ul class="list-group">
    <li class="list-group-item">揭開CSS3的面紗</li>
    <li class="list-group-item">CSS3選擇器</li>
    <li class="list-group-item">CSS3邊框</li>
    <li class="list-group-item">CSS3背景</li>
    <li class="list-group-item">CSS3文本</li>
</ul>

　　

列表組----帶徽章的列表組：

　　帶徽章的列表組其實就是將Bootstrap框架中的徽章組件和基礎列表組結合在一塊兒的一個效果，具體作法很簡單，只須要在list-group-item中添加徽章組件badge

<ul class="list-group">
    <li class="list-group-item">
        <span class="badge">13</span>揭開CSS3的面
    </li>
    <li class="list-group-item">
        <span class="badge">456</span>CSS3選擇器
    </li>
    <li class="list-group-item">
        <span class="badge">892</span>CSS3邊框
    </li>
    <li class="list-group-item">
        <span class="badge">90</span>CSS3背景
    </li>
    <li class="list-group-item">
        <span class="badge">1290</span>CSS3文本
    </li>
</ul>

　　

列表組-----帶連接的列表組：

<ul class="list-group">
    <li class="list-group-item">
        <a href="##">揭開CSS3的面</a>
    </li>
    <li class="list-group-item">
        <a href="##">CSS3選擇器</a>
    </li>
    ...
</ul>

　　

列表組-----自定義列表組：

　　Bootstrap框架在連接列表組的基礎上新增了兩個樣式：

　　list-group-item-heading:用來定義列表項頭部樣式

　　list-group-item-text:用來定義列表項主要內容

　　

<div class="list-group">
    <a href="##" class="list-group-item">
        <h4 class="list-group-item-heading">圖解CSS3</h4>
        <p class="list-group-item-text">...</p>
    </a>
    <a href="##" class="list-group-item">
        <h4 class="list-group-item-heading">Sass中國</h4>
        <p class="list-group-item-text">...</p>
    </a>
</div>

　　

列表項----列表項的狀態設置：

　　Bootstrap框架也給組合列表項提供了狀態效果，特別是連接列表組。在列表組中只須要在對應的列表項中添加類名：

　　　　active  disabled

 

列表組----多彩列表組：

　　list-group-item-success:成功，背景色綠色

　　list-group-item-info:信息，背景色藍色

　　list-group-item-warning:警告，背景色爲黃色

　　list-group-item-danger:錯誤，背景色爲紅色

<div class="list-group">
    <a href="##" class="list-group-item active"><span class="badge">5902</span>圖解CSS3</a>
    <a href="##" class="list-group-item list-group-item-success"><span class="badge">15902</span>W3cplus</a>
    <a href="##" class="list-group-item list-group-item-info"><span class="badge">59020</span>慕課網</a>
    <a href="##" class="list-group-item list-group-item-warning"><span class="badge">0</span>Sass中國</a>
    <a href="##" class="list-group-item list-group-item-danger"><span class="badge">10</span>Mobile教程</a>
</div>

　　

面板：是Bootstrap框架新增的一個組件，其主要做用就是用來處理一些其餘組件沒法完成的功能。

　　基礎面板很是簡單，就是一個div容器運用了"panel"樣式，產生一個具備邊框的文本顯示塊，因爲panel不控制主題顏色，因此在panel的基礎上增長了一個控制顏色的主題"panel-default"，另外在裏面添加了一個"div.panel-body"來放置面板主體內容：

<div class="panel panel-default">
    <div class="panel-body">我是一個基礎面板，帶有默認主題樣式風格</div>
</div>

　　

面板----帶有頭和尾的面板：

　　Bootstrap爲了豐富面板的功能，特地爲面板增長面板頭部和頁面尾部的效果。

　　panel-heading:用來設置面板頭部樣式

　　panel-footer:用來設置面板尾部樣式

 

面板----彩色面板：

　　在Bootstrap框架面板組件除了默認的主題樣式以外，還包括如下幾種主題樣式，構成了一個彩色面板：

　　panel-primary:重點藍

　　panel-success:成功綠

　　panel-info:信息藍

　　panel-warning:警告黃

　　panel-danger:危險紅

<div class="panel panel-default">
    <div class="panel-heading">圖解CSS3</div>
    <div class="panel-body">…</div>
    <div class="panel-footer">做者：大漠</div>
</div>
<div class="panel panel-primary">…</div>
<div class="panel panel-success">…</div>
<div class="panel panel-info">…</div>
<div class="panel panel-warning">…</div>
<div class="panel panel-danger">…</div>

　　

面板----面板中嵌套表格

　　通常狀況下能夠把面板理解爲一個區域，在使用面板的時候，都會在panel-body放置須要的內容，多是圖片、表格或者列表等。來看看面板中嵌套表格和列表組的一個效果。

<div class="panel panel-default">
    <div class="panel-heading">圖解CSS3</div>
    <div class="panel-body">
    <p>詳細講解了選擇器、邊框、背景、文本、顏色、盒模型、伸縮佈局盒模型、多列布局、漸變、過渡、動畫、媒體、響應Web設計、Web字體等主題下涵蓋的全部CSS3新特性
    </p>
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>＃</th>
                <th>個人書</th>
                <th>發佈時間</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>《圖解CSS3》</td>
                <td>2014-07-10</td>
            </tr>
        </tbody>
    </table>
    </div>
    <div class="panel-footer">做者：大漠</div>
</div>

　　

面板----面板中嵌套列表組
　　

<div class="panel panel-default">
    <div class="panel-heading">圖解CSS3</div>
    <div class="panel-body">
        <p>詳細講解了選擇器、邊框、背景、文本、顏色、盒模型、伸縮佈局盒模型、多列布局、漸變、過渡、動畫、媒體、響應Web設計、Web字體等主題下涵蓋的全部CSS3新特性
        </p>
        <ul class="list-group">
            <li class="list-group-item">我是列表項</li>
            <li class="list-group-item">我是列表項</li>
            <li class="list-group-item">我是列表項</li>
        </ul>
    </div>
    <div class="panel-footer">做者：大漠</div>
</div>