官網(wǎng)http://v3.bootcss.com進(jìn)行下載：
點(diǎn)擊紅線邊框處即可跳轉(zhuǎn)到下載頁面，有三個東西可以給我們選擇，由于我們現(xiàn)在處于初級使用階段，或者說我們直接用在生成環(huán)境下，我們下載第一個就好：
下載成功后可以得到一個.zip的文件，解壓后我們可以得到一個包含css、fonts和js的文件夾，ok，準(zhǔn)備工作我們就做好了。
現(xiàn)在要怎么用呢，一頭霧水吧，我們新建一個文件夾，命名為test，將剛剛?cè)齻€文件夾復(fù)制到test文件夾中，現(xiàn)在用sublime打開剛剛的文件夾，點(diǎn)擊file-open folder，選擇test文件夾點(diǎn)擊確定即可，如下：
在test上右鍵選擇new file，然后ctrl+s保存文件名為index.html，這時候回到bootstrap的官網(wǎng)，導(dǎo)航欄選擇“起步”，向下拖動或在右側(cè)選擇“基本模板”，將下列代碼進(jìn)行復(fù)制，粘貼到index.html中，如下：
粘貼到sublime中，這是一個html5格式的html文件：
這時候我們點(diǎn)擊index.html，瀏覽器打開后就可以在屏幕上看到一個Diao炸天的“Hello world”了。
到這里，其實(shí)你已經(jīng)用bootstrap完成了第一個頁面設(shè)計了。下面來具體說下bootstrap的具體使用方法，bootstrap其實(shí)是把網(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，好了，第一步完成了。
下面進(jìn)行第二步，分別在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>
此時頁面效果如下：
好了，最終效果就是這樣，其實(shí)整個過程我都在粘貼復(fù)制，完全一個代碼都沒有寫，這樣做的好處是，我們開發(fā)起來很簡單，而且兼容ie8以上、Firefox、Google等主流瀏覽器，基本方法就是這樣，其余的一些效果不一一敘述，由于功能太多，方法都差不多，各位coder自己嘗試一下吧！
最后，插一小節(jié)，我突然發(fā)現(xiàn)Dreamweaver CC 2015居然都自帶了Bootstrap供我們選擇，可見它的重要性！
