基于Bootstrap的響應(yīng)式餐飲網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)

摘要：文章介紹了響應(yīng)式網(wǎng)頁設(shè)計(jì)和Bootstrap框架的相關(guān)理論，并以餐飲網(wǎng)站為例詳細(xì)闡述了使用Bootstrap開發(fā)響應(yīng)式網(wǎng)站的方法和步驟。針對(duì)banner圖片加載問題，文章提出了一種通過監(jiān)聽瀏覽器resize事件動(dòng)態(tài)加載的優(yōu)化方法，實(shí)驗(yàn)表明該方法能根據(jù)不同分辨率動(dòng)態(tài)加載所需banner圖片，提升了用戶體驗(yàn)。通過以上優(yōu)化，以期為構(gòu)建高適用性、代碼簡潔、用戶友好的響應(yīng)式網(wǎng)頁設(shè)計(jì)提供參考。

關(guān)鍵詞：響應(yīng)式;Bootstrap;餐飲

中圖分類號(hào)：TP393.092 ? ? ?文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：2096-4706（2021）07-0074-05

Design and Implementation of Responsive Catering Website Based on Bootstrap

JIANG Jialong

（Information Technology Center，Guangxi Vocational College of Technology and Business，Nanning? 530008，China）

Abstract：This paper introduces the relevant theories of responsive webpage design and Bootstrap framework，and takes catering website as an example to elaborate the methods and steps of developing responsive website using Bootstrap. Aiming at the problem of banner picture loading，this paper proposes an optimization method of dynamic loading by listening to browser resize events. Experiments show that this method can dynamically load the required banner pictures according to different resolutions and improve the user experience. Through the above optimization，it is expected to provide reference for constructing responsive webpage design with high applicability，concise code and user-friendly.

Keywords：responsive;Bootstrap;catering

收稿日期：2021-02-25

0? 引? 言

目前我國移動(dòng)端設(shè)備數(shù)量已遠(yuǎn)超PC端，各終端設(shè)備的操作系統(tǒng)、顯示分辨率和用戶操作行為習(xí)慣也各不相同，而傳統(tǒng)的網(wǎng)站布局和樣式直接統(tǒng)一在各終端時(shí)顯示效果將大打折扣，構(gòu)建能夠兼容多樣化終端需求的響應(yīng)式網(wǎng)站就成為一種必然。2011年Twitter公司發(fā)布了Bootstrap框架，該框架憑借其靈活的響應(yīng)式柵格系統(tǒng)、兼容性強(qiáng)、組件豐富易擴(kuò)展等特點(diǎn)，迅速成為前端設(shè)計(jì)者的不二選擇。王琴[1]利用Bootstrap框架構(gòu)建了仰恩大學(xué)門戶網(wǎng)站，朱曉[2]、趙璐[3]基于Bootstrap分別設(shè)計(jì)了響應(yīng)式圖書管理系統(tǒng)、移動(dòng)端學(xué)生后勤系統(tǒng)，原方亮[4]利用Bootstrap在響應(yīng)式企業(yè)網(wǎng)站設(shè)計(jì)中取得了良好效果。本文在以上案例基礎(chǔ)上嘗試通過Bootstrap響應(yīng)式設(shè)計(jì)方法，構(gòu)建響應(yīng)式餐飲網(wǎng)站，確保同一網(wǎng)站代碼在不同終端進(jìn)行訪問時(shí)能自行適配，呈現(xiàn)不同的頁面布局，使內(nèi)容顯示效果更為和諧，從而不斷提高用戶訪問體驗(yàn)。

1? 響應(yīng)式網(wǎng)頁設(shè)計(jì)

1.1? 基本概念

2010年5月Ethan Marcotte將響應(yīng)式建筑的設(shè)計(jì)理念延伸到Web設(shè)計(jì)領(lǐng)域，提出了響應(yīng)式網(wǎng)頁設(shè)計(jì)概念。簡單講，響應(yīng)式網(wǎng)頁設(shè)計(jì)就是通過媒體查詢、流式布局、彈性圖片等技術(shù)[5]，動(dòng)態(tài)調(diào)整頁面布局、圖片尺寸和相關(guān)功能腳本自動(dòng)適配不同終端環(huán)境的設(shè)計(jì)方法。響應(yīng)式網(wǎng)頁設(shè)計(jì)具有良好的跨平臺(tái)和自適應(yīng)性，不需要針對(duì)各終端設(shè)計(jì)不同的頁面版本，一定程度上降低了開發(fā)和維護(hù)成本;而靈活的頁面布局，也使頁面在不同分辨率下顯示更為和諧，確保了用戶的訪問體驗(yàn)。

