Bootstrap响应式设计在甜点网站中的应用研究

摘 要：随着移动智能设备的广泛普及，各种屏幕尺寸的设备层出不穷，网页设计面临着适应不同分辨率设备要求的挑战。而响应式网站设计能够灵活适应不同终端的屏幕尺寸，展示出合理的页面布局，真正实现了“一次开发、多处适用”的目标。以“甜点网站”为例，从开发环境及相关技术、网站规划与设计、数据库设计、网站测试与发布几个方面进行阐述，并对响应式导航、Bootstrap栅格系统、轮播插件的使用等方面进行详细论述。采用Bootstrap框架、HTML5和PHP技术，实现了多终端屏幕适配的甜点网站，大大提升了用户体验，提高了网站的吸引力和竞争力。

关键词：响应式布局；Bootstrap；甜点网站

中图分类号：TP311 文献标识码：A 文章编号：2096-4706（2024）15-0088-06

Research on the Application of Bootstrap Responsive Design in the Dessert Website

ZHANG Yuehua

（Shandong Huayu University of Technology， Dezhou 253034， China）

Abstract： With the widespread popularity of mobile intelligent devices， various screen sizes of devices are emerging one after another. The challenge of displaying Web pages on devices with different resolutions is a major challenge faced by Web design. Responsive website design can adapt to the screen size of different terminals， display a reasonable page layout， and truly achieve the goal of single development and multiple applicability. Taking "Dessert Website" as an example， this paper elaborates on several aspects such as development environment and related technologies， website planning and design， database design， website testing and publishing， and elaborates on the use of responsive navigation， Bootstrap grid system， and carousel plugins. By using the Bootstrap framework， HTML5， and PHP technology， a dessert website with multi terminal screen adaptation has been implemented， greatly improving the user experience， enhancing the websites attractiveness and competitiveness.

Keywords： responsive layout; Bootstrap; dessert website

0 引 言

在当今互联网时代，随着移动设备的普及和网络技术的发展，人们对网站的浏览需求呈现出多样化的特点。传统的固定布局网站已无法满足用户在不同设备上获得良好浏览体验的要求。因此，响应式网页设计应运而生，成为现代网站开发的重要方向。Bootstrap作为一种流行的前端开发框架，提供了丰富的组件、灵活的布局和强大的定制能力，为响应式网站的开发提供了强大的支持。Bootstrap框架具有易于使用、快速开发和跨平台兼容等优点，使得开发者能够更加高效地构建出美观、易用且具有良好用户体验的网站。

甜点作为一种美味的食品，深受广大消费者的喜爱。随着甜点市场的不断扩大，甜点网站的数量也日益增多。为了在竞争激烈的市场中脱颖而出，甜点网站需要具备良好的用户体验和美观的界面设计。本文使用Bootstrap框架结合PHP技术构建响应式甜点网站，以自适应不同的终端，呈现不同样式的页面布局，提高用户的浏览体验。

1 甜品网站规划

1.1 甜品网站需求分析

随着科技的发展，互联网已经成为人们生活中不可或缺的一部分，电子商务也变得日益成熟。越来越多的商家建立了在线商店，为人们的生活带来了极大便利。电子商务的前端平台在商业活动中扮演着举足轻重的角色。甜点网站的功能图如图1所示。

1.2 开发环境及相关技术

HBuilder是DCloud推出的一款集成开发环境（IDE），主要用于开发基于HTML5的移动应用程序。它支持多种前端开发语言和框架，包括HTML、CSS、JavaScript等。HBuilder提供了丰富的插件和工具，可以帮助开发者快速构建跨平台的移动应用程序，包括iOS和Android平台[1]。它还提供了模拟器和调试工具，方便开发者进行应用程序的测试和调试。总的来说，HBuilder是一款功能强大的前端开发工具，适用于移动应用程序的开发和调试。

Bootstrap是由Twitter推出的前端开源工具包，基于HTML、CSS、JavaScript等前端技术。Bootstrap中预定义了一套CSS样式，和与样式对应的jQuery（jQuery是一个快速、小巧、功能丰富的JavaScript库）代码，应用时只需提供固定的HTML结构，添加Bootstrap中提供的class名称，就可以完成指定效果的实现[2]。Bootstrap可以快速构建出非常美观的前端界面，而且占用资源非常小。

PHP（Hypertext Preprocessor）语言是一种完全开源的动态网站开发语言，是一种在服务器端执行，并嵌入到HTML文档中的脚本语言[3]，也可以与多种数据库配合使用，适用于多种服务器端编程。PHP经过多次改进，已成为当今流行的服务器端Web程序开发语言。

MySQL是一个小型的关系数据库管理系统，相比较于其他的一些大型数据库管理系统，MySQL的规模较小且功能有限，但是它也有许多优点，如体积占比小、运行速度快、成本低[4]，适用于各种规模的应用程序和网站。由于其开源性和稳定性，MySQL已经成为许多开发者和组织的首选数据库系统。

