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

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

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

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

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

1.ElementsCSS框架

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

2.YUIGridsCSS框架

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

3.BlueprintCSS框架

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

passCSS框架

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

三、Bootstrap介紹

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

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

四、Bootstrap拓展

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

五、結(jié)語

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

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