Bootstrap框架在響應式Web設計中的應用分析

廖詩雨

摘要：Bootstrap框架常被用于響應式網頁設計，是一款優秀的前端開發框架。Bootstrap框架以LESS為基礎，應用了包括HTML、CSS、Javascript、jQuery等多種技術來實現移動端響應式Web的開發，其本身在簡潔靈活的同時又具備了強大的可拓展性，因而能夠在響應式Web設計中得到充分應用?；诖?，該文將圍繞Bootstrap框架在響應式Web設計中的應用展開分析。

關鍵詞：Bootstrap框架;響應式Web設計;框架應用

中圖分類號：TP311? ? ? 文獻標識碼：A

文章編號：1009-3044（2021）25-0144-02

1 背景

響應式Web設計誕生自網站設計與開發過程中，本身具有結合用戶行為及設備環境調整內容布局的作用。通常情況下響應式Web設計在內容上包括彈性圖片、流體柵格及媒體查詢等，因此響應式Web設計在移動智能終端中的應用較為廣泛。結合用戶當前應用的設備來看，設備環境主要包括屏幕尺寸、系統平臺及屏幕定向等內容，而響應式Web設計則需要讓頁面根據這些環境的不同來自行切換不同的分辨率，進而為用戶提供流暢舒適的使用體驗。這些功能的實現以及細節的調整則需要在充分應用Bootstrap框架的前提下執行。

2 Bootstrap框架的關鍵特性

移動智能終端的大范圍應用使得響應式Web設計、Web頁面的人性化處理及用戶體驗受重視程度越來越高，并以此催生出各種類型的前端框架。在為數眾多的前端框架中，Bootstrap框架以其內置的豐富樣式、能夠使用大量插件與合集的強拓展性、代碼表現出的高簡潔程度，而受到廣大前端開發人員的歡迎與推廣[1]。相比現行其他的前端開發框架，Bootstrap框架的關鍵特性主要表現在以下幾方面：

2.1 具備高靈活性的響應式柵格系統

Bootstrap框架中具有一個傾向移動終端且具備高靈活性水準的響應式柵格系統，在CSS媒體查詢技術的支持下，Web頁面布局會按照終端設備屏幕大小進行自適應與調整。對于整個Bootstrap框架而言，柵格系統不僅是其實現響應式設計的核心，也是響應式設計的具體表現。一般此柵格系統會將窗口容器劃分為完全相同的十二個部分，并以此為基礎結合頁面布局的實際需求調整頁面元素跨越的列數。響應式柵格系統的實現原理是從定義容器開始的，在容器中靈活創建若干行并調整其對齊方式與內邊距，之后再在行內創建水平方向的列元素以放置網頁內容[2]。由此可以看出，響應式柵格系統在定義上具有層層布局的特征，而在加入其他相關的插件之后，還能有效實現靈活布局列寬、列嵌套、列偏移等功能。

2.2 基本CSS樣式

網頁當中常見的元素包括標題文字、基礎排版、代碼、圖片、圖標、表單、按鈕及表格等，在響應式網頁中也是一樣。Bootstrap框架本身具有結構簡潔、數量龐大的基本CSS樣式，因此能夠對這些因素按照實際需求進行定義，并通過添加可擴展class的方式強化其顯示效果。以圖片（img）元素為例，Bootstrap框架中的基本CSS樣式能夠通過添加的class幫助圖片實現變成圓形、添加圓角以及提供縮略圖的功能，此外還可通過添加標簽的方式使圖片支持響應式設計。除了基本的圖片樣式之外，開發人員還能夠通過添加自己定義的class樣式，進一步豐富圖片的展示效果。

在Bootstrap的功能支持下，基本CSS樣式能夠獲得形態各異、數量豐富的插件與組件，因此能夠作用于圖像、導航、按鈕組、圖標、面板、輸入框及下拉菜單的創建。由于Bootstrap具備的插件相互之間具有很強的獨立性，因此無論是采用一次性導入或是單獨導入的方式導入到頁面中，相互之間同樣不會產生影響[3]。但由于這些插件是基于jQuery運行的，因此在向頁面導入任何插件之前必須先將jQuery引入插件，以確保插件的正常運行。

不同Web頁面的表現風格存在明顯差異，這也意味著僅靠Bootstrap提供的基礎樣式及模板很多時候不能滿足實際需求，因此Bootstrap額外增加了定制服務，能使開發人員根據頁面的實際需求對包括CSS樣式表、jQuery插件及組件等進行自定義。其方法多為直接添加新的樣式表并對組件及插件進行修改，而修改方法也具有很強的靈活性以及各自的優勢。

3 響應式Web設計

響應式Web設計可簡單理解為以響應式設計的理念設計網頁頁面，其目的是為了滿足用戶在不同設備上的使用需求。主要內容包括根據設備的尺寸、系統、分辨率對網頁頁面進行設計，并使網頁能夠根據以上內容自發進行調節，同時還要為用戶提供手動控制網頁縮放的功能，進而使用戶能夠獲得良好的使用體驗。響應式網頁設計的核心理念在于充分考量移動終端，并以此為基礎不斷提升設計效果。因此在進行頁面研發設計的過程中，會將各類型不同系統的移動終端性能作為首要考慮要素，在屏幕分辨率上也區分了不同的規格，通過對頁面前端設計進行深層次的開發研究，使之能夠適用于不同移動終端在頁面布局上的需求，進而提升網頁設計開發的效率及應用效果，為用戶提供更高層次的使用體驗。在移動終端頁面布局的顯示效果得到優先考慮與充分滿足的基礎上，以及小尺寸屏幕頁面布局顯示效果得到滿足的前提下，響應式網頁設計會傾向于向更大尺寸屏幕頁面布局顯示效果優化的方向發展。由于需要在小尺寸屏幕內充分顯示出頁面設計過程中應當顯示出的所有內容，因此會按照頁面的布局、樣式、分類對不同內容進行一定程度的簡約化處理，這種簡約化會隨著屏幕尺寸增加而逐步遞減，因此能夠在不改變頁面顯示內容的前提下有效實現頁面顯示效果的提升[4]。

4 應用Bootstrap框架的響應式Web設計實現案例

4.1 案例設計規劃

此次所應用的案例以移動應用開發專業介紹網站的外觀設計為主，其外觀設計需要同時考慮到前端、后臺、外在以及內在的需求，因此在對主頁面進行規劃的過程中將原本多余的元素予以刪除，并結合頁面內容與功能兩方面模塊的實際使用需求及表達需求進行了改良，使頁面元素被歸納為頭部、頁腳兩個導航區及內容區三部分。頭部導航區包含了logo、搜索框及主菜單等索引標識功能，內容區則用于展示專業的主要內容，而在頁腳導航區的設計上則以簡單的文字圖片組合加以填充。在美術設計上考慮到響應式Web設計需要以優先支持移動設備為原則，因此Web設計會給PC端或其他非移動端的使用及視覺體驗造成一定的不良影響[5]。但考慮到瀏覽此頁面的終端多以非移動端設備為主，因此美術設計依然優先沿用了電腦版本的設計，并以此為基礎加入了針對移動端設備的調整。