一、使用Bootstrap要引用的文件
要使用Bootstrap，基本架構要引用如下文件：
<link href="bootstrap.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" scr="jquery-1.10.2.min.js"></script> <script type="text/javascript" scr="bootstrap.min.js"></script>
最簡單的頁面示例代碼如下：
<!doctype html> <head> <meta charset="utf-8"> <title>js</title> <link href="ace.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" scr="jquery-1.10.2.min.js"></script> <script type="text/javascript" scr="bootstrap.min.js"></script> </head> <body> <div> <h1 class="btn btn-success btn-large"><i class="icon-user icon-white"></i>Hello,World</h1> </div> </body> </html>
顯示效果如下：
二、使用前要點
1、DOCTYPE
Bootstrap使用了HTML5元素，所以HTML頭部要加上
<!DOCTYPE html> <html> .... </html>
2、viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- Width=device-width => 表示頁面寬度是設備屏幕的寬度；確保網頁能被不同屏幕分辨率的設備正確呈現；
- user-scalable=no => 是否可以調整縮放比例(yes/no)；
- initial-scale=1.0 => 表示初始的縮放比例 ，以 1:1 的比例呈現，不會有任何的縮放；minimum-scale=0.5：最小允許的縮放比例；
- maximum-scale=2.0：最大允許的縮放比例；
如果maximum-scale=1.0 與 user-scalable=no 一起使用。這樣禁用縮放功能后，用戶只能滾動屏幕，就能讓您的網站看上去更像原生應用的感覺。
這樣設置后，圖片或元素也設置style="width:100%"，那么圖片看起來也是全屏的了。
3、img-responsive響應式圖像
為圖片加上img-responsive屬性，可以讓圖片對響應式布局更加好。其樣式如下：
.img-responsive { display: inline-block; height: auto; max-width: 100%; }
添加了此屬性的圖片會按比例縮小，但不能方法。
而上面的直接設置width:100%會放大，可能會出現失真的情況。
三、Bootstrap網格系統
1、網格系統是什么東西
Bootstrap把一個頁面分為12列，通過指定數字就能夠設置寬度。簡單的示例:
<div class="row"> <div class="col-xs-3">3</div> <div class="col-xs-6">6</div> <div class="col-xs-3">3</div> </div>
顯示效果如下：
當瀏覽器的寬度縮小時(為下面說明響應式做鋪墊)，顯示效果如下：
要點：
1、row是容器，網格樣式要放在row容器里面。
2、1個網頁是12列。
3、一共有4個前綴的網格class前綴，分別應用於分辨率的設備。
圖表如下：
2、響應式網格
示例說明：
<div class="row"> <div class="col-xs-12 col-sm-6 col-md-3">3</div> <div class="col-xs-12 col-sm-6 col-md-3">3</div> <div class="col-xs-12 col-sm-6 col-md-3">3</div> <div class="col-xs-12 col-sm-6 col-md-3">3</div> </div>
顯示效果如下：
當瀏覽器縮小時：
當再進一步縮小時：
這就是所謂的響應式，說白了"響應式"就是根據瀏覽器的寬度來決定使用哪一個class，以上效果展示了響應式布局的原理:
- 當屏幕寬度u≥1200px時，bootstrap會自動選用col-lg-*這個class；
- 當屏幕寬度u≥992px時，bootstrap會自動選用col-sm-*這個class；
- 當屏幕寬度u≥768px時，bootstrap會自動選用col-md-*這個class；
- 當屏幕寬度u<768px時，bootstrap會自動選用col-lg-*這個class；
3、偏移列
偏移列的意思是隔開多少個列。
示例：
<div class="col-xs-12 col-sm-6 col-md-3">3</div> //向右偏移2列了 <div class="col-md-offset-2 col-xs-12 col-sm-6 col-md-3">3</div>
顯示效果如下：
.col-xs=* 類不支持偏移，它們可以簡單地通過使用一個空的單元格來實現該效果。
這個樣式相當於設置了margin:寬度*列數。
4、嵌套列
在網格里嵌套網格
<div class="row"> <div class="col-xs-8"> <div class="col-xs-2">2</div> <div class="col-xs-2">2</div> <div class="col-xs-2">2</div> <div class="col-xs-2">2</div> </div> </div>
輸出效果如下：
5、列排序
通過使用".col-md-push-*"和".col-md-pull-*"能夠互換順序。其中*的范圍從1到11。
示例如下：
<div style="margin-top:20px"></div> 無排序： <div class="row"> <div class="col-sm-4">First</div> <div class="col-sm-8">Second</div> </div> 有排序： <div class="row"> <div class="col-sm-4 col-sm-push-8">First</div> <div class="col-sm-8 col-sm-pull-4">Second</div> </div>
顯示效果如下：
以上class使用的理解為：本來First占據4列，Second占據8列，如果要互換位置，則First要向右推(push)8個列，而Second要向左拉4個列。