淺析響應式布局Bootstrap 框架

摘要：現如今移動互聯網發展迅速，移動終端設備在生活中占的比重逐漸加大，響應式網格設計應時出現。Bootstrap作為目前流行的前端開發框架，其優勢則是移動終端設備優先。本文基于響應式web前端框架的基礎上，將對Bootstrap的功能、安裝環境及優缺點進行簡要分析。

關鍵詞：響應式布局；前端開發；Bootstrap

現如今移動互聯網飛速發展，科學技術日新月日，隨著不同種類的臺式機、筆記本、平板電腦、智能手機等設備不斷更新，網站在大小迥異的屏幕上會有不一樣的視覺效果，為了避免用戶用不同的設備訪問相同的網站時帶來差異性，在2010年5月Ethan Marcotte提出了新的概念“響應式web設計”，新概念的誕生解決了網站在多個終端的兼容問題。

一、響應式web設計

響應式web設計即響應式布局。Ethan Marcotte曾在《Responsive Web Design ·An A List Apart Article》中寫道“響應式真正的設計方法不僅是要根據可視區域大小而改變網頁的布局，并且還要從整體上顛覆當下的網頁設計方法，它是針對多種終端設備的網頁內容進行完美布局的一種顯示機制。” 隨著各種終端設備的快速發展，網站需適應不同分辨率、不同平臺顯得尤為重要，響應式布局可以做到為不同的終端用戶提供更加舒適的潔面以及更好的用戶體驗。

響應式布局的實現我們可以通過CSS3中的Media Query，即媒介查詢。媒體查詢可以使CSS更精確的實現于不同的媒體類型或者同一媒體的不同條件（如下圖所示），或者我們可以借助各種的前端框架來實現響應式布局如：Bootstrap、Less Framework、Flurid等。

二、Bootstrap框架

來自Twitter的設計師Mark Otto和Jacob Thornton為了提高內部的管理和分析能力，合作開發一套靈活易用、可擴展的前端框架名為Bootstrap。Bootstrap是一套由動態CSS語言Less寫成的前端框架，它為設計師提供了優雅的CSS和HTML規范。Bootstrap推出以后一直是GitHub上的熱門開源項目，許多設計師積極為此項目編寫代碼，Bootstrap代碼版本進化迅速，官方文檔質量優雅，同時期Internet中涌出基于Bootstrap建設的網站數不勝數，其界面簡潔清新，核心排版利落大方。NASA的MSNBC（微軟全國廣播公司）的Breaking News以及WeX5前端開源框架等，都是基于Bootstrap源碼進行網站性能優化改編而來。

三、Bootstrap框架功能簡述

（一）跨瀏覽器和設備

Bootstrap的最初設想是只實現跨瀏覽器，但是從Bootstrap2開始，通過CSS媒體查詢（Media Query）能夠提供對所有主流瀏覽器、對各種移動終端設備如平板電腦、智能手機等的支持，實現完整響應式特性，并且所有組件都可以根據不同的分辨率和設備靈活縮放，從而達到網站一致性的用戶體驗的目的。

（二）Less構建

Bootstrap的源碼是基于CSS預處理腳本Less和Sass開發，以前的CSS樣式表傳統枯燥，Less的出現使書寫CSS更快更靈活。

（三）Bootstrap樣式表

Bootstrap中涵蓋了CSS基本樣式，用于網站的字體、按鈕、表格、表單、圖片等，這些預定義樣式表可以對其字體大小、有無邊框、顏色樣式等進行更改，設計師可以通過多種多樣的組合達到不一樣的視覺效果。

（四）響應式12列柵格布局

Bootstrap為用戶設計了一套響應式、移動終端設備優先的流式柵格系統，跟隨不同分辨率的屏幕尺寸變化，系統會自動分為12列，在小屏幕手機設備（<768px）、下小屏幕平板設備（≥768px）、中等屏幕電腦（≥992px）、大屏幕電腦（≥1200px）四種情況下，其樣式為xs、sm、md、lg。設計師可以用這些樣式在自定義樣式或者不同插件中設置。

（五）jQuery插件

出色的組件設計匹配的必定有易于擴展的人機界面。Bootstrap為設計師提供了豐富的jQuery內置插件，其組件可以重復使用在頁面中，適用于各種技術水平的從業者簡單快捷的操作附加導航欄、過渡效果、折疊、提示工具、滾動監聽、彈出框、警告框等。Bootstrap可以幫助設計師更為高效快捷地構建產品。

四、Bootstrap安裝環境

網站中若想使用Bootstrap框架需到相關網站下載最新版的Bootstrap包，Bootstrap 提供兩種不同形式的壓縮包（如下圖所示）。

預編譯版為基礎的Bootstrap 文件組織形式，也是較為常用的Bootstrap包，本文以預編譯版為例簡述Bootstrap安裝環境。

1.為使Bootstrap兼容更多瀏覽器如IE9以下，需在HTML文件中添加代碼如下：

<！--[if lt IE 9]>

<！[endif]-->

2.載入解壓過后的Bootstrap CSS文件，代碼如下：

3.為Bootstrap實現更加完美需引入jQuery插件，代碼如下：

五、Bootstrap框架的利與弊

Bootstrap框架的優點在于學習周期短，只需設計師具備 HTML和CSS的基礎知識即可，并且Bootstrap框架包含了功能強大的內置組件，易于定制，移動設備優先，所有主流瀏覽器都支持可以實現。

Bootstrap框架因為是外國人開發的，所以不足之處在于對中文的兼容性以及IE瀏覽器的支持有些缺陷，但是現在也開發有BootstrapEd中文優化。

【參考文獻】

[1]賈英霞.淺談Bootstrap制作響應式網站布局[J].福建電腦，2015，（08）：122-123.

[2]張聰聰.基于響應式Web設計中用戶界面的分析與探究[D].中南民族大學，2015.

[3]RUNOOB.COM[EB/OL].http：//www.runoob.com/.

作者簡介：李俊影，（1992.11～），吉林藝術學院2015級藝術碩士，研究方向：視覺傳達應用研究。