基于Bootstrap的響應(yīng)式網(wǎng)頁設(shè)計(jì)

何秀全

摘要：響應(yīng)式設(shè)計(jì)已成為移動互聯(lián)時代網(wǎng)頁設(shè)計(jì)開發(fā)的基本要求。Bootstrap作為成熟的前端框架可極大降低開發(fā)設(shè)計(jì)人員進(jìn)行響應(yīng)式設(shè)計(jì)的工作量。以學(xué)校無線網(wǎng)絡(luò)登錄頁面響應(yīng)式改造設(shè)計(jì)與實(shí)現(xiàn)為例，探討了Bootstrap的優(yōu)勢、使用方法和技巧。

關(guān)鍵詞：Bootstrap；響應(yīng)式設(shè)計(jì)；網(wǎng)頁設(shè)計(jì)

DOIDOI：10.11907/rjdk.171180

中圖分類號：TP319

文獻(xiàn)標(biāo)識碼：A 文章編號：1672-7800（2017）006-0104-02

0 引言

近幾年來，隨著移動互聯(lián)網(wǎng)的發(fā)展，用戶對網(wǎng)站的訪問越來越多地來自于移動設(shè)備。目前，在網(wǎng)站、信息系統(tǒng)開發(fā)中，移動端的需求分析已經(jīng)成為必不可少的環(huán)節(jié)。早期開發(fā)中，為滿足用戶的這類需求，有的開發(fā)人員根據(jù)瀏覽器的user-agent判斷設(shè)備類型、響應(yīng)頁面，顯然這需要制作、維護(hù)兩套以上的頁面。由于不同瀏覽器（或不同版本）對頁面CSS樣式和JS腳本的解釋有所不同，因此采用這種方法開發(fā)的頁面要能滿足環(huán)境或用戶需求變化所需的代價(jià)是非常高的。隨著響應(yīng)式設(shè)計(jì)理念的提出，越來越多的設(shè)計(jì)人員選擇使用響應(yīng)式設(shè)計(jì)框架，以低成本的方式實(shí)現(xiàn)頁面的不同設(shè)備自適應(yīng)顯示。然而，前端開發(fā)人員使用DIV+CSS+JS的方式實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)是非常繁雜的工作，不但需要有一定的代碼編寫能力，還要有美工功底，因此只有比較優(yōu)秀的有經(jīng)驗(yàn)的前端開發(fā)人員才能駕馭這種技能。

Bootstrap 最初是由就職于Twitter 的一個設(shè)計(jì)師和一個工程師創(chuàng)造的，目前Bootstrap 已經(jīng)成為世界上最流行的前端開發(fā)框架和開源項(xiàng)目。Bootstrap框架中包含有豐富的組件，其中包括下拉菜單、按鈕組、按鈕下拉菜單、導(dǎo)航條、面包屑、分頁、排版、縮略圖、警告對話框、進(jìn)度條等。它還自帶了一組jQuery交互插件，包括模式對話框、標(biāo)簽頁、滾動條、彈出框等，不但功能完善，而且十分精致，成為眾多jQuery項(xiàng)目的默認(rèn)設(shè)計(jì)標(biāo)準(zhǔn)。這些模塊化的組件在修改時也非常方便，只需要修改變量就可以形成自己的獨(dú)特風(fēng)格。普通網(wǎng)頁開發(fā)人員只要具備基本的CSS+DIV+JS能力，通過短時間的學(xué)習(xí)就可以上手使用Bootstrap，且開發(fā)的網(wǎng)頁可較好地兼容各類瀏覽器。可以說，通過靈活使用這套前端開發(fā)框架，可以事半功倍地達(dá)到前人難以達(dá)到的能力高度。因此，Bootstrap等成熟的框架特別適合前端開發(fā)新手或者平時主要工作不是做前端開發(fā)的開發(fā)人員。

本文通過改造一個無線網(wǎng)絡(luò)的登錄頁面討論使用Bootstrap進(jìn)行響應(yīng)式設(shè)計(jì)的優(yōu)勢和方法。

1 無線網(wǎng)絡(luò)登錄頁改造需求分析

上海外國語大學(xué)無線網(wǎng)絡(luò)使用的是Aruba的Web Portal方式認(rèn)證。用戶登錄連接好無線信號后，訪問外網(wǎng)將自動彈出登錄頁面，用戶輸入學(xué)校的統(tǒng)一身份認(rèn)證賬號，登錄成功后彈出相應(yīng)的提示頁面。由于早期無線網(wǎng)絡(luò)的使用設(shè)備是筆記本電腦，因此整套登錄頁面設(shè)計(jì)并未考慮到小屏的手機(jī)設(shè)備。隨著手機(jī)、Pad用戶的增多，登錄頁面已經(jīng)成為意見集中反映之處。

