前端學習之Bootstrap學習

時間 2019-11-18

原文原文鏈接

一，Bootstrap簡介

　　在前端世界，有個叫Bootstrap的傢伙，，是twitter 開源出來的一套前端框架，利用Ta能夠快速開發網站界面，它的特色就是比本身從頭寫簡單，直觀，方便，快捷，省勁。javascript

　　凡是使用過Bootstrap的開發者，都不在意作這麼兩件事情：複製and粘貼。哈哈~，是的使用Bootstrap很是簡單，可是在複製粘貼以前，須要先對Bootstrap的用法一一熟悉以後咱們纔開始幹活！css

　　Bootstrap，來自 Twitter，是目前最受歡迎的前端框架。Bootstrap是基於HTML，CSS，JavaScript的前端框架，它簡潔靈活，使得Web開發更加快捷。它由Twitter的設計師Mark Otto 和 Jacob Thornton 合做開發，是一個CSS / HTML 框架。Bootstrap提供了優雅的 HTML 和CSS規範，它是由動態的CSS語言Less寫成的。html

　　它用於開發響應式佈局、移動設備優先的 WEB 項目。前端

　　咱們去bootcdn （https://www.bootcdn.cn/ ）。會發現Bootstrap是星最多的前端框架之一。html5

二，經常使用Bootstrap組件連接

1，基礎CSS樣式

概要
預置排版樣式
- 統一預製標籤樣式

按鈕樣式
表格樣式
表單樣式
圖片樣式
輔助工具類
代碼樣式
柵格系統
- xs : 超小屏幕手機 (<768px)
- sm : 小屏幕平板 (≥768px)
- md : 中等屏幕桌面顯示器 (≥992px)
- lg : 大屏幕大桌面顯示器 (≥1200px)
響應式工具類
- hidden-xx : 在某種屏幕下隱藏
- visible-xx : 在某種屏幕尺寸下顯示

2，預置界面組件

3，JavaScript插件

JavaScript插件的依賴狀況

如何使用Javascript插件

4，內置組件

模態對話框
下拉菜單
滾動監聽
標籤頁
工具提示
彈出框
警告框
按鈕
摺疊面板
輪播圖
吸頂效果
- data-spy="affix"
- data-offset-top="什麼位置出現"
- data-offset-bottom="什麼位置消失"

深度自定義 Bootstrap

5，在線自定義

6，源碼編譯

LESS語言

三，響應式開發介紹

1，什麼是響應式？

　　利用媒體查詢，讓同一個網站兼容不一樣的終端（PC端，移動端）呈現不一樣的頁面佈局。java

2，爲何要寫自適應的頁面（響應式頁面）

　　衆所周知，電腦、平板、手機的屏幕是差距很大的，假如在電腦上寫好了一個頁面，在電腦上看起來不錯，可是若是放到手機上的話，那可能就會亂的一塌糊塗，這時候怎麼解決呢？之前，能夠再專門爲手機定製一個頁面，當用戶訪問的時候，判斷設備是手機仍是電腦，若是是手機就跳轉到相應的手機頁面，例如百度的就是，手機訪問www.baidu.com就會跳轉到m.baidu.com，這樣作簡直就是費力不討好的活，因此聰明的程序員開發了一種自適應寫法，即一次開發，到處顯示！這究竟是一個什麼樣的神器東西呢，接下來就揭曉它的神祕面紗。css3

3，用到的技術：CSS3 @media 查詢

3.1 CSS3@media查詢的定義

　　用於查詢設備是否符合某一特定條件，這些特定條件包括屏幕尺寸，是否可觸摸，屏幕精度，橫屏豎屏等信息。git

　　使用 @media 查詢，你能夠針對不一樣的屏幕大小定義不一樣的樣式。 @media 能夠針對不一樣的屏幕尺寸設置不一樣的樣式，特別是若是你須要設置設計響應式的頁面，@media 是很是有用的。當你重置瀏覽器大小的過程當中，頁面也會根據瀏覽器的寬度和高度從新渲染頁面，這對調試來講是一個極大的便利。程序員

3.2 經常使用屬性

device-width，device-height 屏幕寬，高
width，height 渲染窗口寬，高
orientation 設備方向
resolution 設備分辨率

3.3 CSS 語法：

@media mediaType and|not|only (media feature) {
     /*CSS-Code;*/
}

　　媒體類型（mediaType ）類型有不少，在這裏不一一列出來了，只列出了經常使用的幾個。web

all 用於全部設備 

print 用於打印機和打印預覽 

screen 用於電腦屏幕，平板電腦，智能手機等。（最經常使用） 

speech 應用於屏幕閱讀器等發聲設備

　　不一樣的媒體使用不一樣的stylesheet

<link rel="stylesheet" media="mediatype and|not|only (media feature)" 
href="mystylesheet.css">

3.4 值描述

　　max-width:定義輸出設備中的頁面最大可見區域寬度

　　min-width:定義輸出設備中的頁面最小可見區域寬度

3.5 viewport

　　手機瀏覽器是把頁面放在一個虛擬的「窗口」（viewport）中，一般這個虛擬的「窗口」（viewport）比屏幕寬，這樣就不用把每一個網頁擠到很小的窗口中（這樣會破壞沒有針對手機瀏覽器優化的網頁的佈局），用戶能夠經過平移和縮放來看網頁的不一樣部分。

　　設置viewport：一個經常使用的針對移動網頁優化過的頁面的 viewport meta標籤大體以下：

<meta name=」viewport」 content=」width=device-width, initial-scale=1,
 maximum-scale=1″>

width：控制 viewport 的大小，能夠指定的一個值，若是 600，或者特殊的值，如 device-width 爲設備的寬度（單位爲縮放爲 100% 時的 CSS 的像素）。
height：和 width 相對應，指定高度。
initial-scale：初始縮放比例，也便是當頁面第一次 load 的時候縮放比例。
maximum-scale：容許用戶縮放到的最大比例。
minimum-scale：容許用戶縮放到的最小比例。
user-scalable：用戶是否能夠手動縮放。

