基于Bootstrap的響應式網頁設計

何秀全

摘要：響應式設計已成為移動互聯時代網頁設計開發的基本要求。Bootstrap作為成熟的前端框架可極大降低開發設計人員進行響應式設計的工作量。以學校無線網絡登錄頁面響應式改造設計與實現為例，探討了Bootstrap的優勢、使用方法和技巧。

關鍵詞：Bootstrap；響應式設計；網頁設計

DOIDOI：10.11907/rjdk.171180

中圖分類號：TP319

文獻標識碼：A 文章編號：1672-7800（2017）006-0104-02

0 引言

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

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

本文通過改造一個無線網絡的登錄頁面討論使用Bootstrap進行響應式設計的優勢和方法。

1 無線網絡登錄頁改造需求分析

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

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

2 無線網絡登錄頁改造設計實現

2.1 頁面自適應改造

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

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

2.2 錯誤提示功能

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

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

2.3 在線設備查詢及注銷功能

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

3 結語

隨著移動端需求的增加，需要經常對網站進行響應式設計。通過利用成熟的前端框架，可實現以較小的代價完成頁面設計開發的前端工作，而將精力聚焦在更重要的功能實現上。Bootstrap作為業界主流的前端框架，具有功能豐富、簡單易用、可擴展性好等優勢，值得各類網站開發人員學習和研究。

參考文獻：

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

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

[3]舒后.基于Bootstrap框架的響應式網頁設計與實現[J].北京印刷學院學報，2016（4）：47-52.

[4]王少華.基于Bootstrap的響應式網頁設計與實現——以i-太極網站主頁為例[J].寧波廣播電視大學學報，2016（9）：119-122.

（責任編輯：孫 娟）