Bootstrap這個框架相信對於前端來說都不陌生，之前剛接觸時就只是“拿來主義”：需要用到時就檢視下Bootstrap的官網文件直接將需要的外掛或者樣式拷貝下來用，最近終於有機會好好靜下心來了解這個框架。對Bootstrap的認知也有了一定的改變，下面是本人在學習這個框架的全域性樣式時的一些個人見解也是我個人覺得在繪製頁面時比較實用的幾個知識點。內容比較直白通俗，希望路過的各位大牛不要見怪，如若有任何紕漏。還是真心希各位大牛可以指點一二。

一：總結 bootstrap ：

編譯 Bootstrap（使用 Bootstrap）

可以通過兩種方式使用 Bootstrap ：使用編譯後的

或者使用 Less 原始碼檔案。若要編譯 Less 檔案，請參考“起步”章節的內容以瞭解如何設定開發環境並執行必須的編譯指令。

二：關於bootstrap的全域性頁面樣式：

1.關於表格table

不同形式的表格只需要對類名進行引用即可，Bootstrap為表格設計瞭如下幾個類：

table-bordered:為表格新增邊框

table-hover:滑鼠移上有效果

table-condensed：讓表單更緊湊

table-responsive ：響應式表格，以768px為界。

.active,.success等類是給tr，

2.關於表單form

label中的for要與input中的id要對應

在bootstrap中不但為表單增加了label標籤，還包裹了一個類名為form-group的div即 每個input標籤的格式為：

<div class="form-group">

<label for="input的id名">input的id名或其他</label>

<input class="form-control" id="" placeholder=" " type=" " />

form-control:為input定義了樣式，所以在引用

</div>

為<form>標籤新增類。會出現對應的效果：

form-inline：使form中的元素都變成行內元素，在同一行顯示

form-horizontal：效果表現與form不加任何類一樣，但是form-horizontal為form內建了柵格系統

input的type有text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。且type宣告是必須的。

3.關於單選框radio與複選框（多選框）checkbox：

注意：輸入框 type="text",type="password"等與單選框type="radio" 多選框 type="checkbox" 除了input中的type型別不同，label所加的位置也不同

輸入框：<div class="form-group"><label for=" ">xxx</label><input class="from-control" id="xxx" type="text" placholder=" "/></div>

單選框：<div class="radio"><label><input type="radio" value=" " 這個位置不填預設是able（即布林值為true），若寫上disabled則表示禁用該單選框/></label></div>

複選框：<div class="checkbox"><label><input type="checkbox"  value=" " 這個位置不填預設是able（即布林值為true），若寫上disabled則表示禁用該複選框/></label></div>

為讓所有的單選框或者複選框在同一行，可將大div的類名改為checkbox-inline，和radio-inline即設定為行內元素。

4.關於按鈕：

按鈕，在bootstrap中可作為按鈕的元素：a,input,button

所有添加了btn btn-*     其中不論是用那種標籤的按鈕都有hover效果。以下是這三個元素作為按鈕時該注意的點

a標籤：必須新增role="button"屬性；由a標籤構成的按鈕設定不可用直接新增類disabled 效果是a標籤即使加了href連結也無法實現跳轉 。

<a class="btn btn-default" href="#" role="button">Link</a>

<a href="http://baidu.com" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>

button:設定type屬性 ,其type屬性有：type="button" ：普通按鈕，type="reset" ：重置按鈕  type="submit" ：提交按鈕。

<button class="btn btn-default" type="submit">Button</button>

input中的type="submit" 以及type=“button”使input可作為按鈕。

<input class="btn btn-default" type="submit" value="Submit">

<input class="btn btn-default" type="button" value="Input">

bootstrap中給定的按鈕的類有多個，一般的格式是 class="btn btn-*" 提供的類有：

（1）外觀（顏色）：btn-default(預設)，btn-success(成功)，btn-danger（危險）btn-warning（警告） btn-info（一般展示資訊） btn-primary（首選項） btn-link(連結)

（2）外觀（大小）：btn-lg（大），btn-md（中），btn-sm（小）

  （3）按鈕變成啟用狀態，需要給按鈕加上active類。 按鈕變成不可用狀態。新增disabled="disableded"

（4）bootstrap還提供了特殊形式的按鈕，例如：關閉按鈕<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>

5.關於圖片img：

響應式圖片  在bootstrap中要使圖片具有響應式功能，須給圖片加上類 .img-responsive ，要讓圖片在具有響應式功能的同時還劇中顯示的話需要加入類 center-block

bootstrap中給出的img的類有：

img-responsive  響應式圖片(一般是將圖片設定為具有響應式功能的時候用到，除了img-responsive，bootstrap還為圖片的外觀樣式設定了另外三個類)

img-circle      border-radius為圖片寬高的一半的圖片即圓形圖片

img-rounded    無邊框但border-radius為6px圖片

img-thumbnail   有4px的邊框且border-radius也為4px的圖片

要注意的是在IE8及以下的IE瀏覽器是不支援border-radius屬性的。

6.關於輔助類，為頁面的色彩效果以及意境有幫助

輔助類

  關於文字字型顏色：text-muted（灰色 色值為#777），text-primary（藍色 #428bca），text-success（綠色 #5cb85c），text-info（淺藍色 #5bc0de），text-warning（橙色  #f0ad4e），text-danger（紅色 #d9534f）

  關於背景顏色：bg-primary（藍色 #428bca），bg-info（淺藍色  #5bc0de），bg-waring（橙色 #f0ad4e），bg-success（綠色 #5cb85c），bg-danger（紅 #d9534f）

7.其他：

（1）bootstrap 清除浮動的方法，bootstrap中已經在樣式中設定好清除浮動的樣式，因此我們只需要引用即可：

<div class="clearfix"></div>

（2）設定浮動：

bootstrap中如果要為元素設定浮動，可直接新增類pull-right（向右浮動）和pull-left（向左浮動）

bootstrap中如果要為元素可見（或不可見）直接新增類 show（hide），不需要設定樣式。