4，開始編寫響應式頁面

　　編寫以前呢，有幾個要準備的工做。

準備工做1：設置Meta標籤

　　首先咱們在使用 @media 的時候須要先設置下面這段代碼，來兼容移動設備的展現效果：

<meta name="viewport" content="width=device-width, initial-scale=1.0,
 user-scalable=no">

　　這段代碼的幾個參數解釋：

    width = device-width：寬度等於當前設備的寬度 

    initial-scale：初始的縮放比例（默認設置爲1.0，即表明不縮放）

    user-scalable：用戶是否能夠手動縮放（默認設置爲no，由於咱們不但願用戶放大
縮小頁面） 其餘還有不少參數呢，想要了解的童鞋能夠直接去百度

準備工做2：加載兼容文件JS

　　由於IE8既不支持HTML5也不支持CSS3 @media ，因此咱們須要加載兩個JS文件，來保證咱們的代碼實現兼容效果：

<!--[if lt IE 9]>
　　<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
　　<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

準備工做3：設置IE渲染方式默認爲最高(可選)

　　如今有不少人的IE瀏覽器都升級到IE9以上了，因此這個時候就有又不少詭異的事情發生了，例如如今是IE9的瀏覽器，可是瀏覽器的文檔模式倒是IE8 爲了防止這種狀況，咱們須要下面這段代碼來讓IE的文檔渲染模式永遠都是最新的

<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">

　　這段代碼後面加了一個chrome=1，若是用戶的電腦裏安裝了 chrome，就可讓電腦裏面的IE無論是哪一個版本的均可以使用Webkit引擎及V8引擎進行排版及運算，若是沒有安裝，就顯示IE最新的渲染模式。

5，代碼實例

一、若是文檔寬度小於等於 300px 則應用花括號內的樣式——修改body的背景顏色(background-color):

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

　　從上面的代碼能夠看出，媒體類型是屏幕（screen），使用一個 and 鏈接後面的媒體功能，這裏寫的是 max-width:300px ，也就是說，當屏幕的最大寬度小於等於 300px 的時候，就應用花括號裏面的樣式。

二、當文檔寬度大於等於300px 的時候顯示的樣式

@media screen and (min-width: 300px){
    body {
        background-color:lightblue;
    }
}

　　注意，這裏的媒體功能使用的是 min-width 而不是 max-width，我已經標紅高亮顯示出來了。

三、當文檔寬度大於等於 300px 而且小於等於500px （ width >=300 && width <=500）的時候顯示的樣式

@media screen and (min-width:300px) and (max-width:500px) {
    /* CSS 代碼 */
}

　　注意，這裏使用了兩個 and ，用來鏈接兩個媒體功能，一個用於限制最小，一個用於限制最大。

6，※ 須要注意的地方（劃重點）

一、經過靈活應用以上技巧，開發出一個響應式頁面，還不是近在咫尺的感受。

二、不要被 min-width 和 max-width 所迷惑，初學者很容易誤覺得 min-width 的意思是小於xxx的時候才應用，然而這就陷入誤區了，其實它的意思是：當設置了 min-width 的時候，文檔的寬度若是小於設置的值，就不會應用這個區塊裏的CSS樣式，因此 min-width 它才能實現大於等於設置的值得時候，纔會應用區塊裏的CSS樣式，max-width 也是如此。

三、或者這樣想一想，先看代碼，這句代碼的意思是寬度大於等於 300px ，小於等於 500px （ width >=300 && width <=500）的時候應用樣式

@media screen and (min-width:300px) and (max-width:500px) {
    /* CSS 代碼 */
}

　　min-width:300px 的做用是當文檔寬度不小於 300px 的時候就應用 {} 裏的CSS代碼塊，即大於等於 300px，max-width:500px 的做用是當文檔寬度不大於 500px 的時候就應用{} 裏的CSS代碼塊，即小於等於 500px 是否是這樣想就容易明白了些呢？

四、這裏有個彎很難繞過來，本身多動手作作實驗，多動腦想一想，就豁然開朗了。

四，全局CSS樣式的使用

　　Bootstrap 是簡潔，直觀，強悍的前端開發框架，讓web開發更迅速，簡單。深刻了解Bootstrap底層結構的關鍵部分，包括咱們讓web開發變得更好，更快，更強壯的最佳實踐。

1，Bootstrap的下載

　　在上文中：Django如何使用Bootstrap中已經學習過了，這裏再也不累贅。

　　Less 和 Sass 是更高級的css語言，瀏覽器不會識別這兩種語言，咱們須要專門的編輯器去識別。

2，Bootstrap是html5的文檔

　　Bootstrap 使用到的某些HTML元素和CSS屬性須要將頁面設置爲HTML5文檔類型。在項目中的每一個頁面都要參照下面的格式進行設置。

<!DOCTYPE html> <html lang="zh-CN"> ... </html>

3，Bootstrap支持移動設備優先

　　也就是說使用Bootstrap能夠在移動設備上運行。爲了確保適當的繪製和觸屏縮放，須要在<head>之中添加viewport元數據標籤

<meta name="viewport" content="width=device-width, initial-scale=1">

　　在移動設備瀏覽器上，經過爲視口（viewport）設置 meta 屬性爲 user-scalable=no 能夠禁用其縮放（zooming）功能。這樣禁用縮放功能後，用戶只能滾動屏幕，就能讓你的網站看上去更像原生應用的感受。注意，這種方式咱們並不推薦全部網站使用，仍是要看你本身的狀況而定！

<meta name="viewport" content="width=device-width, initial-scale=1, 
maximum-scale=1, user-scalable=no">

4，排版與連接

　　Bootstrap排版，連接樣式設置了基本的全局樣式。。分別是：

