基于BootStrap的WEB前端開發(fā)應(yīng)用研究

丁 蓮 張 玲 杜 巍 成都農(nóng)業(yè)科技職業(yè)學(xué)院

基于BootStrap的WEB前端開發(fā)應(yīng)用研究

丁 蓮 張 玲 杜 巍 成都農(nóng)業(yè)科技職業(yè)學(xué)院

本文介紹了目前較為流行的WEB前端開發(fā)框架Bootstrap，研究了在前端應(yīng)用中使用Bootstrap的意義、Bootstrap的基本結(jié)構(gòu)、Bootstrap的功能和實(shí)際應(yīng)用。讓讀者和廣大的Web前端開發(fā)人員對Bootstrap有一個(gè)基本的了解，為WEB開發(fā)者開辟新的方向，大大降低開發(fā)成本，提高工作效率。

Bootstrap；WEB前端開發(fā)；CSS

引言

隨著互聯(lián)網(wǎng)的飛速發(fā)展，對于Web前端開發(fā)的要求也越來越高，早期WEB前端開發(fā)者每天都在重復(fù)地使用HTML、CSS和Javascript編寫模板、樣式和動(dòng)態(tài)交互效果，這種重復(fù)勞動(dòng)不僅單調(diào)而且乏味，而且跟不上網(wǎng)絡(luò)發(fā)展的需求。作為一個(gè)web設(shè)計(jì)師或開發(fā)者，必須尋找新的途徑來提高自己的技能，提高自己的工作質(zhì)量。Bootstrap 的出現(xiàn)使WEB前端開發(fā)者終于擺脫了這種現(xiàn)狀，Bootstrap 是一個(gè)桌面應(yīng)用程序，可以幫助web開發(fā)人員和設(shè)計(jì)人員創(chuàng)建使用Bootstrap框架的響應(yīng)式網(wǎng)站，它支持多種組件和高級功能，讓W(xué)eb開發(fā)變得更有效率。

1.什么是Bootstrap？

Bootstrap是由著名的前端開發(fā)工程師Mark Otto和Jacob Thornton共同開發(fā)的一個(gè)WEB前端工具，2011年8月Twitter公司將其開源，目前已經(jīng)成為Github上比較流行的開源項(xiàng)目。Bootstrap是一套基于Less的前端開發(fā)庫，提供了很多常見并常用的各種CSS和JavaScript合集，以便開發(fā)人員隨時(shí)使用。Bootstrap提供了一個(gè)可擴(kuò)展的庫，庫的文檔結(jié)構(gòu)良好且易于閱讀，其他人可基于這個(gè)庫構(gòu)建或擴(kuò)展自己的項(xiàng)目。如今它已經(jīng)包含了幾十個(gè)組件，支持響應(yīng)與非響應(yīng)式WEB設(shè)計(jì)，有較強(qiáng)的兼容性，可在多種設(shè)備上良好的運(yùn)行。它能大幅提升WEB開發(fā)者的開發(fā)效率，降低開發(fā)成本。

2.Bootstrap的基本結(jié)構(gòu)

因?yàn)锽ootstrap免費(fèi)開源，使用者可以在GitHub上獲取最新的Bootstrap版本。Bootstrap提供了預(yù)編譯和源碼兩種形式的壓縮包，壓縮包內(nèi)的文件按照類別存放在不同的目錄內(nèi)，并且提供了壓縮與未壓縮兩種版本。

2.1 預(yù)編譯Bootstrap版本

預(yù)編譯版本是最基本的Bootstrap組織形式，使用者可以在任意的web項(xiàng)目中直接使用。它包含壓縮(bootstrap.min.＊)與未壓縮(bootstrap.＊)兩種CSS和JS文件。字體圖標(biāo)文件來自于Glyphicons。

2.2 Bootstrap源碼

Bootstrap源碼包含了預(yù)先編譯的CSS、JavaScript和圖標(biāo)字體文件，并且還有LESS、JavaScript和文檔的源碼。

3.Bootstrap的功能模塊

Bootstrap的功能模塊從大的方面可以分為CSS、組件、JavaScript插件、定制等四個(gè)部分。各部分的功能隨著Bootstrap版本的更新在不斷的擴(kuò)展、加強(qiáng)和完善。

