一,按鈕
注意：雖然在Bootstrap框架中使用任何標簽元素都可以實現按鈕風格，但個人並不建議這樣使用，為了避免瀏覽器兼容性問題，個人強烈建議使用button或a標簽來制作按鈕。
框架中提供了基礎按鈕的例子:
<button class="btn" type="button">基礎按鈕.btn</button> <button class="btn btn-default" type="button">默認按鈕.btn-default</button> <button class="btn btn-primary" type="button">主要按鈕.btn-primary</button> <button class="btn btn-success" type="button">成功按鈕.btn-success</button> <button class="btn btn-info" type="button">信息按鈕.btn-info</button> <button class="btn btn-warning" type="button">警告按鈕.btn-warning</button> <button class="btn btn-danger" type="button">危險按鈕.btn-danger</button> <button class="btn btn-link" type="button">鏈接按鈕.btn-link</button>
不過這里說一下這個button這個標簽為啥還要加個type="button"我個人理解是就像input標簽一樣 任何標簽都可成為按鈕,換言之就是只要你加了樣式之后很多控件也可以掛羊頭賣狗肉 ,所以這里指明一下type是button 當然這也只是我個人的一個想法,很多人認為這是一個小BUG,確實我也不否認.
另外 按鈕的大小也有相應的定義
從上表中不難發現，在Bootstrap框架中控制按鈕的大小都是通過修改按鈕的padding、line-height、font-size和border-radius幾個屬性。
按鈕的焦點狀態也有這么幾種 ,基本和input框響應效果一樣同樣是加了偽類":focus"Bootstrap按鈕的活動狀態主要包括按鈕的懸浮狀態(:hover)，點擊狀態(:active)和焦點狀態（:focus）幾種。
1.1圖像部分 這點沒有特意拿出來單做一個標題內容不是特別多
圖像在網頁制作中也是常要用到的元素，在Bootstrap框架中對於圖像的樣式風格提供以下幾種風格：
1、img-responsive：響應式圖片，主要針對於響應式設計
2、img-rounded：圓角圖片
3、img-circle：圓形圖片
4、img-thumbnail：縮略圖片
<img alt="140x140" src="http://placehold.it/140x140"> <img class="img-rounded" alt="140x140" src="http://placehold.it/140x140"> <img class="img-circle" alt="140x140" src="http://placehold.it/140x140"> <img class="img-thumbnail" alt="140x140" src="http://placehold.it/140x140"> <img class="img-responsive" alt="140x140" src="http://placehold.it/140x140">
由於樣式沒有對圖片做大小上的樣式限制，所以在實際使用的時候，需要通過其他的方式來處理圖片大小。比如說控制圖片容器大小。（注意不可以通過css樣式直接修改img圖片的大小，這樣操作就不響應了）
圖標問題:這里說的圖標就是Web制作中常看到的小icon圖標，可以說這些小icon圖標是一個優秀Web中不可缺少的一部分，起到畫龍點睛的效果。在Bootstrap框架中也為大家提供了近200個不同的icon圖片，而這些圖標都是使用CSS3的@font-face屬性配合字體來實現的icon效果。
二.網狀表格
這里引用慕課網上的對於網狀表格的工作原理定義:
1、數據行(.row)必須包含在容器（.container）中，以便為其賦予合適的對齊方式和內距(padding)。如：
<div class="container"> <div class="row"></div> </div>
2、在行(.row)中可以添加列(.column)，但列數之和不能超過平分的總列數，比如12。如：
<div class="container"> <div class="row"> <div class="col-md-4"></div> <div class="col-md-8"></div>
3、具體內容應當放置在列容器（column）之內，而且只有列（column）才可以作為行容器(.row)的直接子元素
總結:通過設置內距（padding）從而創建列與列之間的間距。然后通過為第一列和最后一列設置負值的外距（margin）來抵消內距(padding)的影響
通過為“列（column）”設置 padding 屬性，從而創建列與列之間的間隔（gutter）。通過為 .row 元素設置負值 margin 從而抵消掉為 .container 元素設置的 padding，也就間接為“行（row）”所包含的“列（column）”抵消掉了padding。
列偏移:有的時候，我們不希望相鄰的兩個列緊靠在一起，但又不想使用margin或者其他的技術手段來。這個時候就可以使用列偏移（offset）功能來實現。使用列偏移也非常簡單，只需要在列元素上添加類名“col-md-offset-*”(其中星號代表要偏移的列組合數)，那么具有這個類名的列就會向右偏移。例如，你在列元素上添加“col-md-offset-4”，表示該列向右移動4個列的寬度。
列排序:列排序其實就是改變列的方向，就是改變左右浮動，並且設置浮動的距離。在Bootstrap框架的網格系統中是通過添加類名“col-md-push-*”和“col-md-pull-*” (其中星號代表移動的列組合數)。
列嵌套:Bootstrap框架的網格系統還支持列的嵌套。你可以在一個列中添加一個或者多個行（row）容器，然后在這個行容器中插入列（像前面介紹的一樣使用列）。但在列容器中的行容器（row），寬度為100%時，就是當前外部列的寬度。來看一個簡單示例：
<div class="container"> <div class="row"> <div class="col-md-8"> 我的里面嵌套了一個網格 <div class="row"> <div class="col-md-6">col-md-6</div> <div class="col-md-6">col-md-6</div> </div> </div> <div class="col-md-4">col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-8"> 我的里面嵌套了一個網格 <div class="row"> <div class="col-md-4">col-md-4</div> <div class="col-md-4">col-md-4</div> <div class="col-md-4">col-md-4</div> </div> </div> </div> </div>
三.下拉菜單
下拉菜單是一個獨立的組件 必須引用Jquery 和Bootstrap.JS才能用 或者直接引用框架里面的dropdown.js也是可以的,下面簡單的介紹一下,其實總體上沒啥特別變化 但是有幾點需要注意一下
在使用Bootstrap框架中的下拉菜單組件時，其結構運用的正確與否非常的重要，如果結構和類名未使用正確，直接影響組件是否能正常運用。我們來簡單的看看：
1、使用一個名為“dropdown”的容器包裹了整個下拉菜單元素，示例中為:
<div class="dropdown"></div>
2、使用了一個<button>按鈕做為父菜單，並且定義類名“dropdown-toggle”和自定義“data-toggle”屬性，且值必須和最外容器類名一致，此示例為:
data-toggle="dropdown"
3、下拉菜單項使用一個ul列表，並且定義一個類名為“dropdown-menu”，此示例為:
<ul class="dropdown-menu">
在Bootstrap框架中的下拉菜單還提供了下拉分隔線，假設下拉菜單有兩個組，那么組與組之間可以通過添加一個空的<li>，並且給這個<li>添加類名“divider”來實現添加下拉分隔線的功能。
同理既然可以分割,那么分割出來每一部分都是有自己獨立的頭尾的:
<li role="presentation" class="dropdown-header">第一部分菜單頭部</li>
Bootstrap框架中下拉菜單默認是左對齊，如果你想讓下拉菜單相對於父容器右對齊時，可以在“dropdown-menu”上添加一個“pull-right”或者“dropdown-menu-right”類名,兩者效果相同.
而且下拉菜單也有自己的狀態下拉菜單項的默認的狀態（不用設置）有懸浮狀態（:hover）和焦點狀態（:focus）,下拉菜單項除了上面兩種狀態，還有當前狀態（.active）和禁用狀態（.disabled）。這兩種狀態使用方法只需要在對應的菜單項上添加對應的類名
按鈕組:
1、默認所有按鈕都有圓角
2、除第一個按鈕和最后一個按鈕（下拉按鈕除外），其他的按鈕都取消圓角效果
3、第一個按鈕只留左上角和左下角是圓角
4、最后一個按鈕只留右上角和右下角是圓角
如果有按鈕組的話
你只需要將按鈕組“btn-group”按組放在一個大的容器“btn-toolbar”中
如果想讓按鈕組縱向排列:按鈕組都是水平顯示的。但在實際運用當中，總會碰到垂直顯示的效果。在Bootstrap框架中也提供了這樣的風格。我們只需要把水平分組的“btn-group”類名換成“btn-group-vertical”
還有移動端常用的等分按鈕組:
等分按鈕的效果在移動端上特別的實用。整個按鈕組寬度是容器的100%，而按鈕組里面的每個按鈕平分整個容器寬度。例如，如果你按鈕組里面有五個按鈕，那么每個按鈕是20%的寬度，如果有四個按鈕，那么每個按鈕是25%寬度，以此類推。
等分按鈕也常被稱為是自適應分組按鈕，其實現方法也非常的簡單，只需要在按鈕組“btn-group”上追加一個“btn-group-justified”類名
按鈕下拉菜單:
按鈕下拉菜單僅從外觀上看和上一節介紹的下拉菜單效果基本上是一樣的。不同的是在普通的下拉菜單的基礎上封裝了按鈕（.btn）樣式效果。簡單點說就是點擊一個按鈕，會顯示隱藏的下拉菜單。
按鈕下拉菜單其實就是普通的下拉菜單，只不過把“<a>”標簽元素換成了“<button>”標簽元素。唯一不同的是外部容器“div.dropdown”換成了“div.btn-group”。
有些菜單是需要向上彈出的，比如說你的菜單在頁面最底部，而這個菜單正好有一個下拉菜單，為了讓用戶有更好的體驗，不得不讓下拉菜單向上彈出。在Bootstrap框架中專門為這種效果提代了一個類名“dropup”。使用方法正如前面所示，只需要在“btn-group”上添加這個類名（當然，如果是普通向上彈出下拉菜單，你只需要在“dropdown”類名基礎上追加“dropup”類名即可）
下拉菜單里面的三角形:按鈕的向下三角形，我們是通過在<button>標簽中添加一個“<span>”標簽元素，並且命名為“caret”;
四.導航
標簽形導航，也稱為選項卡導航。特別是在很多內容分塊顯示的時，使用這種選項卡來分組十分適合。
標簽形導航是通過“nav-tabs”樣式來實現。在制作標簽形導航時需要在原導航“nav”上追加此類名，如：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>標簽形(tab)導航</title> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <link rel="stylesheet" href="style.css"> </head> <body> <ul class="nav nav-tabs"> <li><a href="##">Home</a></li> <li><a href="##">CSS3</a></li> <li><a href="##">Sass</a></li> <li><a href="##">jQuery</a></li> <li><a href="##">Responsive</a></li> </ul> <br /> <ul class="nav nav-tabs"> <li class="active"><a href="##">Home</a></li> <li><a href="##">CSS3</a></li> <li><a href="##">Sass</a></li> <li><a href="##">jQuery</a></li> <li><a href="##">Responsive</a></li> </ul> <br /> <ul class="nav nav-tabs"> <li class="active"><a href="##">Home</a></li> <li><a href="##">CSS3</a></li> <li><a href="##">Sass</a></li> <li><a href="##">jQuery</a></li> <li class="disabled"><a href="##">Responsive</a></li> </ul> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body> </html>
其實上例的效果和我們平時看到的選項卡效果並不一致。一般情況之下，選項卡教會有一個當前選中項。其實在Bootstrap框架也相應提供了。假設我們想讓“Home”項為當前選中項，只需要在其標簽上添加類名“class="active"”即可.
還有一種膠囊形態的選中樣式:膠囊形（pills）導航聽起來有點別扭，因為其外形看起來有點像膠囊形狀。但其更像我們平時看到的大眾形導航。當前項高亮顯示，並帶有圓角效果。其實現方法和“nav-tabs”類似，同樣的結構，只需要把類名“nav-tabs”換成“nav-pills”
除了膠囊形態的還有一種垂直型的li:在實際運用當中，除了水平導航之外，還有垂直導航，就類似前面介紹的垂直排列按鈕一樣。制作垂直堆疊導航只需要在“nav-pills”的基礎上添加一個“nav-stacked”類名即可
之前說到的類似於下拉菜單里面的分割線 在導航欄一樣可以使用:大家是否還記得，在下拉菜單一節中，下拉菜單組與組之間有一個分隔線。其實在垂直堆疊導航也具有這樣的效果，只需要添加在導航項之間添加“<li class=”nav-divider”></li>”即可
自適應導航(個人感覺凡是跟自適應沾邊的用處都很多):
自適應導航指的是導航占據容器全部寬度，而且菜單項可以像表格的單元格一樣自適應寬度。自適應導航和前面使用“btn-group-justified”制作的自適應按鈕組是一樣的。只不過在制作自適應導航時更換了另一個類名“nav-justified”。當然他需要和“nav-tabs”或者“nav-pills”配合在一起使用。
自適應,如字面意思 自己適應屏幕取處理導航的寬度大小,不過在屏幕比較小的時候這個導航會從橫向排列直接轉為縱向排列:瀏覽器視窗寬度大於768px才能按橫向排列。當你的瀏覽器視窗寬度小於768px的時候，將會按縱向排列
二級導航:
前面介紹的都是使用Bootstrap框架制作一級導航，但很多時候，在Web頁面中是離不開二級導航的效果。那么在Bootstrap框架中制作二級導航就更容易了。只需要將li當作父容器，使用類名“dropdown”，同時在li中嵌套另一個列表ul，使用前面介紹下拉菜單的方法就可以,父容器li 加 class="dropdown",同時 別忘記 class="dropdown-toggle" data-toggle="dropdown" <span class="caret"></span>, 子容器ul 加class="dropdown-menu"
另外還有一種面包屑樣式的導航:使用方式就很簡單，為ol加入breadcrumb類
基礎導航條:
在制作一個基礎導航條時，主要分以下幾步：
第一步：首先在制作導航的列表(<ul class=”nav”>)基礎上添加類名“navbar-nav”
第二步：在列表外部添加一個容器（div），並且使用類名“navbar”和“navbar-default”
示例查看右側代碼編輯（10-19行）。
“.navbar”樣式的主要功能就是設置左右padding和圓角等效果，但他和顏色相關的樣式沒有進行任何的設置。
導航標題:
在Web頁面制作中，常常在菜單前面都會有一個標題（文字字號比其它文字稍大一些），其實在Bootstrap框架也為大家做了這方面考慮，其通過“navbar-header”和“navbar-brand”來實現
表單可以嵌套在導航欄中嘛?當然可以:
在Bootstrap框架中提供了一個“navbar-form”，使用方法很簡單，在navbar容器中放置一個帶有navbar-form類名的表單，示例代碼編輯器（29-34行）。
實現導航條表單的樣式代碼源碼請查看bootstrap.css文件第3839行～第3904行，我們也對60多行樣式代碼節選了出來放到右側bootstrap.css文件中，有興趣的同學請查看。
在上面的示例中，大家看到了“navbar-left”讓表單左浮動，更好實現對齊。在Bootstrap框架中，還提供了“navbar-right”樣式，讓元素在導航條靠右對齊
導航欄中的連接,按鈕,文本:
Bootstrap框架的導航條中除了使用navbar-brand中的a元素和navbar-nav的ul和navbar-form之外，還可以使用其他元素。框架提供了三種其他樣式：
1、導航條中的按鈕navbar-btn
2、導航條中的文本navbar-text
3、導航條中的普通鏈接navbar-link
但這三種樣式在框架中使用時受到一定的限制，需要和navbar-brand、navbar-nav配合起來使用。而且對數量也有一定的限制，一般情況在使用一到兩個不會有問題，超過兩個就會有問題。
響應式導航條:
這種導航條比較常用!!:
1、保證在窄屏時需要折疊的內容必須包裹在帶一個div內，並且為這個div加入collapse、navbar-collapse兩個類名。最后為這個div添加一個class類名或者id名。
2、保證在窄屏時要顯示的圖標樣式（固定寫法）：
<button class="navbar-toggle" type="button" data-toggle="collapse"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
3、並為button添加data-target=".類名/#id名"，究競是類名還是id名呢？由需要折疊的div來決定。如：
需要折疊的div代碼段：
<div class="collapse navbar-collapse" id="example">
<ul class="nav navbar-nav">
…
</ul>
</div>
窄屏時顯示的圖標代碼段：
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#example"> ... </button>
也可以這么寫，需要折疊的div代碼段：
<div class="collapse navbar-collapse example" >
<ul class="nav navbar-nav">
…
</ul>
</div>
窄屏時要顯示的圖標：
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".example"> ... </button>
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>響應式導航條</title> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <style type="text/css"> body{padding:50px 0 0 0;} </style> </head> <body> <!--代碼--> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <!-- .navbar-toggle樣式用於toggle收縮的內容，即nav-collapse collapse樣式所在元素 --> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!-- 確保無論是寬屏還是窄屏，navbar-brand都顯示 --> <a href="##" class="navbar-brand">慕課網</a> </div> <!-- 屏幕寬度小於768px時，div.navbar-responsive-collapse容器里的內容都會隱藏，顯示icon-bar圖標，當點擊icon-bar圖標時，再展開。屏幕大於768px時，默認顯示。 --> <div class="collapse navbar-collapse navbar-responsive-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="##">網站首頁</a></li> <li><a href="##">系列教程</a></li> <li><a href="##">名師介紹</a></li> <li><a href="##">成功案例</a></li> <li><a href="##">關於我們</a></li> </ul> </div> </div> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body> </html>
黑色導航條:
用法與普通導航條一樣 只是樣式稍作修改:反色導航條其實是Bootstrap框架為大家提供的第二種風格的導航條，與默認的導航條相比，使用方法並無區別，只是將navbar-deafult類名換成navbar-inverse(原作者居然單拿出來做一章 容我做一個無奈的表情)
分頁導航:
Bootstrap框架除了提供帶頁碼的分頁導航之外還提供了翻頁導航。這種分頁導航常常在一些簡單的網站上看到，比如說個人博客，雜志網站等。這種分頁導航是看不到具體的頁碼，只會提供一個“上一頁”和“下一頁”的按鈕。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>分頁導航</title> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> </head> <body> <!--代碼--> <ul class="pagination pagination-lg"> <li><a href="#">«第一頁</a></li> <li><a href="#">11</a></li> <li><a href="#">12</a></li> <li class="active"><a href="#">13</a></li> <li><a href="#">14</a></li> <li><a href="#">15</a></li> <li class="disabled"><a href="#">最后一頁»</a></li> </ul> <ul class="pagination pagination"> <li><a href="#">«第一頁</a></li> <li><a href="#">11</a></li> <li><a href="#">12</a></li> <li class="active"><a href="#">13</a></li> <li><a href="#">14</a></li> <li><a href="#">15</a></li> <li class="disabled"><a href="#">最后一頁»</a></li> </ul> <ul class="pagination pagination-sm"> <li><a href="#">«第一頁</a></li> <li><a href="#">11</a></li> <li><a href="#">12</a></li> <li class="active"><a href="#">13</a></li> <li><a href="#">14</a></li> <li><a href="#">15</a></li> <li class="disabled"><a href="#">最后一頁»</a></li> </ul> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body> </html>
平時很多同學喜歡用div>a和div>span結構來制作帶頁碼的分頁導航。不過，在Bootstrap框架中使用的是ul>li>a這樣的結構，在ul標簽上加入pagination方法.
分頁導航之翻頁分頁導航:
Bootstrap框架除了提供帶頁碼的分頁導航之外還提供了翻頁導航。這種分頁導航常常在一些簡單的網站上看到，比如說個人博客，雜志網站等。這種分頁導航是看不到具體的頁碼，只會提供一個“上一頁”和“下一頁”的按鈕。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>分頁導航（翻頁分頁導航）</title> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> </head> <body> <!--代碼--> <ul class="pager"> <li><a href="#">«上一頁</a></li> <li><a href="#">下一頁»</a></li> </ul> <!--左右對齊--> <ul class="pager"> <li class="previous"><a href="#">«上一頁</a></li> <li class="next"><a href="#">下一頁»</a></li> </ul> <!--禁止狀態--> <ul class="pager"> <li class="disabled"><span>«上一頁</span></li> <li><a href="#">下一頁»</a></li> </ul> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body> </html>
五.進度條和亂七八糟部分
1.1縮略圖
縮略圖在網站中最常用的地方就是產品列表頁面，一行顯示幾張圖片，有的在圖片底下（左側或右側）帶有標題、描述等信息。Bootstrap框架將這一部獨立成一個模塊組件。並通過“thumbnail”樣式配合bootstrap的網格系統來實現。可以將產品列表頁變得更好看。
Bootstrap框架中也是按這樣的方式實現的，他提供了兩個容器，外容器使用“progress”樣式，子容器使用“progress-bar”樣式。其中progress用來設置進度條的容器樣式，而progress-bar用於限制進度條的進度。使用方法非常的簡單：
<div class="progress">
<div class="progress-bar" style="width:40%"></div>
</div>