爲 body 元素設置 background-color: #fff;
使用 @font-family-base、@font-size-base 和 @line-height-base 變量做爲排版的基本參數
爲全部連接設置了基本顏色 @link-color ，而且當連接處於 :hover 狀態時才添加下劃線

　　這樣樣式都在 scaffolding.less 文件中找到對應的源碼。

5，Bootstrap重置樣式

　　爲了加強跨瀏覽器表現的一致性，咱們使用了 Normalize.css，這是由 Nicolas Gallagher 和 Jonathan Neal 維護的一個CSS 重置樣式庫。

6，佈局容器

　　Bootstrap 須要爲頁面內容和柵格系統包裹一個 .container 容器。咱們提供了兩個做此用處的類。注意，因爲 padding 等屬性的緣由，這兩種容器類不能互相嵌套。

　　.container 類用於固定寬度並支持響應式佈局的容器。

<div class="container">
  ...
</div>

　　.container-fluid 類用於 100% 寬度，佔據所有視口（viewport）的容器。

<div class="container-fluid">
  ...
</div>

五，柵格系統

1，柵格系統簡介

　　柵格系統的鼻祖是 https://960.gs/.　　咱們能夠看這個網站的部分樣式：

　　柵格系統用於經過一系列的行（row）與列（column）的組合來建立頁面佈局，內容就能夠放入這些建立好的佈局中，更好的實現設計的一致性。

　　在大屏幕中，柵格最多能夠擴大到12列。小屏幕中全部的列都會堆疊起來，因爲Bootstrap是移動優先，因此柵格實際上是在小屏設備中定義了尺寸，而之一中定義的柵格尺寸也是和中屏設備和大屏設備。

小尺寸手機屏幕：.col-xs- （分辨率<768px）
平板屏幕：- col-sm- （分辨率(≥768px)）
小尺寸桌面屏幕：-col-md- （分辨率(≥992px)x）
大尺寸屏幕：.col-lg- （分辨率(≥1200px)）
注：爲了讓網站頁面有更好的而可讀性，對列間距的寬度爲默認30px。即列與列之間的空白區域。

2，柵格系統的工做原理

　　下面就介紹一下 Bootstrap 柵格系統的工做原理：

3，柵格參數

　　使用單一的一組 .col-md-* 柵格類，就能夠建立一個基本的柵格系統，在手機和平板設備上一開始是堆疊在一塊兒的（超小屏幕到小屏幕這一範圍），在桌面（中等）屏幕設備上變爲水平排列。全部「列（column）必須放在」 .row 內。

　　PS:仍是那句話，使用Bootstrap很是簡單，根據項目的需求適當去官網複製粘貼，而後根據需求更改本身的內容，若是想修改本身的樣式，能夠添加類，按照以前我們學習css同樣的方式，給它相應的樣式

4，Bootstrap網格系統如何跨多個設備工做

5，響應式的列重置

　　如下實例包含了4個網格，但咱們在小設備瀏覽時沒法肯定網格顯示的位置。

　　爲了解決這個問題，可使用 .clearfix class 和響應式工具來解決。

　　實例：

<div class="container">
    <div class="row" >
        <div class="col-xs-6 col-sm-3" 
            style="background-color: #dedef8;
            box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
        <div class="col-xs-6 col-sm-3" 
        style="background-color: #dedef8;box-shadow: 
        inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim veniam, quis nostrud exercitation ullamco laboris 
            nisi ut aliquip ex ea commodo consequat.
            </p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut. 
            </p>
        </div>
 
        <div class="clearfix visible-xs"></div>
 
        <div class="col-xs-6 col-sm-3" 
        style="background-color: #dedef8;
        box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco 
            laboris nisi ut aliquip ex ea commodo consequat. 
            </p>
        </div>
        <div class="col-xs-6 col-sm-3" 
        style="background-color: #dedef8;box-shadow: 
        inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim 
            </p>
        </div>
    </div>
</div>

　　結果展現：

6，偏移列

　　偏移是一個用於更專業的佈局的有用功能。它們可用來給列騰出更多的空間。例如： .col-xs-* 類不支持偏移，可是它們能夠簡單的經過使用一個空的單元格來實現該效果。

　　爲了在大屏幕顯示器上使用偏移，請使用 .col-md-offset-* 類。這些類會把一個列的左外邊距（margin）增長 * 列，其中 * 範圍是從1 到11 。

　　例如： .col-md-offset-4 類將 .col-md-4 元素向右測偏移了四個列（column）的寬度。

　　在下面的實例中，咱們有 <div class='col=md-6'>...</div> ，咱們將使用 .col-md-offset-3 class 來居中這個 div。

<div class="container">
    <h1>Hello, world!</h1>
    <div class="row" >
        <div class="col-xs-6 col-md-offset-3" 
        style="background-color: #dedef8;box-shadow: 
        inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing 
            elit.
            </p>
        </div>
    </div>
</div>

　　結果展現：

7，嵌套列（不經常使用）

　　爲了在內容中嵌套默認的網格，請添加一個新的 .row，並在一個已有的 .col-md-* 列內添加一組 .col-md-* 列。被嵌套的行應包含一組列，這組列個數不能超過12（其實，沒有要求必須沾滿12列）。

　　在下面的實例中，佈局有兩個列，第二列被分爲兩行四個盒子。

<div class="container">
    <h1>Hello, world!</h1>
    <div class="row">
        <div class="col-md-3" style="box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <h4>第一列</h4>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            </p>
        </div>
        <div class="col-md-9" style="box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <h4>第二列 - 分爲四個盒子</h4>
            <div class="row">
                <div class="col-md-6" style=" box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    <p>
                        Consectetur art party Tonx culpa semiotics. Pinterest 
        assumenda minim organic quis.
                    </p>
                </div>
                <div class="col-md-6" style=" box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    <p>
                         sed do eiusmod tempor incididunt ut labore et dolore magna 
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
        ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    </p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6" style=" box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    <p>
                        quis nostrud exercitation ullamco laboris nisi ut 
        aliquip ex ea commodo consequat.
                    </p>
                </div>
                <div class="col-md-6" style=" box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
        sed do eiusmod tempor incididunt ut labore et dolore magna 
        aliqua. Ut enim ad minim.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