本次頁面改造的內(nèi)容主要包括3個方面：①實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)，信道登錄頁、提示頁可自適應(yīng)各類終端；②新增登錄錯誤提示，主要包括賬號密碼類錯誤和無線控制器反饋的錯誤；③可查詢用戶賬號對應(yīng)的在線終端，并可注銷登錄。學(xué)校允許一個用戶賬號可同時擁有3個設(shè)備在線，如超出則需要注銷已登錄的設(shè)備，原來未能提供用戶自助注銷的功能，此次改造需一并實(shí)現(xiàn)。

2 無線網(wǎng)絡(luò)登錄頁改造設(shè)計(jì)實(shí)現(xiàn)

2.1 頁面自適應(yīng)改造

（1）下載、配置Bootstrap及一些其它js插件。在Bootstrap中文網(wǎng)（http：//v3.bootcss.com）下載最新版的用于生產(chǎn)環(huán)境的Bootstrap。由于Bootstrap 必須要有jQuery，因此還需要下載 jQuery。配置載入下載好的Bootstrap的 CSS 文件、jQuery，代碼如下：

（2）響應(yīng)式布局實(shí)現(xiàn)。之所以能用Bootstrap實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)，主要是因?yàn)槠涮峁┝艘惶醉憫?yīng)式、移動設(shè)備優(yōu)先的流式柵格系統(tǒng)。使用該柵格類后，頁面屏幕或視口（viewport）會自動分為最多12列，通過一系列的行（row）與列（column）的組合可創(chuàng)建相應(yīng)的頁面布局，其工作原理如下：①“行（row）”必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中，以便為其賦予合適的排列（aligment）和內(nèi)補(bǔ)（padding）；②通過“行（row）”在水平方向創(chuàng)建一組“列（column）”；③內(nèi)容應(yīng)當(dāng)放置于“列（column）”內(nèi)，并且，只有“列（column）”可以作為行（row）”的直接子元素；④類似 .row 和 .col-xs-4 這種預(yù)定義的類，可以用來快速創(chuàng)建柵格布局；⑤如果一“行（row）”中包含的“列（column）”大于 12，多余的“列（column）”所在的元素將被作為一個整體另起一行排列；⑥柵格類適用于與屏幕寬度大于或等于分界點(diǎn)大小的設(shè)備，并且針對小屏幕設(shè)備覆蓋柵格類。因此，在元素上應(yīng)用任何 .col-md-* 柵格類適用于與屏幕寬度大于或等于分界點(diǎn)大小的設(shè)備，并且針對小屏幕設(shè)備覆蓋柵格類。 因此，在元素上應(yīng)用任何 .col-lg-*，也不影響大屏幕設(shè)備。

2.2 錯誤提示功能

（1）賬號錯誤。包括密碼錯誤、用戶名不存在兩類。在用戶輸入完用戶名密碼，點(diǎn)擊提交后，通過jQuery的Ajax提交到賬號有效性驗(yàn)證頁面，根據(jù)錯誤類型在輸入框下方進(jìn)行相應(yīng)提示。

（2）無線控制器反饋的錯誤。包括違反規(guī)則錯誤（如已在線終端超出、設(shè)備被拒絕）、其它無法認(rèn)證的錯誤等，在頁面進(jìn)行錯誤提示。

2.3 在線設(shè)備查詢及注銷功能

根據(jù)Aruba提供的API文檔，通過數(shù)據(jù)庫查詢操作，得到用戶名對應(yīng)的登錄設(shè)備信息，設(shè)計(jì)在線列表頁面。利用注銷操作API，在每個在線設(shè)備后面提供注銷操作功能。

3 結(jié)語

隨著移動端需求的增加，需要經(jīng)常對網(wǎng)站進(jìn)行響應(yīng)式設(shè)計(jì)。通過利用成熟的前端框架，可實(shí)現(xiàn)以較小的代價(jià)完成頁面設(shè)計(jì)開發(fā)的前端工作，而將精力聚焦在更重要的功能實(shí)現(xiàn)上。Bootstrap作為業(yè)界主流的前端框架，具有功能豐富、簡單易用、可擴(kuò)展性好等優(yōu)勢，值得各類網(wǎng)站開發(fā)人員學(xué)習(xí)和研究。

參考文獻(xiàn)：

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

[2]陳員義，李藝志.基于Bootstrap響應(yīng)式Web前端研究[J].福建電腦，2015（12）：72-73.

[3]舒后.基于Bootstrap框架的響應(yīng)式網(wǎng)頁設(shè)計(jì)與實(shí)現(xiàn)[J].北京印刷學(xué)院學(xué)報(bào)，2016（4）：47-52.

[4]王少華.基于Bootstrap的響應(yīng)式網(wǎng)頁設(shè)計(jì)與實(shí)現(xiàn)——以i-太極網(wǎng)站主頁為例[J].寧波廣播電視大學(xué)學(xué)報(bào)，2016（9）：119-122.

（責(zé)任編輯：孫 娟）