3.1 CSS部分

Bootstrap內(nèi)置了一套優(yōu)秀的響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式柵格(Grids)系統(tǒng)，該系統(tǒng)是在960gs的基礎(chǔ)上擴(kuò)展而來的，使用該系統(tǒng)可以輕松地構(gòu)建自己所需的布局效果。在頁面排版方面，Bootstrap已經(jīng)為人們定制好了標(biāo)題、主體文本、強(qiáng)調(diào)文本、引用文本、列表、代碼、表格、表單、按鈕、圖片等風(fēng)格樣式，使用者要做的就是引用相應(yīng)的類名即可。

3.2 組件部分

Bootstrap內(nèi)置了無數(shù)可復(fù)用的組件，這些組件實(shí)現(xiàn)的功能主要有導(dǎo)航、下拉菜單、圖標(biāo)、警告框、彈出框、進(jìn)度條、面版等多個(gè)功能。這些組件在相應(yīng)的JQuery插件作用下均具有交互式功能。開發(fā)這使用這些組件可大幅提升項(xiàng)目的交互體驗(yàn)，增強(qiáng)項(xiàng)目的吸引力。要使這些組件具備交互性也非常簡單，只需三步即可：第一步套用基本的組件HTML框架；第二步調(diào)用相應(yīng)的JQuery插件；第三步給項(xiàng)目中對應(yīng)元素啟用對應(yīng)功能。

3.3 JavaScript插件部分

Bootstrap附帶了12個(gè)JavaScript插件，這些插件都要依賴于jQuery1.10+，用于擴(kuò)展網(wǎng)站的功能，豐富用戶的體驗(yàn)，實(shí)現(xiàn)交互功能，它為Bootstrap的組件賦予“生命”。使用時(shí)可以一次性引入所有插件，也可以單個(gè)的引入到您的項(xiàng)目中，這些插件需要與CSS組件配合使用才能達(dá)到相應(yīng)的頁面效果。Bootstrap為使用者提供了幾十種插件，常見的如：過渡效果、下拉菜單、標(biāo)簽頁、折疊、輪播等。

3.4 定制部分

為了滿足更多用戶的需求，Bootstrap提供了自己獨(dú)特的定制服務(wù)，包括CSS樣式定制、組件定制以及JQuery插件定制。用戶可以自由選擇自己需要的樣式及功能，去除冗余部分，這樣可以使得自己的項(xiàng)目更加精簡，代碼更加高效。

4.Bootstrap的主要應(yīng)用

（1）設(shè)置移動(dòng)設(shè)備優(yōu)先。為了對移動(dòng)設(shè)備更好的支持，需要在＜head＞中添加viewport元數(shù)據(jù)標(biāo)簽。代碼：＜m e t a n a m e=“v i e w p o r t”content=”width=device-width,initialscale=1”＞。

（2）刪格頁面布局。也就是把頁面劃分為行與列的組合，如要布局一個(gè)1行2列的界面，則代碼如下：

＜div class=”row”＞

＜div class=”col-md-6”＞…＜/div＞

＜div class=”col-md-6”＞…＜/div＞

＜/div＞

（3）應(yīng)用內(nèi)置CSS樣式。如我們要添加一個(gè)綠色的圓角按鈕，只需要添加.btn類就行了。代碼：＜button type=”button”class=”btn btn=info”＞按鈕＜/ button＞。

5.結(jié)束語

作為一套前端開發(fā)框架，Bootstrap無疑是其中的佼佼者。它的靈活性和可擴(kuò)展性加速了WEB項(xiàng)目開發(fā)的進(jìn)程，降低了項(xiàng)目開發(fā)的成本，已經(jīng)有越來越多的開發(fā)者使用Bootstrap進(jìn)行WEB開發(fā)設(shè)計(jì)了。

[1]謝益輝，朱鈺.Bootstrap方法的歷史發(fā)展和前沿研究[J].統(tǒng)計(jì)與信息論壇，2008，23 02）∶90-96.

[2]劉偉，龍瓊，陳芳，等.Bootstrap方法的幾點(diǎn)思考[J].飛行器測控學(xué)報(bào)，2007，26 6）∶78-82.