　　結果以下：

8，列排序

　　Bootstrap 網格系統另外一個完美的特性，就是你能夠很容易的以一種順序編寫列，而後以另外一種順序顯示列。

　　你能夠很輕易的改變帶有 .col-md-push-* 和 .col-md-pull-* 類的內置網格列的順序，其中 * 範圍是從1 到11.

　　在下面的實例中，咱們有兩列布局，左列很窄嗎，做爲側邊欄。咱們將使用 .col-md-push-* 和 .col-md-pull-* 類來互換這兩列的順序。

<div class="container">
    <h1>Hello, world!</h1>
    <div class="row">
        <p>
            排序前
        </p>
        <div class="col-md-4" style=" box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         我在左邊
        </div>
        <div class="col-md-8" style=" box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         我在右邊
        </div>
    </div>
    <br>
    <div class="row">
        <p>
            排序後
        </p>
        <div class="col-md-4 col-md-push-8" style=" box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         我在左邊
        </div>
        <div class="col-md-8 col-md-pull-4" style=" box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         我在右邊
        </div>
    </div>
</div>

　　結果以下：

六，Bootstrap全局樣式

　　排版，按鈕，表格，表單，圖片等咱們經常使用的HTML元素，Bootstrap中都提供了全局樣式。

　　咱們只要在基礎的HTMK元素上經過設置class就可以應用Bootstrap的樣式，從而使咱們的頁面更美觀和諧。

1，標題相關

　　a，標題

<h1>一級標題36px</h1>
<h2>二級標題30px</h2>
<h3>三級標題24px</h3>
<h4>四級標題18px</h4>
<h5>五級標題14px</h5>
<h6>六級標題12px</h6>

<!--除了使用h標籤，Bootstrap內置了相應的全局樣式-->
<!--內聯標籤應用標題樣式-->

<span class="h1">一級標題36px</span>
<span class="h2">二級標題30px</span>
<span class="h3">三級標題24px</span>
<span class="h4">四級標題18px</span>
<span class="h5">五級標題14px</span>
<span class="h6">六級標題12px</span>

　　b，副標題

<!--一級標題中嵌入小標題-->

<h1>一級標題<small>小標題</small></h1>

　　咱們能夠看看三種狀況下的一級標題：

　　c，中心內容

　　經過添加 .lead 類可讓段落突出顯示。

<div class="container">
    <h1>Bootstap learning</h1>
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>

<p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
</div>

　　效果以下：

2，文本相關

　　a，文本對齊

<!--文本對齊-->
<p class="text-left">文本左對齊</p>
<p class="text-center">文本居中</p>
<p class="text-right">文本右對齊</p>

　　效果以下：

　　b，文本大小寫

<!--大小寫-->
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

　　效果以下：

　　c，無用文本

　　對於沒用的文本使用 <s> 標籤。

<s>This line of text is meant to be treated as no longer accurate.</s>

　　效果以下：

3，略縮語

　　當鼠標懸停在縮寫和縮寫詞上時就會顯示完整內容，Bootstrap 實現了對 HTML 的 <abbr> 元素的加強樣式。縮略語元素帶有 title 屬性，外觀表現爲帶有較淺的虛線框，鼠標移至上面時會變成帶有「問號」的指針。如想看完整的內容可把鼠標懸停在縮略語上（對使用輔助技術的用戶也可見）, 但須要包含 title 屬性。

　　a，基本略縮語

<div class="container">
    <span>An abbreviation of the word attribute is</span>
<abbr title="attribute">attr</abbr>
</div>

　　效果以下：

　　b，首字母略縮語

　爲縮略語添加 .initialism 類，可讓 font-size 變得稍微小些。

<div class="container">
        <abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
        <span>is the best thing since sliced bread.</span>
</div>

　　效果以下：

4，表格

　　爲任意<table> 標籤添加 .table 類能夠爲其賦予基本的樣式 — 少許的內補（padding）和水平方向的分隔線。這種方式看起來不少餘！？可是咱們以爲，表格元素使用的很普遍，若是咱們爲其賦予默認樣式可能會影響例如日曆和日期選擇之類的插件，因此咱們選擇將此樣式獨立出來。

　　a，基本實例

<div class="container">
        <table class="table">
            <tr>
                <td>id</td>
                <td>name</td>
                <td>age</td>
            </tr>
            <tr>
                <td>1</td>
                <td>james</td>
                <td>34</td>
            </tr>
            <tr>
                <td>2</td>
                <td>durant</td>
                <td>30</td>
            </tr>
        </table>
</div>

　　效果以下：

　　b，其餘樣式

　　咱們所有加到這裏，代碼以下：

<div class="container">
        <table class="table table-striped table-bordered table-hover table-condensed">
            <tr>
                <td>id</td>
                <td>name</td>
                <td>age</td>
            </tr>
            <tr>
                <td>1</td>
                <td>james</td>
                <td>34</td>
            </tr>
            <tr>
                <td>2</td>
                <td>durant</td>
                <td>30</td>
            </tr>
        </table>
</div>

　　效果以下：

　　c，狀態類

　　下圖中所列出的上下文類容許你改變表格行或者單個單元格的背景顏色。

　　示例：

