隨著移動端的用戶越來越多，傳統(tǒng)的web系統(tǒng)架構(gòu)無法兼容很多移動終端的正常使用。在工作中也會發(fā)現(xiàn)，現(xiàn)在很多的客戶都有在手機、平板等移動終端上使用管理系統(tǒng)的需求。如果單獨為每一個終端開發(fā)相應(yīng)的響應(yīng)網(wǎng)頁，這必定增加項目的成本和開發(fā)人員的壓力。這時候了解響應(yīng)式布局就很有必要，響應(yīng)式布局就是為解決多終端問題而生的。本次介紹的是輕量級、開源的、免費的bootstrap。
搭建開發(fā)環(huán)境
首先下載官網(wǎng)的boostrap源碼包：http://www.bootcss.com/. 開發(fā)簡單的項目不必加入源碼中的所有css、js和字體等。根據(jù)自己的項目需求可以裁剪出自己需要的環(huán)境。
必須的文件有以下幾個：jquery.min.js 、bootstrap.min.js、bootstrap.css。如果需要使用到其中的一些字體樣式等，還需要加入字體相關(guān)的文件，如下圖所示：
【注】加載js時，必須先加載jquery.min.js，這是因為在bootstrap.min.js會使用到j(luò)Query相關(guān)的方法即boostrap.min.js依賴于jquery.min.js。
測試bootsrap環(huán)境
寫一個測試文件index.html。測試文件內(nèi)容如下：
<!DOCTYPE html><html><head> <title>測試boostrap環(huán)境</title> <link rel="stylesheet" type="text/css" href="./css/bootstrap.css"> <script type="text/javascript" src="./js/jquery.min.js"></script> <script type="text/javascript" src="./js/bootstrap.min.js"></script></head><body></body></html>
以上就搭建好了bootsrap開發(fā)環(huán)境。很簡單吧！
使用boostrap必須要了解的就是boostrap的柵格系統(tǒng)。正是由于這柵格系統(tǒng)才使得更好的兼容不同分辨率的終端設(shè)備。
具體的柵格系統(tǒng)官網(wǎng)有清晰的介紹：http://v3.bootcss.com/css/。官網(wǎng)的下圖所在位置：
使用boostrap時，我們主要是使用里面已定義好的一些樣式。這對一個沒有美工能力的程序而言，快速搭建一個還不錯的頁面是很有幫助的。
在實際使用bootstrap的時候，我們經(jīng)常查看官網(wǎng)的一些幫助文檔：http://v3.bootcss.com/css/#tables 。
個人建議直接在官網(wǎng)的示例中copy相關(guān)的代碼到自己的網(wǎng)頁中，再在此基礎(chǔ)之上做出相關(guān)的修改，這樣的開發(fā)速度會更快并且準確率會更高。
演示一些boostrap樣式---table樣式。
<!DOCTYPE html><html><head> <title>測試boostrap環(huán)境</title> <link rel="stylesheet" type="text/css" href="./css/bootstrap.css"> <script type="text/javascript" src="./js/jquery.min.js"></script> <script type="text/javascript" src="./js/bootstrap.min.js"></script></head><body> <table class="table table-hover table-bordered table-striped"> <tr> <td>測試表格</td> <td>測試表格</td> <td>測試表格</td> <td>測試表格</td> <td>測試表格</td> </tr> <tr> <td>測試表格</td> <td>測試表格</td> <td>測試表格</td> <td>測試表格</td> <td>測試表格</td> </tr> <tr> <td>測試表格</td> <td>測試表格</td> <td>測試表格</td> <td>測試表格</td> <td>測試表格</td> </tr> <tr> <td>測試表格</td> <td>測試表格</td> <td>測試表格</td> <td>測試表格</td> <td>測試表格</td> </tr> <tr> <td>測試表格</td> <td>測試表格</td> <td>測試表格</td> <td>測試表格</td> <td>測試表格</td> </tr> </table></body></html>
網(wǎng)頁查看結(jié)果如下：
class 里屬性介紹:
1）table 加上這個就已經(jīng)有bootsrap的表格樣式
2）table-hover 表示表格鼠標停留的行背景高亮
3）table-bordered 表格出現(xiàn)邊框
4）table-striped 表格條紋
【注】多個屬性相加時，各個屬性之間有空格
2. button
<!--Button--> <a class="btn btn-default" href="#" role="button">Link</a> <button class="btn btn-default" type="submit">Button</button> <input class="btn btn-default" type="button" value="Input"> <input class="btn btn-default" type="submit" value="Submit"> <!-- Standard button --> <button type="button" class="btn btn-default">（默認樣式）Default</button> <!-- Provides extra visual weight and identifies the primary action in a set of buttons --> <button type="button" class="btn btn-primary">（首選項）Primary</button> <!-- Indicates a successful or positive action --> <button type="button" class="btn btn-success">（成功）Success</button> <!-- Contextual button for informational alert messages --> <button type="button" class="btn btn-info">（一般信息）Info</button> <!-- Indicates caution should be taken with this action --> <button type="button" class="btn btn-warning">（警告）Warning</button> <!-- Indicates a dangerous or potentially negative action --> <button type="button" class="btn btn-danger">（危險）Danger</button> <!-- Deemphasize a button by making it look like a link while maintaining button behavior --> <button type="button" class="btn btn-link">（鏈接）Link</button>
網(wǎng)頁顯示結(jié)果如下：
很多其他的一些樣式和組件，還是建議參考官方的幫助文檔。
總結(jié)
本文算是一個引導(dǎo)吧，簡單介紹了boostrap是干什么的和怎么去使用。并沒有詳細列出所有的組件和樣式,但是……往下看！
這是一篇非常神奇的文章，一定要點進去看一看：值得分享和收藏的Bootstrap學(xué)習(xí)教程
如果大家還想深入學(xué)習(xí)，可以點擊這里進行學(xué)習(xí)，再為大家附兩個精彩的專題：Bootstrap學(xué)習(xí)教程 Bootstrap實戰(zhàn)教程
希望對Bootstrap感興趣的能夠自己手動地去測試每一種樣式的效果和各個組件怎么使用，真正感受Bootstrap帶來的樂趣。
新聞熱點
疑難解答
