韋建波　韋龍勇

【摘 要】Bootstrap是近年來比較流行的前端開發(fā)框架，本文介紹了Bootstrap框架的發(fā)展歷史和重要特性，分析了Bootstrap框架設(shè)計(jì)的優(yōu)缺點(diǎn)，能對web前端開發(fā)人員帶來一些參考借鑒作用。

【關(guān)鍵詞】Bootstrap；前端框架；web設(shè)計(jì)

0 前言

Bootstrap是當(dāng)前比較流行的前端框架，起源于推特，該框架基于層疊樣式表（css），java腳本，以及html。上手簡單靈活，加快了web開發(fā)的速度，是web開發(fā)人員的一個(gè)重要工具，Bootstrap提供了簡潔的層疊樣式表和html規(guī)則，以及更為完善的人性化的網(wǎng)站風(fēng)格，并兼容大多數(shù)jQuery插件。

1 Bootstrap框架簡介

Bootstrap的前端開發(fā)框架是指疊樣式表（css），java腳本及html的一系列產(chǎn)品化組件的集合。開發(fā)人員利用前端開發(fā)框架來創(chuàng)建響應(yīng)式且符合用戶要求標(biāo)準(zhǔn)的網(wǎng)站，同時(shí)，在設(shè)計(jì)中能最大程度減少投入的精力，達(dá)到了簡單而一致的效果。Bootstrap 框架作為一個(gè)WEB前端工具，可以用來開發(fā)兼容谷歌，火狐，IE等多種瀏覽器且精致的頁面； 能提供多種流行簡潔的UI 組件、特有的柵格系統(tǒng)以及部分廣泛使用的腳本插件，便于應(yīng)用人員進(jìn)行調(diào)用，簡而言之，Bootstrap 框架為網(wǎng)頁設(shè)計(jì)人員提供了一個(gè)設(shè)計(jì)工具包。

Bootstrap是一種結(jié)合了HTML，CSS和JavaScript技術(shù)的前端開發(fā)框架[1]，目前歐美國家中非常流行，它具有以下重要特性：

？茺一套完整的基礎(chǔ)CSS 插件；

？茺豐富的預(yù)定義樣式表；

？茺一組基于jQuery 的JavaScript 插件集；

？茺一個(gè)兼容各種設(shè)備的柵格系統(tǒng)，尤其是對移動(dòng)設(shè)備的兼容性非常高。

2 Bootstrap框架的結(jié)構(gòu)

Bootstrap是開源免費(fèi)的，設(shè)計(jì)人員可以方便的從網(wǎng)上下載最新的版本。Bootstrap 源碼里包含預(yù)先編譯的CSS、JavaScript 和圖標(biāo)字體文件以及LESS、JavaScript 和文檔的源碼。

3 Bootstrap框架的優(yōu)缺點(diǎn)

優(yōu)點(diǎn)

（1）擴(kuò)展性強(qiáng)，能夠更好的與現(xiàn)實(shí)的web開發(fā)項(xiàng)目結(jié)合。

（2）該框架不斷適應(yīng)web技術(shù)的發(fā)展。

（3）比較成熟，在大量的項(xiàng)目中充分的使用和測試。

（4）擁有完善的文檔，使用起來更方便。

（5） Bootstrap提供了非常豐富的組件與插件，組件包含小圖標(biāo)、按鈕組、菜單導(dǎo)航、標(biāo)簽頁等等[3]，并接受定制。

（6）擴(kuò)展性強(qiáng)，兼容各種腳本插件。

（7）擁有現(xiàn)成UI組件，可以快速搭建網(wǎng)頁頁面。

（8）前端處理簡潔，在Blog系統(tǒng)搭建過程中使用方便。

（9） 當(dāng)網(wǎng)站不需要支持ie6.減少了兼容代碼的處理。

（10） Bootstrap框架為用戶提供了一套響應(yīng)式移動(dòng)設(shè)備優(yōu)先的流式柵格系統(tǒng)[2]，擁有完備的框架結(jié)構(gòu)，整體效果和諧，對谷歌，火狐，IE等瀏覽器均可支持，項(xiàng)目開發(fā)方便快捷。

缺點(diǎn)：

（1）對于有特殊需求的使用者，bootstrap框架會(huì)對其帶來較大的麻煩，需要做大量的css重寫來改善非bootstrap“風(fēng)格”的樣式，導(dǎo)致該網(wǎng)站失去使用框架的意義。

（2）會(huì)有兼容問題，對底版本的瀏覽器兼容性不太好，頁面顯得更加死板，影響用戶體驗(yàn)。

（3）js插件在導(dǎo)航頁面直接切換到相應(yīng)位置中，需要用js豐富它的內(nèi)容，否則效果像是一個(gè)錨點(diǎn)，并沒有滾動(dòng)動(dòng)畫，不能盡如人意。

