摘要：文章介绍了响应式网页设计和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—），男，广西南宁人，讲师，工程硕士，研究方向：计算机技术应用。