電子發(fā)燒友App
Bootstrap是Twitter推出的一個(gè)由動(dòng)態(tài)CSS語(yǔ)言Less寫成的開源CSS/HTML框架（同時(shí)提供Sass 移植版代碼）。Bootstrap提供了全面的基本及組件樣式并自帶了13個(gè)jQuery插件（模態(tài)對(duì)話框、標(biāo)簽頁(yè)、滾動(dòng)條、彈出框等），可滿足常用開發(fā)需要，而且還根據(jù)需要定制。另外，Bootstrap提供了優(yōu)雅的HTML和CSS規(guī)范，使用者也可以參考學(xué)習(xí)。
今天談一下bootstrap，這個(gè)讓我愛(ài)不釋手的東西，慣例，我們先要去它的官網(wǎng)http://v3.bootcss.com進(jìn)行下載：
點(diǎn)擊紅線邊框處即可跳轉(zhuǎn)到下載頁(yè)面，有三個(gè)東西可以給我們選擇，由于我們現(xiàn)在處于初級(jí)使用階段，或者說(shuō)我們直接用在生成環(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è)頁(yè)面設(shè)計(jì)了。下面來(lái)具體說(shuō)下bootstrap的具體使用方法，bootstrap其實(shí)是把網(wǎng)頁(yè)等分為了12分，所以記住12這個(gè)數(shù)字是很重要的，可能這里你會(huì)比較模糊，下面我們來(lái)看下官方文檔是怎么說(shuō)的，我們先來(lái)了解一下“柵格參數(shù)”：
bootstrap把根據(jù)屏幕大小把屏幕分為了4個(gè)層級(jí)，小于768像素的為超小屏幕，大于等于768像素的為小屏幕，大于等于992像素的為中等屏幕，大于等于1200像素的則為大屏幕，相應(yīng)的類前綴見圖或查看官方文檔，根據(jù)柵格參數(shù)，我們看下下面這幅圖：
我們可以發(fā)現(xiàn)，每行的數(shù)字全部相加，最終都等于剛剛我讓大家記住的12，可能大家還是不清楚，我們下面用一個(gè)例子來(lái)會(huì)說(shuō)明：
如果我現(xiàn)在需要在頁(yè)面上左右分別顯示兩個(gè)面板，面板上面顯示相應(yīng)的表格數(shù)據(jù)，且左側(cè)列表占總寬度的3分之2，右側(cè)的面板僅占3分之1，OK，下面我們來(lái)看看怎么做。
我們剛剛已經(jīng)創(chuàng)建好了一個(gè)基本的頁(yè)面布局，頁(yè)面上顯示了“你好，世界！”，現(xiàn)在我們?cè)谶@個(gè)框架上面接著寫：
在body中，我們刪除剛剛的“你好，世界！”，新建兩個(gè)div，如下：
［html］ view plain copy print？
《div class=“col-md-8”》《/div》
《div class=“col-md-4”》《/div》
由于左側(cè)占用3分之2，12的3分之2為8，所以上面一個(gè)div設(shè)置為8，剩下的一個(gè)設(shè)為4，好了，第一步完成了。
下面進(jìn)行第二步，分別在8和4里面建立兩個(gè)面板，在bootstrap官網(wǎng)找到面板，復(fù)制代碼如下：
?。踙tml］ view plain copy print？
《div class=“panel panel-default”》
《div class=“panel-body”》
Basic panel example
《/div》
《/div》
將這段代碼分別粘貼到兩個(gè)div下，最終代碼如下：
?。踙tml］ view plain copy print？
《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》
這時(shí)候頁(yè)面顯示效果如下：
我們可以看到左側(cè)的panel占據(jù)了頁(yè)面的3分之2，右側(cè)的僅為3分之1，第二步也完成了。
第三步，我們來(lái)創(chuàng)建表格，在bootstrap官網(wǎng)找到表格的代碼：
?。踙tml］ view plain copy print？
《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》
同樣的，將這段代碼粘貼到剛剛的兩個(gè)panel中，代碼如下：
?。踙tml］ view plain copy print？
《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í)頁(yè)面效果如下：
好了，最終效果就是這樣，其實(shí)整個(gè)過(guò)程我都在粘貼復(fù)制，完全一個(gè)代碼都沒(méi)有寫，這樣做的好處是，我們開發(fā)起來(lái)很簡(jiǎn)單，而且兼容ie8以上、Firefox、Google等主流瀏覽器，基本方法就是這樣，其余的一些效果不一一敘述，由于功能太多，方法都差不多，各位coder自己嘗試一下吧！
工商網(wǎng)監(jiān)
評(píng)論