Apache服务器是一款功能强大、稳定可靠、灵活且易于扩展的Web服务器软件，适用于各种规模的网站和应用程序。由于其开源性和稳定性，Apache服务器已经成为许多开发者和组织的首选Web服务器软件。

1.3 框架设计

通过简洁的排版和精美的甜点图片，突出甜点的精髓，营造出甜点网站的氛围。网站主要分为header（头部）、商品搜索、热销产品、特色推荐（生日蛋糕、饮品、各种糕点）、合作商家、footer（脚部），响应式导航条位于头部区域，框架图如图2所示。

1.4 数据库连接与设计

1.4.1 数据库设计

在电商网站中用户需要从大量产品信息中找到需要的产品，进行产品搜索是一种非常快捷方法，可以根据某些条件（如甜点名称）进行快速查找，仅把符合查询条件的数据从数据表中查询出来并输出到页面中。在MySQL数据库中创建一张产品信息表，用于保存产品信息，通常有ID、产品名称、产品分类、价格等，表结构如表1所示。

1.4.2 连接数据库

数据库链接：

Mysql_connect（localhost，root，root）;

Mysql_connect（）函数用于建立数据库连接，其中包含3个主要参数。第一个参数表示要连接的数据库地址，第二个参数表示操作数据库的用户名，第三个参数表示操作数据库的用户密码[5]。

选择数据库：

Mysql_query（ use `foot`）;

2 甜点网站设计与实现

2.1 页面描述

本网站是一个集美观、功能与实用性于一体的甜点销售网站，它利用Bootstrap框架实现了响应式设计，确保网站在各种设备上的良好用户体验。整个网站的设计风格以简明为主，色彩搭配上以简洁的白色和西瓜红色为主调，营造出柔和、整洁的视觉效果。页面布局上采用扁平化的设计理念，减少不必要的装饰元素，突出内容的重要性。这种设计风格既符合现代审美趋势，又能为用户提供一个直观、易用的浏览体验。

采用Bootstrap响应式框架布局页面，设置有导航栏、产品搜索、热销产品、特色产品推荐、合作商家等栏目，帮助用户快速浏览、查找商品。网站设计能够自适应各种不同尺寸终端（如各种型号的手机、平板、电脑等）的显示，并且与主流浏览器（如IE浏览器、火狐浏览器、谷歌浏览器等）相兼容[6]。

2.2 创建目录结构

根据前面对甜点网站的分析与设计，创建如图3所示的网站目录结构：

1）food为项目名称，里边包含lib、css、images文件目录，以及index.html项目入口文件。

2）lib文件目录里存放从Bootstrap官网下载到本地的预编译的Bootstrap相关文件，如bootstrap.min.css和bootstrap.min.js文件等，以及字体图标文件夹foots。

3）css文件目录里存放spiceFood.css，用于设置自定义样式。

4）images文件目录里存放项目中用到的图片[7]。

2.3 网站主界面的实现

2.3.1 网页头部模块

导航部分使用Bootstrap导航栏完成，Bootstrap导航栏是在网站中作为导航页头的响应式基础组件，它在移动设备上可以折叠（并且可开可关），且在视口宽度增加时逐渐变为水平展开模式，缩小浏览器窗口后，菜单被隐藏，代替出现的是一个汉堡按钮，单击汉堡按钮显示被隐藏的菜单的下拉列表。需要覆盖Bootstrap导航栏的默认样式，使用类设置导航菜单的样式，例如鼠标悬停换背景颜色和文字变色的效果等。

头部导航PC端页面效果如图4所示。

浏览器窗口缩小至小屏幕（< 992px）时，LOGO换行效果如图5所示。

浏览器窗口缩小至小屏幕（< 768px）时，出现汉堡按钮，如果6所示。

功能关键代码：

1）文档兼容（compatible）模式声明，表示使用IE浏览器的最新渲染模式。代码为：

2）设置确定视口宽度，device-width表示采用设备宽度，初始缩放1.0。代码为：

3）引入Bootstrap。代码为：

4）媒体查询：当视口小于970px时，导航菜单字体变小，避免了换行的问题。代码为：

@media （max-width： 970px） {

.navbar-default .navbar-nav>li a {

font-size： 1.1em;}}

5）当进入最小设备时，导航条将隐藏，显示“汉堡按钮”，点击时可以切面显示导航条隐藏的信息。代码为：

汉堡按钮

2.3.2 商品搜索模块

商品搜索模块主要由通栏背景图片和中间表单区域构成，表单域设置白色透明背景，通过.btn类来修改Bootstrap按钮的默认样式，通过媒体查询，在屏幕小于768px时，让表单外层的