响应式布局网站的设计与实现

摘 要：在传统网页设计与开发中，存在不同的设备终端需设计制作不同版本的局限以及PC端设计的网页在移动设备屏幕上无法完整显示的问题，为此文章对目前流行的前端Bootstrap框架技术进行分析研究，基于学校已有网站群管理系统，设计承德医学院教育技术中心网站，实现了一个能够兼容各个终端需求的响应式网站。文章详细介绍了Bootstrap框架的栅格系统及导航条、缩略图、面板组件和响应式图片插件在网站制作中的应用，并引入制作网站的部分代码以分析响应式布局网站实现的过程。

关键词：Bootstrap框架；CMS网站内容管理系统；网站；层叠样式表；响应式设计

中图分类号：TP393 文献标识码：A 文章编号：2096-4706（2024）20-0043-05

Design and Implementation of Responsive Layout Website

WANG Beibei

（Educational Technology Center， Chengde Medical University， Chengde 067000， China）

Abstract： In the traditional webpage design and development， there are problems that different versions need to be designed and produced for different device terminals and the webpages designed for PC terminal cannot be fully displayed on the screen of mobile devices. Therefore， this paper analyzes and studies the currently popular front-end Bootstrap framework technology. Based on the existing website group Content Management System of the college， the website of the education technology center of Chengde Medical University is designed， and a responsive website that can be compatible with each terminal demand is realized. This paper introduces in detail the grid system of Bootstrap framework as well as the application of navigation bars， thumbnails， panel components， and responsive image plug-ins in the application of website production. And it introduces part of the code of website production to analyze the process of implementing responsive layout website.

Keywords： Bootstrap framework; CMS; website; CSS; responsive design

0 引 言

2024年3月22日，中国互联网络信息中心（CNNIC）在京发布第53次《中国互联网络发展状况统计报告》（以下简称《报告》）。《报告》显示，截至2023年12月，我国网民规模达10.92亿人[1]。上网终端设备使用更加多元（手机、台式电脑、笔记本电脑、电视和平板电脑），使用手机上网的比例达99.7%，手机是上网的最主要设备。移动端网页使用量逐年提升。响应式网页设计是指在网页设计与开发时，根据用户设备环境和行为习惯进行相应的调整，同一个网页能够自适应多个终端设备，而不是为每个终端分别设计特定的版本[2]。为适应用户上网终端多元化浏览网站的需求，结合学校现有网站群管理系统[3]，应用响应式布局技术尤其是Bootstrap框架技术设计二级部门网站并调试上线运行对完善学校网站群管理系统内各二级部门网站具有重要意义。

1 前端框架Boostrap选型

Bootstrap是目前流行的高效前端Web开发工具。它是以超文本标记语言（HyperText Markup Language， HTML）、层叠样式表（Cascading Style Sheets， CSS）、JavaScript为基础发展而来的用于开发响应式布局、移动设备优先的Web项目。在Bootstrap框架文件中，预置了bootstrap.min.css和bootstrap.min.js文件。在网页代码编写时，需要在HTML文档结构的标签间通过标签引入文件bootstrap.min.css，然后在标签间定义引入文件bootstrap.min.js，最后在网页元素的class类名称中套用Bootstrap全局类，以达到预期的网页开发效果[4]。

根据Bootstrap中文网的信息，Bootstrap v3支持IE8+浏览器；Bootstrap v4支持IE10+浏览器而Bootstrap v5则不再支持IE浏览器[5]。考虑更广泛的用户浏览需求，选择了支持更低版本IE浏览器的Bootstrap v3框架。

这三个版本的另一个区别在于是否依赖jQuery，Bootstrap v3依赖jQuery；而v4、v5版本均不依赖jQuery。jQuery是一个轻量级的JavaScript框架。jQuery的文档丰富，并不复杂，新版本出现就能很快流行。同时，jQuery有几千种丰富多彩的插件，大量有趣的扩展和出色的社区支持[6]。

v4v5版本支持Flexbox布局，而v3版本不支持。Flexbox布局被称为弹性布局，它是css3中新增的规范，支持主流浏览器，但不支持IE9及以下版本。本项目考虑IE8+浏览器用户的浏览需求，仍然选择使用Bootstrap v3框架。

2 Bootstrap框架的核心——栅格系统

Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，网站的内容就可以放入这些创建好的布局中。

栅格系统工作原理：行（row）必须包含在.container（固定宽度）或.container-fluid（100%宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。通过行（row）在水平方向创建一组列（column）。网站内容放置于列（column）内，并且，只有列（column）是行（row）的直接子元素[7]。

以教育技术中心网站首页的布局（图1）为例，来看栅格系统的具体应用。Bootstrap中文网中提供栅格参数表格，可以详细查看Bootstrap的栅格系统是如何在多种屏幕设备上工作的。其中类前缀是比较常用的栅格参数，例如.col-xs-是超小屏幕（手机）的类前缀，.col-sm-是小屏幕（平板）的类前缀，.col-md-是中等屏幕（桌面显示器）的类前缀，.col-lg-是大屏幕（大桌面显示器）的类前缀。根据网页设计布局图，设置某个类前缀后面的数字，就能创建动态强大的网页布局。

例如：教育技术中心网站首页广告位小图标的布局。设置.col-md-2意味着一个小图标在中等屏幕或桌面显示器屏幕下占据一行的1/6，每行都是12列，6个小图标在中等屏幕下就会排列在一行。而在超小屏幕下不想让6个小图标都堆叠在一起，就设置了.col-xs-4，意味着手机终端浏览网页的时候，一个小图标占据一行的1/3，3个小图标在手机屏幕下就会排列在一行，如图3、图5所示。

其中，广告位6个图标位置的网页代码如下：

根据Bootstrap框架的代码规范，以一系列的行（row）和列（column）搭配组合出网页的布局[8]。

3 Bootstrap框架组件、插件的应用

Bootstrap组件包括字体图标、下拉菜单、按钮、输入框、导航、导航条、分页、标签、徽章、巨幕、页头、缩略图、警告框、进度条、媒体对象、列表组、面板、响应式特性的嵌入内容等。在教育技术中心网站实例中，我们应用了导航条、缩略图和面板这3个组件以及响应式图片插件。下面按照网站首页布局从上到下的顺序详细介绍。

3.1 导航条

导航条是在网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠（并且可开可关），且在视口（viewport）宽度增加时逐渐变为水平展开模式。实例中直接使用