<table class="table">
  <caption>上下文表格佈局</caption>
  <thead>
    <tr>
      <th>產品</th>
      <th>付款日期</th>
      <th>狀態</th></tr>
  </thead>
  <tbody>
    <tr class="active">
      <td>產品1</td>
      <td>23/11/2013</td>
      <td>待發貨</td></tr>
    <tr class="success">
      <td>產品2</td>
      <td>10/11/2013</td>
      <td>發貨中</td></tr>
    <tr class="warning">
      <td>產品3</td>
      <td>20/10/2013</td>
      <td>待確認</td></tr>
    <tr class="danger">
      <td>產品4</td>
      <td>20/10/2013</td>
      <td>已退貨</td></tr>
  </tbody>
</table>

　　結果以下：

5，表單

　　單獨的表單控件會被自動賦予一些全局樣式。全部設置了 .form-control 類的 <input>、<textarea> 和 <select>元素都將被默認設置寬度屬性爲 width: 100%;。將 label 元素和前面提到的控件包裹在 .form-group 中能夠得到最好的排列。

　　a，基本實例

<div class="container">
<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> 已閱讀
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>
</div>

　　效果以下：

　　b，水平排列的表單

　　　經過爲表單添加 .form-horizontal 類，並聯合使用 Bootstrap 預置的柵格類，能夠將 label 標籤和控件組水平並排佈局。這樣作將改變 .form-group 的行爲，使其表現爲柵格系統中的行（row），所以就無需再額外添加 .row了。

<div class="container">
    <form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>
</div>

　　效果以下：

6，被支持的控件

　　表單佈局實例中展現了其所支持的標準表單控件。

　　a，輸入框

　　包括大部分表單控件、文本輸入域控件，還支持全部 HTML5 類型的輸入控件： text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。

<div class="container">
    <input type="text" class="form-control" placeholder="Text input">
</div>

　　效果以下：

　　b，只讀狀態

　　爲輸入框設置 readonly 屬性能夠禁止用戶修改輸入框中的內容。處於只讀狀態的輸入框顏色更淺（就像被禁用的輸入框同樣），可是仍然保留標準的鼠標狀態。

<div class="container">
   <input class="form-control" type="text" placeholder="Readonly input here…" readonly>
</div>

　　效果以下：

　　c，校驗狀態

　　Bootstrap 對錶單控件的校驗狀態，如 error、warning 和 success 狀態，都定義了樣式。使用時，添加 .has-warning、.has-error 或 .has-success 類到這些控件的父元素便可。任何包含在此元素以內的 .control-label、.form-control 和 .help-block 元素都將接受這些校驗狀態的樣式。

<div class="container">
   <div class="form-group has-success">
      <label class="control-label" for="inputSuccess1">Input with success</label>
      <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
      <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
    </div>
    <div class="form-group has-warning">
      <label class="control-label" for="inputWarning1">Input with warning</label>
      <input type="text" class="form-control" id="inputWarning1">
    </div>
    <div class="form-group has-error">
      <label class="control-label" for="inputError1">Input with error</label>
      <input type="text" class="form-control" id="inputError1">
    </div>
    <div class="has-success">
      <div class="checkbox">
        <label>
          <input type="checkbox" id="checkboxSuccess" value="option1">
          Checkbox with success
        </label>
      </div>
    </div>
    <div class="has-warning">
      <div class="checkbox">
        <label>
          <input type="checkbox" id="checkboxWarning" value="option1">
          Checkbox with warning
        </label>
      </div>
    </div>
    <div class="has-error">
      <div class="checkbox">
        <label>
          <input type="checkbox" id="checkboxError" value="option1">
          Checkbox with error
        </label>
      </div>
    </div>
</div>

　　效果以下：

7，按鈕

　　a，可做爲按鈕使用的標籤或元素

　　可做爲按鈕使用的標籤或者元素爲 a , button input 元素添加按鈕類（button class）便可使用Bootstrap提供的樣式。

<div>
    <a class="btn btn-default" href="#" role="button">Link</a>
    <button class="btn btn-default" type="submit">Button</button>
    <input class="btn btn-default" type="button" value="Input">
    <input class="btn btn-default" type="submit" value="Submit">
</div>

　　效果以下：

　　注意：

針對組件的注意事項：雖然按鈕類能夠應用到 a 和 button 元素上，可是導航和導航條組件只支持 button 元素。
鏈接被做爲按鈕使用時的注意事項：若是 a 元素被做爲按鈕使用——並用於在當前頁面觸發某些功能——而不是用於鏈接其餘頁面或者連接當前頁面中的其餘部分，那麼務必設置爲 role='button'屬性。
跨瀏覽器展現：咱們的總結是：強烈建議儘量使用 button 元素來獲取在各個瀏覽器上得到相匹配的繪製效果。

　　b，樣式按鈕

　　使用下面列出的類能夠快速建立一個帶有預約義樣式的按鈕。

<div class="container">

    <div>
            <!-- Standard button -->
        <button type="button" class="btn btn-default">（默認樣式）Default</button>

    </div>
    <hr>
    <div>
        <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
        <button type="button" class="btn btn-primary">（首選項）Primary</button>

    </div>
    <hr>
    <div>
        <!-- Indicates a successful or positive action -->
        <button type="button" class="btn btn-success">（成功）Success</button>

    </div>
    <hr>
    <div>
        <!-- Contextual button for informational alert messages -->
        <button type="button" class="btn btn-info">（通常信息）Info</button>

    </div>
    <hr>
    <div>
        <!-- Indicates caution should be taken with this action -->
        <button type="button" class="btn btn-warning">（警告）Warning</button>

    </div>
    <hr>
    <div>
        <!-- Indicates a dangerous or potentially negative action -->
        <button type="button" class="btn btn-danger">（危險）Danger</button>

    </div>
    <hr>
    <div>
        <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
        <button type="button" class="btn btn-link">（連接）Link</button>
    </div>

</div>

　效果以下：

　　c 按鈕尺寸

　　須要讓按鈕有尺寸，使用 btn-lg btn-sm btn-xs 就能夠得到不一樣尺寸的按鈕。

<p>
  <button type="button" class="btn btn-primary btn-lg">（大按鈕）Large button</button>
  <button type="button" class="btn btn-default btn-lg">（大按鈕）Large button</button>
