導(dǎo)語(yǔ)：Bootstrap CSS 在網(wǎng)頁(yè)設(shè)計(jì)中的運(yùn)用一文來(lái)源于網(wǎng)友上傳，不代表本站觀點(diǎn)，若需要原創(chuàng)文章可咨詢客服老師，歡迎參考。

一、現(xiàn)行的主流結(jié)構(gòu)

在Web開(kāi)發(fā)中的弊端目前網(wǎng)頁(yè)設(shè)計(jì)師在設(shè)計(jì)網(wǎng)頁(yè)時(shí)常用的主流結(jié)構(gòu)是DIV+CSS，其中CSS是英語(yǔ)CascadingStyleSheets（層疊樣式表單）的縮寫(xiě)，它是一種用來(lái)表現(xiàn)HTML或XML等文件式樣的計(jì)算機(jī)語(yǔ)言，負(fù)責(zé)前段頁(yè)面的美觀。但是編寫(xiě)CSS文件是一個(gè)繁冗細(xì)致的工作，不但需要有一定的代碼編寫(xiě)能力，更對(duì)美術(shù)設(shè)計(jì)功底有一定的要求。在網(wǎng)站項(xiàng)目開(kāi)發(fā)中，往往需要編寫(xiě)大量的CSS代碼，如果沒(méi)有一定的經(jīng)驗(yàn)，很容易造成大量代碼混雜，尤其是DIV+CSS編碼，其本身并沒(méi)有統(tǒng)一的規(guī)范，很容易造成外聯(lián)樣式與行內(nèi)樣式冗余等其他問(wèn)題。其次，瀏覽器兼容性也是在前端設(shè)計(jì)時(shí)無(wú)法避免的問(wèn)題，由于目前瀏覽器對(duì)CSS的代碼識(shí)別不同，使得相同的CSS樣式在不同類(lèi)型、不同版本的瀏覽器上存在較大的顯示差異。而解決這樣的問(wèn)題不僅需要在編寫(xiě)時(shí)高度注意，更需要通過(guò)大量的測(cè)試來(lái)確定最終的效果，反復(fù)的測(cè)試無(wú)疑在很大程度上降低了網(wǎng)頁(yè)開(kāi)發(fā)效率。針對(duì)于以上問(wèn)題，使用CSS框架就能夠很巧妙的避開(kāi)這些弊端，無(wú)論是網(wǎng)頁(yè)設(shè)計(jì)新手，還是后臺(tái)開(kāi)發(fā)人員，只需要對(duì)html有一定的了解，就能夠獨(dú)立完成一個(gè)頁(yè)面的展示。而針對(duì)于經(jīng)驗(yàn)豐富的開(kāi)發(fā)人員，CSS框架則無(wú)疑加快了開(kāi)發(fā)速度，整體提升了全站建設(shè)的開(kāi)發(fā)效率。

二、CSS框架的優(yōu)點(diǎn)與現(xiàn)有成熟框架

框架本身是指一種能夠使用在項(xiàng)目中概念上的結(jié)構(gòu)。CSS框架也是這樣的一種結(jié)構(gòu)，它是多個(gè)CSS代碼的集合文件，也可以說(shuō)是一個(gè)開(kāi)源的用于前端開(kāi)發(fā)的工具包，里面包含支持該框架的字體排版，表單樣式，表格布局等等。在開(kāi)發(fā)過(guò)程中，網(wǎng)頁(yè)工程師只需要給html元素加上所需的類(lèi)，就可以快速的得到該風(fēng)格的相關(guān)組件，而無(wú)需像傳統(tǒng)編碼一樣一一實(shí)現(xiàn)，而現(xiàn)在成熟的CSS框架擁有較高的通用性和瀏覽器兼容性，省去了大量的測(cè)試修改時(shí)間。目前已經(jīng)存在的CSS框架日益增多，下面簡(jiǎn)單介紹幾種較為流行的CSS框架：

1.ElementsCSS框架

