基于BootStrap的WEB前端開發應用研究

丁 蓮 張 玲 杜 巍 成都農業科技職業學院

基于BootStrap的WEB前端開發應用研究

丁 蓮 張 玲 杜 巍 成都農業科技職業學院

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

Bootstrap；WEB前端開發；CSS

引言

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

1.什么是Bootstrap？

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

2.Bootstrap的基本結構

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

2.1 預編譯Bootstrap版本

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

2.2 Bootstrap源碼

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

3.Bootstrap的功能模塊

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

3.1 CSS部分

Bootstrap內置了一套優秀的響應式、移動設備優先的流式柵格(Grids)系統，該系統是在960gs的基礎上擴展而來的，使用該系統可以輕松地構建自己所需的布局效果。在頁面排版方面，Bootstrap已經為人們定制好了標題、主體文本、強調文本、引用文本、列表、代碼、表格、表單、按鈕、圖片等風格樣式，使用者要做的就是引用相應的類名即可。

3.2 組件部分

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

3.3 JavaScript插件部分

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

3.4 定制部分

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

4.Bootstrap的主要應用

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

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

＜div class=”row”＞

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

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

＜/div＞

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

5.結束語

作為一套前端開發框架，Bootstrap無疑是其中的佼佼者。它的靈活性和可擴展性加速了WEB項目開發的進程，降低了項目開發的成本，已經有越來越多的開發者使用Bootstrap進行WEB開發設計了。

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

[2]劉偉，龍瓊，陳芳，等.Bootstrap方法的幾點思考[J].飛行器測控學報，2007，26 6）∶78-82.