</p>

<p>
  <button type="button" class="btn btn-primary">（默認尺寸）Default button</button>
  <button type="button" class="btn btn-default">（默認尺寸）Default button</button>
</p>

<p>
  <button type="button" class="btn btn-primary btn-sm">（小按鈕）Small button</button>
  <button type="button" class="btn btn-default btn-sm">（小按鈕）Small button</button>
</p>

<p>
  <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
</p>

　　效果以下：

8，圖片

　　a，響應式圖片

　　在 Bootstrap 版本 3 中，經過爲圖片添加 .img-responsive 類可讓圖片支持響應式佈局。其實質是爲圖片設置了 max-width: 100%;、 height: auto; 和 display: block; 屬性，從而讓圖片在其父元素中更好的縮放。

　　若是須要讓使用了 .img-responsive 類的圖片水平居中，請使用 .center-block 類，不要用 .text-center。

　　b，SVG 圖像和 IE 8-10

　　在 Internet Explorer 8-10 中，設置爲 .img-responsive 的 SVG 圖像顯示出的尺寸不勻稱。爲了解決這個問題，在出問題的地方添加 width: 100% \9; 便可。Bootstrap 並無自動爲全部圖像元素設置這一屬性，由於這會致使其餘圖像格式出現錯亂。

<img src="..." class="img-responsive" alt="Responsive image">

　　c，圖片形狀

　　經過爲 img 元素添加如下相應的類，可讓圖片呈現不一樣的形狀。

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

　　效果以下：

9，輔助類

　　a，文本顏色

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

　　效果以下：

　　b，背景顏色

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

　　效果以下：

　　c，關閉按鈕

　　經過使用一個象徵關閉的圖標，可讓模態框和警告框消失。

<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">×</span></button>

　　效果以下：

　　d，下拉三角

　　經過使用三角符號能夠指示某個元素具備下拉菜單的功能。注意，向上彈出式菜單中的三角符號是反方向的。

<span class="caret"></span>

　　效果以下：

　　e，快速浮動

　　經過添加一個類，能夠將任意元素向左或向右浮動。!important 被用來明確 CSS 樣式的優先級。這些類還能夠做爲 mixin（參見 less 文檔）使用。

<div class="pull-left">...</div>
<div class="pull-right">...</div>

　　f，內容塊居中

　　爲任意元素設置 display: block 屬性並經過 margin 屬性讓其中的內容居中。下面列出的類還能夠做爲 mixin 使用

<div class="center-block">...</div>

　　g，清除浮動

　　經過爲父元素添加 .clearfix 類能夠很容易地清除浮動（float）。這裏所使用的是 Nicolas Gallagher 創造的 micro clearfix 方式。此類還能夠做爲 mixin 使用。

<!-- Usage as a class -->
<div class="clearfix">...</div>

　　h，顯示與隱藏

　　.show 和 .hidden 類能夠強制任意元素顯示或隱藏(對於屏幕閱讀器也能起效)。這些類經過 !important 來避免 CSS 樣式優先級問題，就像 quick floats 同樣的作法。注意，這些類只對塊級元素起做用，另外，還能夠做爲 mixin 使用。

　　.hide 類仍然可用，可是它不能對屏幕閱讀器起做用，而且從 v3.0.1 版本開始就不建議使用了。請使用 .hidden或 .sr-only 。

<div class="show">...</div>
<div class="hidden">...</div>

三，Bootstrap組件的使用

　　Bootstrap有無數能夠複用的組件，包括字體圖標，下拉菜單，導航，警告框，彈出框等更多功能。

1，Gluphicons字體圖標

　　包括250多個來自 Glyphicon Halflings 的字體圖標。Glyphicons Halflings 通常是收費的，可是他們的做者容許 Bootstrap 無償使用。

　　這裏隨便截圖了幾個：

　　出於性能的考慮，全部圖標都須要一個基類和對應每一個圖標的類。把下面的代碼放在任何地方均可以正常使用。注意，爲了設置正確的內補（padding），務必在圖標和文本之間添加一個空格。

　　實例

　　能夠把他們應用到按鈕，工具條中的按鈕組，導航或者輸入框等地方。

<div>
    <button type="button" class="btn btn-default" aria-label="Left Align">
      <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
    </button>

    <button type="button" class="btn btn-default btn-lg">
      <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
    </button>
</div>

　　效果以下：

2，下拉菜單

　　用於顯示連接列表的可切換、有上下文的菜單。下拉菜單的 JavaScript 插件讓它具備了交互性。

　　a，實例

　　將下拉菜單觸發器和下拉菜單都報過在 dropdown裏，或者另外一個聲明瞭 position: relative; 的元素。而後加入組成菜單的 HTML 代碼。

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

　　效果以下：

aria-haspopup :true表示點擊的時候會出現菜單或是浮動元素； false表示沒有pop-up效果。
aria-expanded:表示展開狀態。默認爲undefined, 表示當前展開狀態未知。其它可選值：true表示元素是展開的；false表示元素不是展開的
aria-labelledby：當想要的標籤文本已在其餘元素中存在時，可使用aria-labelledby，並將其值爲全部讀取的元素的id。以下：
當ul獲取到焦點時，屏幕閱讀器是會讀：「選擇您的職位」
data-toggle: 表示什麼事件類型發生

　　b，標題

　　在任何下拉菜單中都可經過添加標題來標明一組動做。

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>

　　效果以下：

　　c，分割線

　　爲下拉菜單添加一組分割線，用於將多個連接分組。

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

　　效果以下：

3，導航

　　Bootstrap中的導航組件都依賴同一個 .nav 類，狀態類也是共用的，改變修飾類能夠改變樣式。

　　a，標籤頁

　　注意： .nav-tabs 類依賴 .nav 基類。

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

　　效果以下：