1.2? 媒體查詢

作為響應(yīng)式網(wǎng)頁設(shè)計(jì)中的核心元素，媒體查詢可以讓同一頁面在不同的終端設(shè)備應(yīng)用不同的CSS樣式。媒體查詢由媒體類型和條件表達(dá)式組成，顯示屏幕分辨率小于760 px時(shí)的body標(biāo)簽樣式特性的代碼為：

@media screen and （max-width：760px）{

body {background-color：#DDD;}

}

1.3? 流式布局

流式布局就是將頁面中元素的寬度、高度由傳統(tǒng)的像素大小轉(zhuǎn)成百分比大小。流式布局的好處是，屏幕分辨率發(fā)生變化的時(shí)候，當(dāng)前頁面中的元素大小也會(huì)等比例地跟著改變，從而實(shí)現(xiàn)自適應(yīng)不同終端頁面布局。

1.4? 彈性圖片

彈性圖片是指像流式布局一樣給圖片寬度和高度設(shè)置百分比尺寸，這樣可以使圖片隨著父元素的寬度動(dòng)態(tài)地進(jìn)行相應(yīng)縮放。在響應(yīng)式網(wǎng)頁設(shè)計(jì)當(dāng)中，為了保證圖片的寬高比，通常只設(shè)置圖片的寬度，高度讓其自適應(yīng)，樣式代碼為：img { max-width： 100%;}。

2? Bootstrap框架

2.1? Bootstrap框架簡介

Bootstrap是一款由Twitter公司Mark Otto和Jacob Thornton共同開發(fā)的Web前端框架，目前最新版本為4.6.0。Bootstrap基于HTML、CSS、JavaScript開發(fā)，能夠自動(dòng)適配臺(tái)式機(jī)、平板電腦和手機(jī)等常見顯示終端，默認(rèn)優(yōu)先支持移動(dòng)設(shè)備。其自帶的Web組件豐富、功能強(qiáng)大、容易DIY擴(kuò)展、幾乎兼容市場上所有主流瀏覽器，可以方便快捷地進(jìn)行網(wǎng)站搭建，大大提高Web開發(fā)效率。

2.2? 響應(yīng)式柵格系統(tǒng)

Bootstrap主要依靠柵格系統(tǒng)來進(jìn)行響應(yīng)式頁面布局，由行（row）與列（column）構(gòu)成。默認(rèn)情況下柵格系統(tǒng)每行會(huì)自動(dòng)分為12列，行必須包含在預(yù)定義的container中，并且列只能在行中進(jìn)行創(chuàng)建，網(wǎng)頁設(shè)計(jì)的內(nèi)容就置于列中。列可以通過1到12中不同的值，來指定其跨越的范圍[6]。例如

表示該div在屏幕寬度≥1 200 px時(shí)，占據(jù)柵格系統(tǒng)12列中的4列，隨著屏幕尺寸的變化div也將會(huì)動(dòng)態(tài)地進(jìn)行響應(yīng)。當(dāng)768 px≤屏幕寬度<1 200 px時(shí)，div則變成占據(jù)柵格系統(tǒng)12列中的6列;當(dāng)屏幕寬度<768 px時(shí)，將完全占據(jù)柵格系統(tǒng)12列中的12列，如表1所示。

3? 基于Bootstrap框架餐飲網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)

3.1? 框架設(shè)計(jì)

本設(shè)計(jì)以餐飲網(wǎng)站為例，采用簡潔的排版，配于精致的美食圖片，把握美食精髓，烘托出餐飲網(wǎng)站氣氛。網(wǎng)站主要分為top、banner、新人區(qū)、美食主推區(qū)（中餐、西餐、飲品）、人氣美食區(qū)、打折區(qū)、footer，注冊(cè)、登錄、搜索、logo、導(dǎo)航全部置于top區(qū)中，框架圖如圖1所示。

3.2? 框架引入

登錄Bootstrap中文網(wǎng)站（https：//www.bootcss.com）下載用于生產(chǎn)環(huán)境的Bootstrap相關(guān)文件，本文以3.4.1版本為例。通過其提供的基本模板替換成本地的css和js文件即可，其中js文件建議放置在頁面底部，防止頁面加載速度過慢，主要代碼為：

…

…

3.3? 構(gòu)建響應(yīng)式導(dǎo)航

