淺析響應(yīng)式布局Bootstrap 框架

摘要：現(xiàn)如今移動(dòng)互聯(lián)網(wǎng)發(fā)展迅速，移動(dòng)終端設(shè)備在生活中占的比重逐漸加大，響應(yīng)式網(wǎng)格設(shè)計(jì)應(yīng)時(shí)出現(xiàn)。Bootstrap作為目前流行的前端開(kāi)發(fā)框架，其優(yōu)勢(shì)則是移動(dòng)終端設(shè)備優(yōu)先。本文基于響應(yīng)式web前端框架的基礎(chǔ)上，將對(duì)Bootstrap的功能、安裝環(huán)境及優(yōu)缺點(diǎn)進(jìn)行簡(jiǎn)要分析。

關(guān)鍵詞：響應(yīng)式布局；前端開(kāi)發(fā)；Bootstrap

現(xiàn)如今移動(dòng)互聯(lián)網(wǎng)飛速發(fā)展，科學(xué)技術(shù)日新月日，隨著不同種類的臺(tái)式機(jī)、筆記本、平板電腦、智能手機(jī)等設(shè)備不斷更新，網(wǎng)站在大小迥異的屏幕上會(huì)有不一樣的視覺(jué)效果，為了避免用戶用不同的設(shè)備訪問(wèn)相同的網(wǎng)站時(shí)帶來(lái)差異性，在2010年5月Ethan Marcotte提出了新的概念“響應(yīng)式web設(shè)計(jì)”，新概念的誕生解決了網(wǎng)站在多個(gè)終端的兼容問(wèn)題。

一、響應(yīng)式web設(shè)計(jì)

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

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

二、Bootstrap框架

來(lái)自Twitter的設(shè)計(jì)師Mark Otto和Jacob Thornton為了提高內(nèi)部的管理和分析能力，合作開(kāi)發(fā)一套靈活易用、可擴(kuò)展的前端框架名為Bootstrap。Bootstrap是一套由動(dòng)態(tài)CSS語(yǔ)言Less寫(xiě)成的前端框架，它為設(shè)計(jì)師提供了優(yōu)雅的CSS和HTML規(guī)范。Bootstrap推出以后一直是GitHub上的熱門(mén)開(kāi)源項(xiàng)目，許多設(shè)計(jì)師積極為此項(xiàng)目編寫(xiě)代碼，Bootstrap代碼版本進(jìn)化迅速，官方文檔質(zhì)量?jī)?yōu)雅，同時(shí)期Internet中涌出基于Bootstrap建設(shè)的網(wǎng)站數(shù)不勝數(shù)，其界面簡(jiǎn)潔清新，核心排版利落大方。NASA的MSNBC（微軟全國(guó)廣播公司）的Breaking News以及WeX5前端開(kāi)源框架等，都是基于Bootstrap源碼進(jìn)行網(wǎng)站性能優(yōu)化改編而來(lái)。

三、Bootstrap框架功能簡(jiǎn)述

（一）跨瀏覽器和設(shè)備

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

（二）Less構(gòu)建

Bootstrap的源碼是基于CSS預(yù)處理腳本Less和Sass開(kāi)發(fā)，以前的CSS樣式表傳統(tǒng)枯燥，Less的出現(xiàn)使書(shū)寫(xiě)CSS更快更靈活。

（三）Bootstrap樣式表

Bootstrap中涵蓋了CSS基本樣式，用于網(wǎng)站的字體、按鈕、表格、表單、圖片等，這些預(yù)定義樣式表可以對(duì)其字體大小、有無(wú)邊框、顏色樣式等進(jìn)行更改，設(shè)計(jì)師可以通過(guò)多種多樣的組合達(dá)到不一樣的視覺(jué)效果。

（四）響應(yīng)式12列柵格布局

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

（五）jQuery插件

出色的組件設(shè)計(jì)匹配的必定有易于擴(kuò)展的人機(jī)界面。Bootstrap為設(shè)計(jì)師提供了豐富的jQuery內(nèi)置插件，其組件可以重復(fù)使用在頁(yè)面中，適用于各種技術(shù)水平的從業(yè)者簡(jiǎn)單快捷的操作附加導(dǎo)航欄、過(guò)渡效果、折疊、提示工具、滾動(dòng)監(jiān)聽(tīng)、彈出框、警告框等。Bootstrap可以幫助設(shè)計(jì)師更為高效快捷地構(gòu)建產(chǎn)品。

四、Bootstrap安裝環(huán)境

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

預(yù)編譯版為基礎(chǔ)的Bootstrap 文件組織形式，也是較為常用的Bootstrap包，本文以預(yù)編譯版為例簡(jiǎn)述Bootstrap安裝環(huán)境。

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

<！--[if lt IE 9]>

<！[endif]-->

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

3.為Bootstrap實(shí)現(xiàn)更加完美需引入jQuery插件，代碼如下：

五、Bootstrap框架的利與弊

Bootstrap框架的優(yōu)點(diǎn)在于學(xué)習(xí)周期短，只需設(shè)計(jì)師具備 HTML和CSS的基礎(chǔ)知識(shí)即可，并且Bootstrap框架包含了功能強(qiáng)大的內(nèi)置組件，易于定制，移動(dòng)設(shè)備優(yōu)先，所有主流瀏覽器都支持可以實(shí)現(xiàn)。

Bootstrap框架因?yàn)槭峭鈬?guó)人開(kāi)發(fā)的，所以不足之處在于對(duì)中文的兼容性以及IE瀏覽器的支持有些缺陷，但是現(xiàn)在也開(kāi)發(fā)有BootstrapEd中文優(yōu)化。

【參考文獻(xiàn)】

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

[2]張聰聰.基于響應(yīng)式Web設(shè)計(jì)中用戶界面的分析與探究[D].中南民族大學(xué)，2015.

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

作者簡(jiǎn)介：李俊影，（1992.11～），吉林藝術(shù)學(xué)院2015級(jí)藝術(shù)碩士，研究方向：視覺(jué)傳達(dá)應(yīng)用研究。