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

廖詩(shī)雨

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

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

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

文章編號(hào)：1009-3044（2021）25-0144-02

1 背景

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

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

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

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

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

2.2 基本CSS樣式

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

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

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

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

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

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

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

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