bootstrap如何使用_bootstrap基本使用方法

　　Bootstrap是Twitter推出的一個(gè)由動(dòng)態(tài)CSS語言Less寫成的開源CSS/HTML框架（同時(shí)提供Sass 移植版代碼）。Bootstrap提供了全面的基本及組件樣式并自帶了13個(gè)jQuery插件（模態(tài)對話框、標(biāo)簽頁、滾動(dòng)條、彈出框等），可滿足常用開發(fā)需要，而且還根據(jù)需要定制。另外，Bootstrap提供了優(yōu)雅的HTML和CSS規(guī)范，使用者也可以參考學(xué)習(xí)。

　　今天談一下bootstrap，這個(gè)讓我愛不釋手的東西，慣例，我們先要去它的官網(wǎng)http://v3.bootcss.com進(jìn)行下載：

　　點(diǎn)擊紅線邊框處即可跳轉(zhuǎn)到下載頁面，有三個(gè)東西可以給我們選擇，由于我們現(xiàn)在處于初級使用階段，或者說我們直接用在生成環(huán)境下，我們下載第一個(gè)就好：

　　下載成功后可以得到一個(gè).zip的文件，解壓后我們可以得到一個(gè)包含css、fonts和js的文件夾，ok，準(zhǔn)備工作我們就做好了。

　　現(xiàn)在要怎么用呢，一頭霧水吧，我們新建一個(gè)文件夾，命名為test，將剛剛?cè)齻€(gè)文件夾復(fù)制到test文件夾中，現(xiàn)在用sublime打開剛剛的文件夾，點(diǎn)擊file-open folder，選擇test文件夾點(diǎn)擊確定即可，如下：

　　在test上右鍵選擇new file，然后ctrl+s保存文件名為index.html，這時(shí)候回到bootstrap的官網(wǎng)，導(dǎo)航欄選擇“起步”，向下拖動(dòng)或在右側(cè)選擇“基本模板”，將下列代碼進(jìn)行復(fù)制，粘貼到index.html中，如下：

　　粘貼到sublime中，這是一個(gè)html5格式的html文件：

　　這時(shí)候我們點(diǎn)擊index.html，瀏覽器打開后就可以在屏幕上看到一個(gè)Diao炸天的“Hello world”了。

　　到這里，其實(shí)你已經(jīng)用bootstrap完成了第一個(gè)頁面設(shè)計(jì)了。下面來具體說下bootstrap的具體使用方法，bootstrap其實(shí)是把網(wǎng)頁等分為了12分，所以記住12這個(gè)數(shù)字是很重要的，可能這里你會比較模糊，下面我們來看下官方文檔是怎么說的，我們先來了解一下“柵格參數(shù)”：

　　bootstrap把根據(jù)屏幕大小把屏幕分為了4個(gè)層級，小于768像素的為超小屏幕，大于等于768像素的為小屏幕，大于等于992像素的為中等屏幕，大于等于1200像素的則為大屏幕，相應(yīng)的類前綴見圖或查看官方文檔，根據(jù)柵格參數(shù)，我們看下下面這幅圖：