（4）定制會(huì)產(chǎn)生大量代碼冗余，使用者利用css把原有的樣式覆蓋，當(dāng)修改較多時(shí)被覆蓋的代碼沒有了使用價(jià)值。

（5）Bootstrap框架設(shè)計(jì)使得HTML不再是語義及表現(xiàn)和內(nèi)容分離的，最終會(huì)導(dǎo)致一堆充斥著class的DOM元素，不遵循最佳實(shí)踐。部分開發(fā)人員會(huì)覺得相當(dāng)刺眼，因?yàn)閷U(kuò)展性，重用性和維護(hù)更是個(gè)挑戰(zhàn)。

（6）當(dāng)你突然要投入到相對較龐大的項(xiàng)目當(dāng)中 ，想要通過Twitter Bootstrappy 直接享受其所有的好處，你會(huì)發(fā)現(xiàn)它和已存在設(shè)置發(fā)生相沖突的問題，而這些問題也將對項(xiàng)目原有的HTML，層疊樣式表和Java腳本有較多的影響。于此同時(shí)，會(huì)發(fā)現(xiàn)在這個(gè)框架當(dāng)中的某些資源條件，需要通過刪除或者替換才能到達(dá)想要的效果，這當(dāng)中必須要經(jīng)過對該項(xiàng)目進(jìn)行大量的計(jì)算工作來得出。Bootstrap在使用過程中出現(xiàn)一些修復(fù)奇怪的錯(cuò)誤增加你額外的工作量是不可避免的，而這些與使用者一開始想要使用一個(gè)完整而簡潔的框架是有所違背的。

（7）若想使用Twitter Bootstap一個(gè)比較完整齊全的功能需要大量的時(shí)間，同時(shí)，你還需要考慮自身使用的市場范圍，并不是所有地區(qū)數(shù)據(jù)加載的時(shí)間限都是相同的，對于一些互聯(lián)網(wǎng)有條件限制的地區(qū)，數(shù)據(jù)傳達(dá)的速度緩慢不盡人意，因?yàn)門witter Bootstrap所包含的內(nèi)容較多，其中包括126kb的CSS和29kb的JavaScript。使用時(shí)會(huì)耗費(fèi)較大的時(shí)間來加資源。當(dāng)然，也有一些地區(qū)是相對自由的，不存在這方面的問題。雖然Twitter Bootstrap能建立具有吸引力和響應(yīng)式的網(wǎng)站，不過一些手機(jī)用戶在這塊因?yàn)榧虞d速度較慢和電量消耗較大的腳本而不能使用。

（8）不支持SASS。BootStrap使用Less構(gòu)建，原生不支持Compass和SASS。SASS是帶有一個(gè)類似于Compass的框架，使用它好像完全不需要過多的考慮。一些人建立了Compass gem的Bootstrap，但使用Less會(huì)更加方便。

（9）類似的Twitter Bootstrap的很多。由于Twitter Bootstrap比好前沿，使用者也相對較多，導(dǎo)致很多開發(fā)人員都在使用的過程中，遇到一些時(shí)間限制等問題時(shí)被迫使用了很多原有的 Bootrasp風(fēng)格，從而導(dǎo)致很多類似的Twitter Bootstrap創(chuàng)建了。在有限的時(shí)間內(nèi)，在Bootstrap框架中想要有所突破，自主創(chuàng)新很難的，往往更多的是放棄的結(jié)局。

4 結(jié)束語

Bootstrap作為一套比較流行完整前端開發(fā)框架，與眾多的其他框架相比較無疑是最受使用者歡迎的，其靈活性和可擴(kuò)展性加速了響應(yīng)式網(wǎng)頁，項(xiàng)目開發(fā)的進(jìn)程，推動(dòng)了響應(yīng)式技術(shù)的發(fā)展。本文在前端框架方面對Bootstrap 進(jìn)行了介紹，并分析了其優(yōu)缺點(diǎn)，希望對web前端框架研究以及前端開發(fā)人員能有所幫助，了解Bootstrap框架的優(yōu)缺點(diǎn)，在項(xiàng)目開發(fā)中也可以幫助開發(fā)人員應(yīng)根據(jù)具體的項(xiàng)目需求，選擇合適的開發(fā)方案。

【參考文獻(xiàn)】

[1]李金亮，李春青.基于BootStrap的WEB開發(fā)設(shè)計(jì)研究[J].中小企業(yè)管理與科技旬刊，2014，（14）：217-217

[2]舒后，熊一帆，葛雪嬌.基于Bootstrap框架的響應(yīng)式網(wǎng)頁設(shè)計(jì)與實(shí)現(xiàn)，北京印刷學(xué)院學(xué)報(bào)，2016年4月.

[3]孫靜，萬杰，李亞龍.以Bootstrap為基礎(chǔ)建立響應(yīng)式安徽省地震局網(wǎng)站[J].四川地震，2015，（03）：38-41.

[責(zé)任編輯：張濤]endprint