Bootstrap框架在響應(yīng)式Web設(shè)計中的應(yīng)用分析

廖詩雨

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

關(guān)鍵詞：Bootstrap框架;響應(yīng)式Web設(shè)計;框架應(yīng)用

中圖分類號：TP311? ? ? 文獻(xiàn)標(biāo)識碼：A

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

1 背景

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

2 Bootstrap框架的關(guān)鍵特性

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

2.1 具備高靈活性的響應(yīng)式柵格系統(tǒng)

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

2.2 基本CSS樣式

網(wǎng)頁當(dāng)中常見的元素包括標(biāo)題文字、基礎(chǔ)排版、代碼、圖片、圖標(biāo)、表單、按鈕及表格等，在響應(yīng)式網(wǎng)頁中也是一樣。Bootstrap框架本身具有結(jié)構(gòu)簡潔、數(shù)量龐大的基本CSS樣式，因此能夠?qū)@些因素按照實(shí)際需求進(jìn)行定義，并通過添加可擴(kuò)展class的方式強(qiáng)化其顯示效果。以圖片（img）元素為例，Bootstrap框架中的基本CSS樣式能夠通過添加的class幫助圖片實(shí)現(xiàn)變成圓形、添加圓角以及提供縮略圖的功能，此外還可通過添加標(biāo)簽的方式使圖片支持響應(yīng)式設(shè)計。除了基本的圖片樣式之外，開發(fā)人員還能夠通過添加自己定義的class樣式，進(jìn)一步豐富圖片的展示效果。

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

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

3 響應(yīng)式Web設(shè)計

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

4 應(yīng)用Bootstrap框架的響應(yīng)式Web設(shè)計實(shí)現(xiàn)案例

4.1 案例設(shè)計規(guī)劃

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