基于Bootstrap框架的響應式網頁設計與實現

楊凱華，劉 勇

（甘肅省科學技術情報研究所，甘肅 蘭州 730000）

得益于互聯網技術及信息技術的高速發展，各類智能終端產品的更新速率大幅度提升，在功能及使用便捷性上也變得全面多樣，5G網絡的大面積覆蓋更是使得人們越發習慣于直接使用手機上網。然而目前手機屏幕的規格并不統一，因此不同尺寸及分辨率下瀏覽網頁，產生的視覺效果也不盡相同，這就意味著網頁上的資訊與圖片內容需要能夠按照手機屏幕尺寸自動適配，來為用戶提供更好的使用體驗。關于如何使網頁在不同尺寸規格的手機屏幕上均能得到完美呈現，最初是由設計者結合各種尺寸進行設計及調整，然而隨著終端尺寸規格的持續演化，這種做法勢必造成龐大的工作量及極其繁瑣的維護工作，因此需要應用Bootstrap框架來解決能與手機屏幕規格自適配的響應式網頁這一問題。

1 Bootstrap框架的功能特性

Bootstrap框架含有一整套直觀的網頁設計工具包，是一種基于HTML、CSS、JavaScript形成的框架，而除了工具包之外其框架中還囊括大量的通用UI組件、柵格系統及插件等，因此該框架能夠為網頁開發提供完備的功能支持，同樣也是因為這個原因，Bootstrap框架從出現之后就受到廣泛歡迎。目前的Bootstrap框架表現出以下幾方面特性。

（1）具有完整的基礎CSS插件。

（2）具有豐富的預定義樣式表。

（3）擁有一組基于jQuery的JavaScript插件集合。

（4）擁有一個非常靈活的響應式柵格系統，同時還能為移動設備提供高優先級功能支持。

Bootstrap框架的豐富組件囊括了網頁開發所必備的各項基礎元素，能夠直接搭建起一個未經美化但擁有完備功能的網站，且各類功能均具有高水準的精細化程度。Bootstrap框架下的所有組件修改難度也相對較低，僅通過對變量的調整就能形成自身的風格。由于該框架是基于移動設備有限，因此在框架內核中融入了移動設備友好的理念，這就意味著基于Bootstrap框架開發的網頁會根據手機屏幕的尺寸自行調整網頁大小，并通過禁用相關程序控制/關閉縮放功能，為用戶提供更具沉浸感的使用體驗。

此外Bootstrap框架還配備了對應的流式柵格系統，這是一套具有響應式功能并以移動設備為優先的流式柵格系統，最多可滿足12列內容的呈現需求，且可隨屏幕或視口尺寸變化進行自適配。在具體的內容上，該柵格系統包含了易于使用的預定義類及附屬功能模塊，由此帶來的優勢是該系統可進一步詮釋具體語義內容，并在詮釋的基礎上形成對應的布局。該柵格系統的頁面創建是通過一系列行（row）、列（column）的規范性組合完成的，由于布局已經預先創建完成，因此設計者僅需要填入具體的網頁內容即可。但需要注意的是，“行”必須包含在固定寬度或100%寬度中，以保證排列及內補的規范性，因此通常會在“行”的水平方向創建一組“列”，而網頁中的具體內容則置放在“列”中，并通過指定具體的值（1～12）來確定其跨越范圍，一旦超過指定值，則多出來的“列”會另起一行自行排列。

2 響應式網頁設計的概念及設計要求

響應式網頁的概念由伊桑·馬克特提出，指的是可根據終端屏幕尺寸實現網頁版面結構、內容、元素規格樣式的自適配，其開發技術優勢集中體現在模塊化設計及更低的代碼重組難度，意味著不需要再針對屏幕尺寸編寫同樣的網頁內容，進而顯著減少開發所需的時間、精力及成本，且能夠使網頁適應不同設備的不同尺寸屏幕。這意味著以相應技術開發出的響應式網頁能夠同時支持不同類型及規格終端的支持。

