摘要：文章介绍了响应式网页设计和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设计领域，提出了响应式网页设计概念。……