　　b，膠囊式標籤頁

　　HTML標記相同，但使用 .nav-pills 類：

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

　　效果以下：

　　膠囊是標籤頁也是能夠垂直方向堆疊排列的。只需添加 .nav-stacked 類。

<ul class="nav nav-pills nav-stacked">
  ...
</ul>

　　效果以下：

　　c，添加下拉菜單的標籤頁

　　用一點點額外 HTML 代碼並加入下拉菜單插件的 JavaScript 插件便可。

<ul class="nav nav-tabs">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

　　效果以下：

4，導航條

　　　　導航條是在您的應用或網站中做爲導航頁頭的響應式基礎組件。它們在移動設備上能夠摺疊（而且可開可關），且在視口（viewport）寬度增長時逐漸變爲水平展開模式。

　　a，默認樣式的導航條

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

　　效果以下：

　　b，固定在頂部

　　添加 .navbar-fixed-top 類可讓導航條固定在頂部，還可包含一個 .container 或 .container-fluid 容器，從而讓導航條居中，並在兩側添加內補（padding）。

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    ...
  </div>
</nav>

　　效果以下：

　　c，固定在底部

　　添加 .navbar-fixed-bottom 類可讓導航條固定在底部，而且還能夠包含一個 .container 或 .container-fluid 容器，從而讓導航條居中，並在兩側添加內補（padding）。

　　d，反色的導航條

　　經過添加 .navbar-inverse 類能夠改變導航條的外觀。

<nav class="navbar navbar-inverse">
  ...
</nav>

　　效果以下：

5，路徑導航

　　在一個帶有層次的導航結構中標明當前頁面的位置。各路徑間的分隔符已經自動經過 CSS 的 :before 和 content 屬性添加了。

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

　　效果以下：

6，分頁

　　爲網站或者應用提供帶有展現頁碼的分頁組件，或者可使用簡單的翻頁組件。

　　a，默認分頁

　　受 Rdio 的啓發，咱們提供了這個簡單的分頁組件，用在應用或搜索結果中超級棒。組件中的每一個部分都很大，優勢是容易點擊、易縮放、點擊區域大。

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">«</span>
      </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="#" aria-label="Next">
        <span aria-hidden="true">»</span>
      </a>
    </li>
  </ul>
</nav>

　　效果以下：

　　b，翻頁

　　用簡單的標記和樣式，就能作個上一頁和下一頁的簡單翻頁。用在像博客和雜誌這樣的簡單站點上棒極了。

<nav aria-label="...">
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

　　效果以下：

7，徽章

　　　　給連接、導航等元素嵌套 <span class="badge"> 元素，能夠很醒目的展現新的或未讀的信息條目。

<a href="#">Inbox <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

　　效果以下：

8，巨幕

　　這是一輕量，靈活的組件，他能延伸至整個瀏覽器視口來展現網站上的關鍵內容。

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

　　效果以下：

9，略縮圖

　　經過縮略圖組件擴展 Bootstrap 的柵格系統，能夠很容易地展現柵格樣式的圖像、視頻、文本等內容。

　　若是你想實現一個相似 Pinterest 的頁面效果（不一樣高度和/寬度的縮略圖順序排列）的話，你須要使用一個第三方插件，好比 Masonry、Isotope 或 Salvattore。

　　a，默認樣式的實例

　　Bootstrap略縮圖的默認設計僅須要最少的標籤就能展現帶鏈接的圖片。

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>

　　效果以下：

　　b，自定義內容

　　添加一點點額外的標籤，就能夠把任何類型的HTML內容，例如標題，段落或者按鈕，加入略縮圖組件內。

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

　　效果以下：

10，警告框

　　警告框組件經過提供一些靈活的預約義消息，爲常見的用戶動做提供反饋消息。

　　a，實例

　　將任意文本和一個可選的關閉按鈕組合在一塊兒就能組成一個警告框，.alert 類是必需要設置的，另外咱們還提供了有特殊意義的4個類（例如，.alert-success），表明不一樣的警告信息。

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

　　效果以下：

　　b，可關閉的警告框

　　爲警告框添加一個可選的 .alert-dismissible 類和一個關閉按鈕。

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

　　　　效果以下：

　　c，警告框中的連接

　　用 .alert-link 工具類，能夠爲連接設置與當前警告框相符的顏色。

<div class="alert alert-success" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
  <a href="#" class="alert-link">...</a>
</div>

　　效果以下：

11，進度條

　　經過這些簡單，靈活的進度條，爲當前工做流程或者動做提供實時反饋。

　　a，默認樣式的進度條

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

　　效果以下：

　　b，帶有提示標籤的進度條

　　將設置了 .sr-only 類的 <span> 標籤從進度條組件中移除類，從而讓當前進度顯示出來。

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

　　效果以下：

　　在展現很低的百分比時，若是須要讓文本提示可以清晰可見，能夠爲進度條設置 min-width 屬性。

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
    0%
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
    2%
  </div>
</div>

　　效果以下：

　　c，根據情景變化效果

　　進度條組件使用與按鈕和警告框相同的類，根據不一樣情景展現響應的效果。

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</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: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

　　效果以下：

　　d，動畫效果

　　爲 .progress-bar-striped 添加 .active 類，使其呈現出由右向左運動的動畫效果。IE9 及更低版本的瀏覽器不支持。

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

　效果以下：

　　e，堆疊效果

　　把多個進度條放入同一個 .progress 中，使它們呈現堆疊的效果。

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

　　效果以下：

四，Bootstrap插件的使用

　　jQuery插件爲Bootstrap的組件賦予了「生命」，能夠簡單的一次性引入全部插件，或者逐個引入到你的頁面中。

　　那bootstrap 都有神馬插件呢？，能夠查看下面我整理的圖：

　　咱們主要學習模態框，輪播圖。

1，模態框

　　模態框通過了優化，更加靈活，以彈出對話框的形式出現，具備最小和最實用的功能集。

