丁 蓮 張 玲 杜 巍 成都農業科技職業學院
基于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開發變得更有效率。
Bootstrap是由著名的前端開發工程師Mark Otto和Jacob Thornton共同開發的一個WEB前端工具,2011年8月Twitter公司將其開源,目前已經成為Github上比較流行的開源項目。Bootstrap是一套基于Less的前端開發庫,提供了很多常見并常用的各種CSS和JavaScript合集,以便開發人員隨時使用。Bootstrap提供了一個可擴展的庫,庫的文檔結構良好且易于閱讀,其他人可基于這個庫構建或擴展自己的項目。如今它已經包含了幾十個組件,支持響應與非響應式WEB設計,有較強的兼容性,可在多種設備上良好的運行。它能大幅提升WEB開發者的開發效率,降低開發成本。
因為Bootstrap免費開源,使用者可以在GitHub上獲取最新的Bootstrap版本。Bootstrap提供了預編譯和源碼兩種形式的壓縮包,壓縮包內的文件按照類別存放在不同的目錄內,并且提供了壓縮與未壓縮兩種版本。
2.1 預編譯Bootstrap版本
預編譯版本是最基本的Bootstrap組織形式,使用者可以在任意的web項目中直接使用。它包含壓縮(bootstrap.min.*)與未壓縮(bootstrap.*)兩種CSS和JS文件。字體圖標文件來自于Glyphicons。
2.2 Bootstrap源碼
Bootstrap源碼包含了預先編譯的CSS、JavaScript和圖標字體文件,并且還有LESS、JavaScript和文檔的源碼。
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插件定制。用戶可以自由選擇自己需要的樣式及功能,去除冗余部分,這樣可以使得自己的項目更加精簡,代碼更加高效。
(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>。
作為一套前端開發框架,Bootstrap無疑是其中的佼佼者。它的靈活性和可擴展性加速了WEB項目開發的進程,降低了項目開發的成本,已經有越來越多的開發者使用Bootstrap進行WEB開發設計了。
[1]謝益輝,朱鈺.Bootstrap方法的歷史發展和前沿研究[J].統計與信息論壇,2008,23 02)∶90-96.
[2]劉偉,龍瓊,陳芳,等.Bootstrap方法的幾點思考[J].飛行器測控學報,2007,26 6)∶78-82.