淺議bootstrap 框架優缺點

韋建波　韋龍勇

【摘 要】Bootstrap是近年來比較流行的前端開發框架，本文介紹了Bootstrap框架的發展歷史和重要特性，分析了Bootstrap框架設計的優缺點，能對web前端開發人員帶來一些參考借鑒作用。

【關鍵詞】Bootstrap；前端框架；web設計

0 前言

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

1 Bootstrap框架簡介

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

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

？茺一套完整的基礎CSS 插件；

？茺豐富的預定義樣式表；

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

？茺一個兼容各種設備的柵格系統，尤其是對移動設備的兼容性非常高。

2 Bootstrap框架的結構

Bootstrap是開源免費的，設計人員可以方便的從網上下載最新的版本。Bootstrap 源碼里包含預先編譯的CSS、JavaScript 和圖標字體文件以及LESS、JavaScript 和文檔的源碼。

3 Bootstrap框架的優缺點

優點

（1）擴展性強，能夠更好的與現實的web開發項目結合。

（2）該框架不斷適應web技術的發展。

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

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

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

（6）擴展性強，兼容各種腳本插件。

（7）擁有現成UI組件，可以快速搭建網頁頁面。

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

（9） 當網站不需要支持ie6.減少了兼容代碼的處理。

（10） Bootstrap框架為用戶提供了一套響應式移動設備優先的流式柵格系統[2]，擁有完備的框架結構，整體效果和諧，對谷歌，火狐，IE等瀏覽器均可支持，項目開發方便快捷。

缺點：

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

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

（3）js插件在導航頁面直接切換到相應位置中，需要用js豐富它的內容，否則效果像是一個錨點，并沒有滾動動畫，不能盡如人意。

（4）定制會產生大量代碼冗余，使用者利用css把原有的樣式覆蓋，當修改較多時被覆蓋的代碼沒有了使用價值。

（5）Bootstrap框架設計使得HTML不再是語義及表現和內容分離的，最終會導致一堆充斥著class的DOM元素，不遵循最佳實踐。部分開發人員會覺得相當刺眼，因為對擴展性，重用性和維護更是個挑戰。

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

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

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

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

4 結束語

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

【參考文獻】

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

[2]舒后，熊一帆，葛雪嬌.基于Bootstrap框架的響應式網頁設計與實現，北京印刷學院學報，2016年4月.

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

[責任編輯：張濤]endprint