在響應式網頁的概念出現之前，傳統網頁在表現形式上是固定的，已經確定好的網頁內容不會結合外部狀況自行調整，這就導致網頁的呈現效果存在很強局限性。響應式網頁的出現就很好地解決了這一問題，這類型網頁在設計時應用了流線型設計理念，主要是按百分比控制網頁中不同元素的寬度，因此在便攜式終端上的呈現多表現出瀑布狀的特征：所有元素會自發按照豎直方向進行分配排列，并通過自動調整比例獲取最佳的展示效果。響應式網頁的概念很好地滿足了移動用戶的瀏覽需求，其導航條被設計在更便于操作的位置，標題則被插入網頁內容區域，通過合理的比例調整，使得網頁在縱向呈現時能夠布滿屏幕，但又不會顯得擁擠。

3 基于Bootstrap框架的響應式網頁設計實現要求與方法

3.1 Bootstrap框架下響應式網頁的基礎設計要求實現

以某官網為例，該單位已擁有只在電腦端顯示的網站，需要以此為藍本設計用于可同時兼容手機訪問的網站。單位對網站的外在、內在、前端及后端均有相應要求，結合其各方面需求來看，響應式網頁設計能夠完美契合其網站設計需求。在網頁設計規劃中首先仔細查閱了該單位原本的網站，刪除了該企業原本網站中多余的呈現元素（兩側的滾動廣告、功能區的留白等），重新對不同功能分區模塊的呈現比重進行設計改良，并優化了網頁內容在手機屏幕上的分布狀況。

考慮到響應式網頁的設計需遵循移動終端優先的原則，在網頁呈現時采用了縱向呈現策略，并以此為基礎調整不同功能區在手機屏幕上的分布狀況，后續設計中進行了溝通并加以調整，網站中的大圖采取淡化形式以背景呈現，增加有效互動內容在屏幕中的利用率；此外企業對功能內容設計的模塊同樣存有其他看法，希望不同功能區塊中能夠呈現出該分支下的優秀資訊內容，采用縱向分布的策略，由單一模塊占據大部分屏幕集中呈現，但每一模塊在縱向長度上加以控制，僅呈現5～7條優秀內容，繼續上劃可進入下一模塊，在與企業深入交流最終達成一致結果的呈現內容如圖1所示。

圖1 該企業手機端網頁最終設計稿

后續執行的HTML結構設計中應用了Bootstrap框架，為了應用響應式網頁設計，首先需要創建一個CSS，以適應各種設備大小的樣式。一旦頁面在特定的設備上加載，該頁面上使用了各種字體和 Web 開發技術，比如媒體查詢。在這種情況下會以明確設備視口大小為基礎，在此基礎上根據設備要求加載特定的樣式。由于Bootstrap框架中應用了為數眾多的HTML5屬性及CSS3樣式，因此基于響應式網頁與Bootstrap框架標準制作的頁面布局結構對應部分代碼如下（并在網站所有頁面設計中參考了如下代碼進行格式設計）：

＜!DOCTYPE html＞

＜html＞

＜head＞

＜meta charset="utf-8"＞

＜title＞＜/title＞

＜link rel="stylesheet" href="css/bootstrap.css"＞

＜/head＞

＜body＞

＜/body＞

＜/html＞

3.2 響應式網頁設計中移動設備優先準則的實現

出于優化工作效率的考量，在Bootstrap2中是通過針對關鍵內容進行添加移動設備友好樣式實現的，之后出現的Bootstrap3則對整個框架進行了重寫處理，使之能夠在一開始就為移動設備提供強有力的支持，并使這種對移動設備友好的理念完全滲透到框架內核中，因此突破了部分僅針對移動設備加以優化的樣式局限。但以此為基礎進行的網頁調整整體基于縮放，因此可能出現文字縮放比例過小導致閱讀困難，影響用戶的訪問體驗。為解決這一問題，需要通過設置meta標簽的viewport屬性控制縮放程度，以便手機在加載過程中能盡量以原始比例呈現網頁內容，這一功能同樣是可逆的，且可從手機的瀏覽器中進行操作，原理是將視口（viewport）設置meta屬性為user-saclable=no，來實現縮放功能的禁用，完成禁用之后用戶只需要滾動屏幕，就可在訪問網頁過程中獲得高度接近原生應用的訪問體驗。