注意：

不支持同時打開多個模態框，千萬不要在一個模態框上重疊另外一個模態框。要想同時支持多個模態框，須要本身額外寫代碼來實現。
模態框的HTML代碼防止的位置：務必將模態框的HTML代碼放在文檔的最高層級內（也就是說，儘可能做爲body標籤的直接子元素），以免其餘組件影響模態框的展示和/或功能。

　　a，靜態實例

　　如下模態框包含了模態框的頭，體和一組放置於底部的按鈕。

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body…</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

　　效果以下：

　　b，動態實例

　　經過點擊下面的按鈕便可經過 JavaScript 啓動一個模態框。此模態框將從上到下、逐漸浮現到頁面前。

　　點開後，效果以下：

　　c，參數

　　　　能夠將選項經過 data 屬性或 JavaScript 代碼傳遞。對於 data 屬性，須要將參數名稱放到 data- 以後，例如 data-backdrop=""。

　　d，方法

`.modal(options)`

　　將頁面中的某塊內容做爲模態框激活。接受可選參數 object。

$('#myModal').modal({
  keyboard: false
})

`.modal('toggle')`

　　手動打開或關閉模態框。在模態框顯示或隱藏以前返回到主調函數中（也就是，在觸發 shown.bs.modal 或 hidden.bs.modal 事件以前）。

$('#myModal').modal('toggle')

`.modal('show')`

　　手動打開模態框。在模態框顯示以前返回到主調函數中（也就是，在觸發 shown.bs.modal 事件以前）。

$('#myModal').modal('show')

`.modal('hide')`

　　手動隱藏模態框。在模態框隱藏以前返回到主調函數中（也就是，在觸發 hidden.bs.modal 事件以前）。

$('#myModal').modal('hide')

　　e，事件

　　Bootstrap 的模態框類提供了一些事件用於監聽並執行你本身的代碼。

　　f，jQuery函數

2，Collapse

<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

　　效果以下：

3，輪播圖

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

　　效果以下：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

前端學習之Bootstrap學習

一，Bootstrap簡介

二，經常使用Bootstrap組件連接

1，基礎CSS樣式

2，預置界面組件

3，JavaScript插件

JavaScript插件的依賴狀況

如何使用Javascript插件

4，內置組件

深度自定義 Bootstrap

5，在線自定義

6，源碼編譯

LESS語言

三，響應式開發介紹

1，什麼是響應式？

2，爲何要寫自適應的頁面（響應式頁面）

3，用到的技術：CSS3 @media 查詢

3.1 CSS3@media查詢的定義

3.2 經常使用屬性

3.3 CSS 語法：

3.4 值描述

3.5 viewport

4，開始編寫響應式頁面

準備工做1：設置Meta標籤

準備工做2：加載兼容文件JS

準備工做3：設置IE渲染方式默認爲最高(可選)

5，代碼實例

6，※ 須要注意的地方（劃重點）

四，全局CSS樣式的使用

1，Bootstrap的下載

2，Bootstrap是html5的文檔

3，Bootstrap支持移動設備優先

4，排版與連接

5，Bootstrap重置樣式

6，佈局容器

五，柵格系統

1，柵格系統簡介

2，柵格系統的工做原理

3，柵格參數

4，Bootstrap網格系統如何跨多個設備工做

5，響應式的列重置

實例：

6，偏移列

7，嵌套列（不經常使用）

8，列排序

六，Bootstrap全局樣式

1，標題相關

a，標題

b，副標題

c，中心內容

2，文本相關

a，文本對齊

b，文本大小寫

c，無用文本

3，略縮語

a，基本略縮語

b，首字母略縮語

4，表格

a，基本實例

b，其餘樣式

c，狀態類

5，表單

a，基本實例

b，水平排列的表單

6，被支持的控件

a，輸入框

b，只讀狀態

c，校驗狀態

7，按鈕

a，可做爲按鈕使用的標籤或元素

b， 樣式按鈕

c 按鈕尺寸

8，圖片

a，響應式圖片

b，SVG 圖像和 IE 8-10

c，圖片形狀

9，輔助類

a， 文本顏色

b， 背景顏色

c，關閉按鈕

　　實例：

　　a，標題

　　b，副標題

　　c，中心內容

　　a，文本對齊

　　b，文本大小寫

　　c，無用文本

　　a，基本略縮語

　　b，首字母略縮語

　　a，基本實例

　　b，其餘樣式

　　c，狀態類

　　a，基本實例

　　b，水平排列的表單

　　a，輸入框

　　b，只讀狀態

　　c，校驗狀態

　　a，可做爲按鈕使用的標籤或元素

　　b，樣式按鈕

　　c 按鈕尺寸

　　a，響應式圖片

　　b，SVG 圖像和 IE 8-10

　　c，圖片形狀

　　a，文本顏色

　　b，背景顏色

　　c，關閉按鈕

　　d，下拉三角

　　e，快速浮動

　　f，內容塊居中

　　g，清除浮動

　　h，顯示與隱藏

　　實例

　　a，實例

　　b，標題

　　c，分割線

　　a，標籤頁

　　b，膠囊式標籤頁

　　c，添加下拉菜單的標籤頁

　　a，默認樣式的導航條

　　b，固定在頂部

　　c，固定在底部

　　d，反色的導航條

　　a，默認分頁

　　b，翻頁

　　a，默認樣式的實例

　　b，自定義內容

　　a，實例

　　b，可關閉的警告框

　　c，警告框中的連接

　　a，默認樣式的進度條

　　b，帶有提示標籤的進度條

　　c，根據情景變化效果

　　d，動畫效果

　　e，堆疊效果

　　a，靜態實例

　　b，動態實例

　　c，參數

　　d，方法

`.modal(options)`

`.modal('toggle')`

`.modal('show')`

`.modal('hide')`

　　e，事件

　　f，jQuery函數