官網(wǎng)http://v3.bootcss.com進行下載：
點擊紅線邊框處即可跳轉(zhuǎn)到下載頁面盒揉，有三個東西可以給我們選擇灯谣，由于我們現(xiàn)在處于初級使用階段均澳，或者說我們直接用在生成環(huán)境下胞谭，我們下載第一個就好：
下載成功后可以得到一個.zip的文件垃杖，解壓后我們可以得到一個包含css、fonts和js的文件夾丈屹，ok缩滨，準備工作我們就做好了。
現(xiàn)在要怎么用呢泉瞻，一頭霧水吧脉漏，我們新建一個文件夾劲赠，命名為test手形，將剛剛?cè)齻€文件夾復(fù)制到test文件夾中，現(xiàn)在用sublime打開剛剛的文件夾躯枢，點擊file-open folder鞭达，選擇test文件夾點擊確定即可司忱，如下：
在test上右鍵選擇new file，然后ctrl+s保存文件名為index.html畴蹭，這時候回到bootstrap的官網(wǎng)坦仍，導(dǎo)航欄選擇“起步”，向下拖動或在右側(cè)選擇“基本模板”叨襟，將下列代碼進行復(fù)制繁扎，粘貼到index.html中，如下：
粘貼到sublime中糊闽，這是一個html5格式的html文件：
這時候我們點擊index.html梳玫，瀏覽器打開后就可以在屏幕上看到一個Diao炸天的“Hello world”了。
到這里右犹，其實你已經(jīng)用bootstrap完成了第一個頁面設(shè)計了提澎。下面來具體說下bootstrap的具體使用方法，bootstrap其實是把網(wǎng)頁等分為了12分念链，所以記住12這個數(shù)字是很重要的盼忌，可能這里你會比較模糊，下面我們來看下官方文檔是怎么說的掂墓，我們先來了解一下“柵格參數(shù)”：
bootstrap把根據(jù)屏幕大小把屏幕分為了4個層級谦纱，小于768像素的為超小屏幕，大于等于768像素的為小屏幕梆暮，大于等于992像素的為中等屏幕服协，大于等于1200像素的則為大屏幕，相應(yīng)的類前綴見圖或查看官方文檔啦粹，根據(jù)柵格參數(shù)偿荷，我們看下下面這幅圖：
我們可以發(fā)現(xiàn)，每行的數(shù)字全部相加唠椭，最終都等于剛剛我讓大家記住的12跳纳，可能大家還是不清楚，我們下面用一個例子來會說明：
如果我現(xiàn)在需要在頁面上左右分別顯示兩個面板贪嫂，面板上面顯示相應(yīng)的表格數(shù)據(jù)寺庄，且左側(cè)列表占總寬度的3分之2，右側(cè)的面板僅占3分之1力崇，OK斗塘，下面我們來看看怎么做。
我們剛剛已經(jīng)創(chuàng)建好了一個基本的頁面布局亮靴，頁面上顯示了“你好馍盟，世界！”茧吊，現(xiàn)在我們在這個框架上面接著寫：
在body中贞岭，我們刪除剛剛的“你好，世界搓侄！”瞄桨，新建兩個div，如下：
<div class="col-md-8"></div>
<div class="col-md-4"></div>
由于左側(cè)占用3分之2讶踪，12的3分之2為8芯侥，所以上面一個div設(shè)置為8，剩下的一個設(shè)為4乳讥，好了筹麸，第一步完成了。
下面進行第二步雏婶，分別在8和4里面建立兩個面板物赶，在bootstrap官網(wǎng)找到面板，復(fù)制代碼如下：
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
將這段代碼分別粘貼到兩個div下留晚，最終代碼如下：
<pre name="code" class="html"> <div class="col-md-8">
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
</div>
這時候頁面顯示效果如下：
我們可以看到左側(cè)的panel占據(jù)了頁面的3分之2酵紫，右側(cè)的僅為3分之1，第二步也完成了错维。
第三步奖地，我們來創(chuàng)建表格，在bootstrap官網(wǎng)找到表格的代碼：
<table class="table">
<caption>Optional table caption.</caption>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
同樣的赋焕，將這段代碼粘貼到剛剛的兩個panel中参歹，代碼如下：
<div class="col-md-8">
<div class="panel panel-default">
<div class="panel-body">
<table class="table">
<caption>Optional table caption.</caption>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-body">
<table class="table">
<caption>Optional table caption.</caption>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
此時頁面效果如下：
好了，最終效果就是這樣隆判，其實整個過程我都在粘貼復(fù)制犬庇，完全一個代碼都沒有寫僧界，這樣做的好處是，我們開發(fā)起來很簡單臭挽，而且兼容ie8以上捂襟、Firefox、Google等主流瀏覽器欢峰，基本方法就是這樣葬荷，其余的一些效果不一一敘述，由于功能太多纽帖，方法都差不多宠漩，各位coder自己嘗試一下吧！
最后懊直，插一小節(jié)扒吁，我突然發(fā)現(xiàn)Dreamweaver CC 2015居然都自帶了Bootstrap供我們選擇，可見它的重要性吹截！