Elements是一個(gè)基礎(chǔ)CSS框架，它不僅是一個(gè)框架，還擁有自己的工作流。

2.YUIGridsCSS框架

YUIGrids是由Yahoo開(kāi)發(fā)小組開(kāi)發(fā)而成。該框架提供4種頁(yè)面寬度，6種邊框模板，該框架提供了超過(guò)1000個(gè)頁(yè)面布局。

3.BlueprintCSS框架

該框架是比較早出現(xiàn)的，基于靜態(tài)CSS的框架。主要由SASS動(dòng)態(tài)語(yǔ)言為CSS提供了變量、Mixin、運(yùn)算符等功能。

passCSS框架

這款基于SASS的框架包含了Blueprint作為其中的一個(gè)模塊，并且和RubyonRails是高度整合的，用起來(lái)需要大量的命令行操作，在Rails開(kāi)發(fā)人員里面用得比較多。除此之外還有新興的多種CSS框架，每種都有其自身的特點(diǎn)，用戶可以根據(jù)項(xiàng)目來(lái)選擇框架的使用。尤其是上述介紹的Blueprint和Compass，是一個(gè)分工很明確的組合，前者負(fù)責(zé)樣式渲染，后者則是基礎(chǔ)框架和模塊，可以說(shuō)，在本文即將要介紹的Bootstrap框架誕生之前，是Web開(kāi)發(fā)首選的黃金組合。

三、Bootstrap介紹

Bootstrap是Twitter推出的CSS框架，它由Twitter的設(shè)計(jì)師MarkOtto和JacobThornton合作開(kāi)發(fā)，一經(jīng)推出后頗受歡迎，一直是GitHub上的熱門(mén)開(kāi)源項(xiàng)目，包括NASA的MSNBC（微軟全國(guó)廣播公司）的BreakingNews都使用了該項(xiàng)目，現(xiàn)在基本上是歐美最流行的框架。CSSReset是指重設(shè)瀏覽器的樣式。在各種瀏覽器中，都會(huì)對(duì)CSS的選擇器默認(rèn)一些數(shù)值。但并不是所有的瀏覽器都使用一樣的數(shù)值，所以有了CSSReset，以讓網(wǎng)頁(yè)的樣式在各瀏覽器中表現(xiàn)一致。Bootstrap中包含有豐富的組件，其中包括下拉菜單、按鈕組、按鈕下拉菜單、導(dǎo)航條、面包屑、分頁(yè)、排版、縮略圖、警告對(duì)話框、進(jìn)度條等，根據(jù)這些組件，可以快速的搭建一個(gè)風(fēng)格簡(jiǎn)約，功能完備的網(wǎng)站。它還自帶了一組jQuery交互插件，包括模式對(duì)話框、標(biāo)簽頁(yè)、滾動(dòng)條、彈出框等，不但功能完善，而且十分精致，正在成為眾多jQuery項(xiàng)目的默認(rèn)設(shè)計(jì)標(biāo)準(zhǔn)。而這些模塊化的組件在修改起來(lái)也是非常方便的，只需要修改變量就可以形成自己獨(dú)特風(fēng)格的網(wǎng)頁(yè)了。

