摘 要：文章介绍了响应式网页设计和 Bootstrap 框架的相关理论，并以餐饮网站为例详细阐述了使用 Bootstrap 开发响应式网站的方法和步骤。针对 banner 图片加载问题，文章提出了一种通过监听浏览器 resize 事件动态加载的优化方法，实验表明该方法能根据不同分辨率动态加载所需 banner 图片，提升了用户体验。通过以上优化，以期为构建高适用性、代码简洁、用户友好的响应式网页设计提供参考。
关键词：响应式；Bootstrap；餐饮
DOI:10.19850/j.cnki.2096-4706.2021.07.019
中图分类号：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
参考文献：
[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—），男，广西南宁人，讲师，工程 硕士，研究方向：计算机技术应用。