另外需要重視的是，以上功能的實現會涉及到布局容器，Bootstrap框架下的容器名為.container，能實現對網頁頁面內容及柵格系統的兼容，而Bootstrap為該容器提供了.container類與.container-fluid類兩種類型，但這兩種容器不支持彼此的相互嵌套。其中.container類容器常用于固定頁面寬度及為響應式布局提供支持。

3.3 響應式網頁設計媒體查詢功能的實現

媒體查詢在響應式網頁設計中至關重要，一度被認為是設計響應式網頁的核心要素。通過在網頁中植入傳感器程序收集一段時間（兩個月）內不同終端登錄該企業官網的終端類型信息，發現常用的終端包括平板、手機及電腦三種（頻次、數量按從多到少排列）。因此在該部分采用Less文件中媒體查詢以完成關鍵分界點閾值的創建。在應用了Bootstrap框架的前提下，發現框架中對不同尺寸屏幕規格有如下定義：

超小屏幕手機設備（768 px以下）；

小屏幕平板設備（768～992 px）；

中等屏幕設備（992～1 200 px）；

大屏幕設備（1 200 px以上）。

不同規格尺寸屏幕在Bootstrap框架中的前綴分別為xs、sm、md、lg，且由于Bootstrap框架中將超小屏幕默認為基礎配置，不需要額外設置媒體查詢代碼。

結合上述內容來看，Bootstrap框架相比其他框架的優勢，在于其框架中為響應式網頁設計中的媒體查詢提供了對應的查詢代碼片段及其他大量代碼片段，因此在應用Bootstrap框架設計響應式頁面布局時，開發者僅僅需要從框架中獲取合適的代碼直接插入即可，免去了重新根據不同屏幕調整編碼的時間及其他成本支出。

3.4 響應式網頁設計的流式布局范式

流式布局是響應式網頁設計中的關鍵內容，也是直接影響網頁最終在不同終端呈現效果的核心元素。該種布局方式的優勢在于使網頁中所有元素具有浮動特征，這樣一來若屏幕寬度無法完全容納某一元素，整個元素將自行浮動至頁面下方顯示（也可調整至其他位置），從而為用戶提供更理想的訪問體驗。在網站設計中需要呈現出大量不同內容及規格的圖片，這就意味著需要對這些圖片予以彈性圖片設計，并合理調整網頁中的布局結構，以保障圖片的呈現效果及確保圖片呈現不會與其他內容及網站整體呈現效果產生沖突。從這一點上來看，布局結構直接影響到響應式網頁設計是否能夠順利完成。

結合響應式設計的設計理念來看，頁面設計完成后的整體布局會結合終端實際屏幕大小自適應，其自適應的內容也包括圖片、字號及各類功能分區，因此可采用彈性化的設計策略，使最終成品能夠支持不同移動設備的呈現需求。在此應用流式布局能夠確保所有元素均得到合理的定位及布局，實際設計時則需要應用Bootstrap框架下的流式柵格系統，以完成響應式設計下流式布局的設計需求。

4 結語

基于Bootstrap框架設計的響應式網頁在不同終端上均能夠呈現出理想的展示效果，并結合不同環境下用戶的使用功能需求及傾向調整頁面狀態與布局，甚至可以根據用戶設備內配置的重力儀識別設備擺放方式，重新調整呈現策略。這就為網頁在不同設備上的呈現提供了完備的保障，有效免除了設計人員針對不同尺寸屏幕進行的重復性網頁設計，在效率、資源、成本上均有著不俗的表現。