導(dǎo)航是引導(dǎo)用戶交互的重要元素，其可訪問性和易用性是至關(guān)重要的，尤其在小屏幕中如何布局導(dǎo)航成為影響用戶體驗(yàn)的重要課題[7]。目前主流的做法是在小屏設(shè)備時(shí)將導(dǎo)航做成漢堡菜單，單擊顯示或隱藏導(dǎo)航內(nèi)容。本設(shè)計(jì)在Bootstrap案例原有響應(yīng)式導(dǎo)航條的基礎(chǔ)上，去除不需要的元素，只保留相應(yīng)的導(dǎo)航菜單即可。其中button為小屏顯示時(shí)的漢堡菜單按鈕，data-target指定要響應(yīng)的導(dǎo)航菜單id;data-spy="affix"表示導(dǎo)航啟用吸附效果，data-offset-top="100"表示滾動(dòng)條向下滾動(dòng)超過100 px時(shí)導(dǎo)航菜單將吸附在頁面頂部，這樣無論在何種分辨率下訪問導(dǎo)航都顯示在頁面頂部。其代碼為：

3.4? 構(gòu)建輪播圖

輪播圖一般包含三部分：圖片、計(jì)數(shù)器、控制器。常用于網(wǎng)站首屏最核心、醒目的區(qū)域，以大幅圖像輪播展示，吸引瀏覽者的眼球，便于產(chǎn)品的推廣。Bootstrap內(nèi)置輪播組件（Carousel）功能強(qiáng)大，輪播內(nèi)容可以是圖像、內(nèi)嵌框架、視頻等，但在移動(dòng)端輪播時(shí)觸摸手勢滑動(dòng)卻不夠友好。在這一點(diǎn)上Swiper更有優(yōu)勢，也是本文banner輪播圖首選。首先在Swiper官網(wǎng)（https：//www.swiper.com.cn/）下載相關(guān)文件，不同版本略有不同。然后在頁面底部引入swiper-bundle.min.js和Swiper初始化實(shí)例，在響應(yīng)的div和輪播圖片分別加上swiper-wrapper、swiper-slide類，再添加獨(dú)立div加上swiper-pagination類作為輪播圖控制器。在swiper實(shí)例中可以根據(jù)需要調(diào)整一些參數(shù)，如direction輪播方向、loop輪播循環(huán)模式、delay輪播間隔時(shí)間。通過以上設(shè)置，輪播圖就可以正常切換了。

3.5? 構(gòu)建美食主推區(qū)

Bootstrap中響應(yīng)式柵格系統(tǒng)由行和列組成，非常適用于該區(qū)域具體的美食展示。在美食div中應(yīng)用col-md-3、col-xs-6類，使屏幕寬度≥992 px時(shí)，美食區(qū)域呈4列顯示，<992 px時(shí)呈2列顯示，確保各屏幕分辨率下美食圖片都能正常展示，提供良好的瀏覽體驗(yàn)。其他新人區(qū)、人氣美食區(qū)、打折區(qū)、footer區(qū)響應(yīng)式柵格大同小異。

3.6? 優(yōu)化測試

3.6.1? 文本單位優(yōu)化

像素（px）作為相對(duì)長度單位，相對(duì)于顯示器屏幕分辨率而言，常用于在PC端設(shè)置字體的大小，元素的寬高等。但px是相對(duì)固定單位，字號(hào)大小直接被定死，所以用戶無法根據(jù)自己設(shè)置的瀏覽器字號(hào)而縮放，當(dāng)用戶在縮放瀏覽器或者需要兼容不同移動(dòng)設(shè)備時(shí)，我們的頁面布局可能會(huì)被打破。em和rem雖然都是相對(duì)單位，但em是相對(duì)于它的父元素的font-size，頁面層級(jí)越深，em的換算就越復(fù)雜，在頁面中多次使用會(huì)帶來開發(fā)的難度。而rem是直接相對(duì)于根元素，這就避開了很多層級(jí)關(guān)系，只需修改根元素就可以成比例地調(diào)整所有字體大小。本次文本單位優(yōu)化將以rem為準(zhǔn)，將根標(biāo)簽字體大小做設(shè)置：html {font-size：10px;}，即1 rem=10 px，其他元素的寬高、字體大小、行高、間距等px值除于10，換上rem單位即可。通過以上rem優(yōu)化換算，頁面在移動(dòng)端適配顯示效果將會(huì)更加和諧。

3.6.2? banner圖片優(yōu)化

banner圖片一般制作精美、像素較高、尺寸較大，可以起到很好的宣傳和推廣作用，但是直接用在移動(dòng)端不太合適，究其原因有兩個(gè)：

（1）banner圖片像素較高直接100%顯示在移動(dòng)端，縮放比例較高，banner圖片寬高比、banner文字顯示不夠協(xié)調(diào);

