基于Bootstrap的響應式餐飲網站設計與實現

摘要：文章介紹了響應式網頁設計和Bootstrap框架的相關理論，并以餐飲網站為例詳細闡述了使用Bootstrap開發響應式網站的方法和步驟。針對banner圖片加載問題，文章提出了一種通過監聽瀏覽器resize事件動態加載的優化方法，實驗表明該方法能根據不同分辨率動態加載所需banner圖片，提升了用戶體驗。通過以上優化，以期為構建高適用性、代碼簡潔、用戶友好的響應式網頁設計提供參考。

關鍵詞：響應式;Bootstrap;餐飲

中圖分類號：TP393.092 ? ? ?文獻標識碼：A 文章編號：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? 引? 言

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

1? 響應式網頁設計

1.1? 基本概念

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

1.2? 媒體查詢

作為響應式網頁設計中的核心元素，媒體查詢可以讓同一頁面在不同的終端設備應用不同的CSS樣式。媒體查詢由媒體類型和條件表達式組成，顯示屏幕分辨率小于760 px時的body標簽樣式特性的代碼為：

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

body {background-color：#DDD;}

}

1.3? 流式布局

流式布局就是將頁面中元素的寬度、高度由傳統的像素大小轉成百分比大小。流式布局的好處是，屏幕分辨率發生變化的時候，當前頁面中的元素大小也會等比例地跟著改變，從而實現自適應不同終端頁面布局。

1.4? 彈性圖片

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

2? Bootstrap框架

2.1? Bootstrap框架簡介

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

2.2? 響應式柵格系統

Bootstrap主要依靠柵格系統來進行響應式頁面布局，由行（row）與列（column）構成。默認情況下柵格系統每行會自動分為12列，行必須包含在預定義的container中，并且列只能在行中進行創建，網頁設計的內容就置于列中。列可以通過1到12中不同的值，來指定其跨越的范圍[6]。例如

表示該div在屏幕寬度≥1 200 px時，占據柵格系統12列中的4列，隨著屏幕尺寸的變化div也將會動態地進行響應。當768 px≤屏幕寬度<1 200 px時，div則變成占據柵格系統12列中的6列;當屏幕寬度<768 px時，將完全占據柵格系統12列中的12列，如表1所示。

3? 基于Bootstrap框架餐飲網站的設計與實現

3.1? 框架設計

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

3.2? 框架引入

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

…

…

3.3? 構建響應式導航

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

3.4? 構建輪播圖

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

3.5? 構建美食主推區

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

3.6? 優化測試

3.6.1? 文本單位優化

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

3.6.2? banner圖片優化

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

（1）banner圖片像素較高直接100%顯示在移動端，縮放比例較高，banner圖片寬高比、banner文字顯示不夠協調;

（2）banner圖片較大，移動端加載較慢，勢必影響移動端的瀏覽體驗。

$（function（） {

//首先獲取所有得item

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

//監聽屏幕大小的改變

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

//獲取當前屏幕得寬度

var width = $（window）.width（

if （width >= 768） {

//遍歷元素

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

var item = $（this）;

//獲取當前自定義屬性中存儲得路徑

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

//創建元素

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? 測試

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

4? 結? 論

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

參考文獻：

[1] 王琴.基于Bootstrap技術的高校門戶網站設計與實現 [J].哈爾濱師范大學自然科學學報，2017，33（3）：43-48.

[2] 朱曉.基于響應式網頁技術的圖書館管理系統 [D].上海：上海師范大學，2018.

[3] 趙璐.基于響應式布局的移動端學生后勤系統的設計 [D].上海：東華大學，2016.

[4] 原方亮.基于Bootstrap的H5響應式網站開發技術研究 [D].鄭州：鄭州大學，2018.

[5] 徐衛紅.基于Bootstrap框架的響應式網頁設計與實現——以電大《網頁設計與制作》網絡課程為例 [J].江西廣播電視大學學報，2016（4）：92-96.

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

[7] 王愉，潘明明.響應式網頁設計初探 [J].北京印刷學院學報，2014（3）：13-15.

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

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