導語：Bootstrap CSS 在網頁設計中的運用一文來源于網友上傳，不代表本站觀點，若需要原創文章可咨詢客服老師，歡迎參考。

一、現行的主流結構

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

二、CSS框架的優點與現有成熟框架

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

1.ElementsCSS框架

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

2.YUIGridsCSS框架

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

3.BlueprintCSS框架

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

passCSS框架

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

三、Bootstrap介紹

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

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

四、Bootstrap拓展

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

五、結語

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

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