（2）banner圖片較大，移動(dòng)端加載較慢，勢必影響移動(dòng)端的瀏覽體驗(yàn)。

$（function（） {

//首先獲取所有得item

varitemlist = $（'.swiper-wrapper .swiper-slide'）;

//監(jiān)聽屏幕大小的改變

$（window）.on（'resize'， function（）{

//獲取當(dāng)前屏幕得寬度

var width = $（window）.width（

if （width >= 768） {

//遍歷元素

$（itemlist）.each（function（index， value）{

var item = $（this）;

//獲取當(dāng)前自定義屬性中存儲(chǔ)得路徑

varlgimg = item.data（'lg-img'）;

//創(chuàng)建元素

item.html（a）;

}）;

} else {

$（itemlist）.each（function（index， value）{

var item = $（this）;

varsmImgSrc = item.data（'small-img'）;

item.html（a）;

}）

}

}）.trigger（'resize'）;

}）

3.6.3? 測試

本設(shè)計(jì)在主流瀏覽器下進(jìn)行測試，在不同視口下響應(yīng)式布局均能正常響應(yīng)，網(wǎng)頁顯示效果良好，如圖2所示。移動(dòng)端在Chrome模擬器和實(shí)體終端下均能正常顯示，漢堡菜單折疊效果正常，banner圖片根據(jù)不同分辨率能正常加載，手勢滑動(dòng)流暢，控制器正常響應(yīng)，功能布局合理，用戶體驗(yàn)良好，預(yù)期功能基本實(shí)現(xiàn)，顯示效果如圖3所示。

4? 結(jié)? 論

基于Bootstrap框架可以快速地構(gòu)建響應(yīng)式網(wǎng)站，確保了同一網(wǎng)站代碼能適配不同的終端，但在一些頁面結(jié)構(gòu)復(fù)雜、動(dòng)態(tài)效果和交互體驗(yàn)多樣的大型網(wǎng)站（如：京東、天貓、蘇寧等），盲目使用Bootstrap框架適配勢必造成頁面代碼臃腫，兼容性調(diào)試煩瑣，客戶端加載緩慢等問題。因此要針對(duì)不同使用情境專門設(shè)計(jì)移動(dòng)端版本，然后通過判斷終端設(shè)備自動(dòng)定位到與之相適配的站點(diǎn)，保證最佳的用戶訪問體驗(yàn)，增強(qiáng)用戶黏合度。然而，瑕不掩瑜，伴隨移動(dòng)端的快速增長，憑借移動(dòng)優(yōu)先、組件豐富、開發(fā)效率高、運(yùn)維成本低等特性，Bootstrap已成為全球最受歡迎的前端框架之一，發(fā)展前景可期。

參考文獻(xiàn)：

[1] 王琴.基于Bootstrap技術(shù)的高校門戶網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn) [J].哈爾濱師范大學(xué)自然科學(xué)學(xué)報(bào)，2017，33（3）：43-48.

[2] 朱曉.基于響應(yīng)式網(wǎng)頁技術(shù)的圖書館管理系統(tǒng) [D].上海：上海師范大學(xué)，2018.

[3] 趙璐.基于響應(yīng)式布局的移動(dòng)端學(xué)生后勤系統(tǒng)的設(shè)計(jì) [D].上海：東華大學(xué)，2016.

[4] 原方亮.基于Bootstrap的H5響應(yīng)式網(wǎng)站開發(fā)技術(shù)研究 [D].鄭州：鄭州大學(xué)，2018.

[5] 徐衛(wèi)紅.基于Bootstrap框架的響應(yīng)式網(wǎng)頁設(shè)計(jì)與實(shí)現(xiàn)——以電大《網(wǎng)頁設(shè)計(jì)與制作》網(wǎng)絡(luò)課程為例 [J].江西廣播電視大學(xué)學(xué)報(bào)，2016（4）：92-96.

[6] Bootstrap中文網(wǎng).Bootstrap中文文檔 [EB/OL].[2021-02-20].https：//v3.bootcss.com/css/#grid.

[7] 王愉，潘明明.響應(yīng)式網(wǎng)頁設(shè)計(jì)初探 [J].北京印刷學(xué)院學(xué)報(bào)，2014（3）：13-15.

[8] 韋_恩.bootstrap輪播圖改進(jìn)（如何避免資源浪費(fèi)） [EB/OL].[2020-03-11].https：//blog.csdn.net/qq_42539194/article/details/104788960.

作者簡介：江家龍（1981—），男，廣西南寧人，講師，工程碩士，研究方向：計(jì)算機(jī)技術(shù)應(yīng)用。