我們要使用Bootstrap，就必須首先將Bootstrap的文件包放在相應(yīng)的文件夾下，文件包中包含所有CSS文件、jQuary文件以及相關(guān)的圖標(biāo)文件，而需要使用時(shí)，只用在網(wǎng)頁(yè)文件中引入即可，代碼如下：<linkrel="stylesheet"type="text/css"media="all"href="http://path/Bootstrap.css"/>，其中“path”為Bootstrap所在路徑，若用到其他組件和插件，只需要引入相應(yīng)的文件就可以了。Bootstrap默認(rèn)頁(yè)面寬度為940px，并將其平均分為12柵格（Grid），分別為span1到span12，在使用過(guò)程中只需保持各個(gè)行塊中內(nèi)容的寬度不大于設(shè)置的相關(guān)span寬度即可，搭建一個(gè)網(wǎng)站中常用1:2格局的版面只需要如下代碼：<divclass=”row”><divclass=”span4”>左邊菜單欄</div><divclass=”span8”>右邊內(nèi)容欄</div></div>若需要設(shè)置元素平行移動(dòng)，代碼為“offsetspanN”（0<N<12）,則該元素即可移動(dòng)對(duì)應(yīng)的寬度。Bootstrap的柵格系統(tǒng)的先進(jìn)性主要體現(xiàn)在自適應(yīng)設(shè)計(jì)（ResponsiveDesign）方面，在如今平板電腦、手機(jī)、筆記本等多終端應(yīng)用的時(shí)代，自適應(yīng)設(shè)計(jì)可謂是必不可少的，Bootstrap中整個(gè)柵欄系統(tǒng)是可以以"流動(dòng)布局"來(lái)適應(yīng)各種終端設(shè)備，每個(gè)區(qū)塊的位置都是浮動(dòng)的。在流動(dòng)布局中，Bootstrap已經(jīng)搭好了實(shí)現(xiàn)自適應(yīng)設(shè)計(jì)的基礎(chǔ)框架，并且非常容易修改。與此同時(shí)，Bootstrap還提供了眾多的相關(guān)插件和工具。如jQuery輪播插件Unslider，各種按鈕、開(kāi)關(guān)、復(fù)選框和日期選擇器等組件，可以實(shí)現(xiàn)Bootstrap可視化布局的Layoutlt！和Bootstrap-wysiwyg等等，還有FontAwesome這樣的iconfont，能夠提供豐富的icon資源供使用者選擇。

四、Bootstrap拓展

Bootstrap跟其他主流框架的不同之處，在于它是基于LESS的一套前端工具庫(kù)。LESS是一種基于CSS之上的高級(jí)語(yǔ)言，其目的是使得CSS開(kāi)發(fā)更靈活和更強(qiáng)大，甚至可以說(shuō)是一種真正的編程語(yǔ)言了。使用LESS時(shí)，也需要先將樣式引入，具體代碼如下：<linkrel="stylesheet/less"type="text/css"href="http://path/styles.less"><scriptsrc="path/less.js"type="text/javascript"></script>LESS賦予了CSS動(dòng)態(tài)語(yǔ)言的特性，如變量，繼承，運(yùn)算，函數(shù)等等。例如當(dāng)用CSS3的傳統(tǒng)方法來(lái)定義圓角時(shí)，通常會(huì)寫(xiě)出如下代碼(IE8和以前更老版本不支持)：border-radius：-webkit-border-radius:10px;-moz-border-radius:10px;-border-radius:10px;但是通過(guò)Bootstrap的LESS，就可以直接定義成：@includeborder-radius(10px);。同時(shí)，Bootstrap還支持定制服務(wù)，可以根據(jù)需要對(duì)Bootstrap的初始文件包進(jìn)行縮減，將自己不需要調(diào)用的文件省去，使得整個(gè)文件都精煉起來(lái)。

五、結(jié)語(yǔ)

這些不足的地方均得以彌補(bǔ)，不僅解決了各個(gè)瀏覽器的兼容問(wèn)題，提高了工作效率，同時(shí)也規(guī)范了原本雜亂的CSS代碼。在CSS框架中著重對(duì)BootstrapCSS框架進(jìn)行了介紹，淺談了Bootstrap的插件、組件、使用方法和拓展應(yīng)用。盡管Bootstrap功能非常強(qiáng)大，但它僅僅只是一個(gè)框架，不能提供其他的功能實(shí)現(xiàn)，若想將Bootstrap或其他CSS框架完全的應(yīng)用于項(xiàng)目建設(shè)，還需要進(jìn)一步學(xué)習(xí)LESS及其他相關(guān)知識(shí)。

作者：李淼杜明晶苗放單位：成都理工大學(xué)