基于Bootstrap的H5响应式网站优化设计与实现

摘要：随着移动互联网的飞速发展，传统的网页设计已经无法满足移动端的需求，而Bootstrap是一种以HTML，CSS，JavaScript为基础、简洁直观、功能强大的前端开发框架，它很好地满足了当前网站设计的灵活性需求，在此基础上．结合Bootstrap的HTML5和CSS3的核心技术．文章讨论了响应式网站的设计和实施．有效地解决了由于移动智能终端的多元化发展所带来的各种问题。

关键词：HTML5；CSS3；响应式网站设计与优化；Bootstrap

中图法分类号：TP393 文献标识码：A

网页必须与各种移动智能终端相适应，若仅以传统方式进行设计，将会产生如下问题：第一，网页界面无法在移动端上完全显示，必须放大、缩小才能正常使用；二是界面混乱，文字和图片堆砌在一起会给使用者带来很大的不便；三是传统网页字体大小、版面布局难以满足横屏、竖屏的转换需求。通过采用ＨＴＭＬ５ 和ＣＳＳ３ 技术，实现了网页的跨平台化和自适应性，能够根据显示的不同参数，自动地调整页面的布局，使页面能够适应各种移动智能终端的使用，从而达到统一的页面效果，这正是响应式网站的优势所在［１］ 。

１ 关于Ｂｏｏｔｓｔｒａｐ 及响应式核心技术

１．１ Ｂｏｏｔｓｔｒａｐ 前端开发框架

Ｂｏｏｔｓｔｒａｐ 是一种基于ＨＴＭＬ，ＣＳＳ 和ＪａｖａＳｃｒｉｐｔ 的前端开发框架，它使用了最尖端的技术，由于具有使用简洁、灵活、易于开发、提供样式化的参考文档以及开源的代码基础等特点，因此它的代码基础更加牢固［２］ 。

Ｂｏｏｔｓｔｒａｐ 是当前流行的前端开发框架，其响应性强、移动设备优先的思想，能够根据设备大小和运行情况，对页面布局、图片大小以及对应的脚本代码进行修改，使前端工作更快捷、更简单。例如，大部分浏览器和设备都支持Ｂｏｏｔｓｔｒａｐ， Ｂｏｏｔｓｔｒａｐ 框架为用户提供了大量的Ｗｅｂ 部件，其中包含导航、模态框、图片轮播和一个稳定的移动智能终端平台。

（１）移动设备优先。

用户在使用手机端浏览网页时，需要将网页进行放大或缩小，从而有一个整体的页面效果，这会给用户带来不愉快的体验。Ｂｏｏｔｓｔｒａｐ 具有移动设备优先的理念，它在页面的＜ｈｅａｄ＞区域添加了一个元窗口标记视图，从而判断该页面在装载时会恢复到原来的尺寸，并设置“ｕｓｅｒ?ｓｃａｌａｂｌｅ ＝ ｎｏ”，因此它不能被扩展，用户可以通过滚动条或屏幕进行操作。

（２）丰富且功能强大的组件和插件。

Ｂｏｏｔｓｔｒａｐ 可以为用户提供很多部件和插件，如图片、导航、输入框等。其自带ＪａｖａＳｃｒｉｐｔ 插件包含过渡效应、模态框、下拉式菜单、滚动收听等ｊＱｕｅｒｙ 标准和习惯，而且将其导入Ｗｅｂ 页面中即可。

（３）灵活的响应式栅格系统。

Ｂｏｏｔｓｔｒａｐ 包含一个栅格系统，它是一个响应式的、可移动的装置，它使用了一系列行和列的组合，先确定容器的大小，将其分成１２ 个小块，再调整内外间隔，将设置好的内容放在一个已经确定的页面上。同时，其还包含一个预定义的分类，可以选择一个简单的版型和一个强大的组合分类，能够根据版面的需求，灵活地划分版面。

１．２ 响应式网站概述

１．２．１ 响应式网站

响应式网站可以与各种终端兼容，并能自动识别出手机屏幕大小并做出相应调整的设计。如果是使用传统的ＰＣ 页面，用户在手机终端上浏览时，常常是不合适的，用户需要滑动、缩放页面来观看，而且因为页面缩放，很多页面的按键都无法正常操作，用户的体验会非常糟糕。因此，响应式网站能够根据用户的需要，自动地调整页面来获得更好的用户体验。随着信息技术的发展，移动智能终端的使用量会不断增加，很多网站为了吸引更多的用户而使用响应式网页，因此如何优化响应式网页设计技术成为一个重要课题。当前，技术人员在使用ＨＴＭＬ５ 和ＣＳＳ３ 技术的基础上，开发了弹性布局、弹性图像等技术。

１．２．２ 响应式的核心技术

（１）媒体查询。针对不同尺寸的设备终端，可以根据用户需求，自动检测系统大小、屏幕尺寸、屏幕方向等，选用不同的ＣＳＳ３ 格式，利用媒体查询，可以自定义某些输出装置的显示效果，而无需更改网页的内容。

（２）弹性布局。这种方法使得每个区块的位置都有一个浮动的特征，设计者可以用百分数来代替固定的数值，如网页宽度、图片、文字等。由此，当页面尺寸发生变化时，可以根据不同的版式进行调整。

（３）弹性图像。预设中，图片的显示大小由宽度和高度属性所决定。一旦属性值被确定，不管页面的界面如何改变，图片都将以原来的大小显示。如果是一张有弹性的照片，只要把它的最大宽度属性设定成百分比，它就会自动地和弹性网格一起缩小。如果画面的宽度超出了屏幕的宽度，它将会在没有破裂的情况下自动缩小；相反，则显示为最初的大小。

１．３ 用于响应式网站的计算机语言

１．３．１ ＨＴＭＬ５ 超文本标语言

ＨＴＭＬ５ 是创建Ｗｅｂ 文档的一种语言描述方式，浏览器按照顺序读取页面文件，并按照标签来说明并显示它们所标注的内容，它定义了页面的内涵和结构，简单地说，就是將页面分成几块长方形，再将长方形镶嵌在一起，从而可以让同一页面按照不同的尺寸来自动地调整页面的布局。

（１）可塑性。ＨＴＭＬ５ 的新的语义标记使得阅读器能够更好地识别出信息的类型，从而帮助用户更好地进行阅读。另外，ＨＴＭＬ５ 还提供ＡＲＩＡ 数据角色，允许开发人员为某些内容继续指派角色，如当网页内容被添加到ＪａｖａＳｃｒｉｐｔ 中时，可以通过定义ＡＲＩＡ 角色来完成。

（２）支持视频和音频。ＨＴＭＬ５ 既支持音频，也支持视频。ＨＴＭＬ５ 的主要优点在于，它可以在没有附加ＡｄｏｂｅＦｌａｓｈ 等附加插件的情况下，为网页提供移动设备的支持。

（３）智能储存。ＨＴＭＬ５ 介绍了一个文件对象模型（ＤＯＭ），它包含一个局部（永久）和一个会话（只能在一个会话中使用），它的优点是数据仅仅被存储在客户端中，并且非常容易使用。

１．３．２ ＣＳＳ３ 叠层样式表

ＣＳＳ３ 是定義字体、颜色、位置的一种程序，用于描述网页的格式和显示。本系统可以有效地区分网页的主题和设计格式，把ＣＳＳ３ 格式的信息作为独立的文件存储，使设计者能够更好地集中处理Ｗｅｂ 数据［３～５］ 。在网页设计方面，ＣＳＳ３ 样式的文件被制作成独立的文档，可以与其他ＨＴＭＬ５ 文件共享，从而可以避免设计者对页面进行反复设计，同时可以把精力放在页面的主要内容和功能上，进而可以节约很多的时间。

ＨＴＭＬ５ 与ＣＳＳ３ 技术支持响应式网站的建立，使其能够与各种终端兼容，能够自动识别设备的屏幕大小并进行相应的调整。但是，在实践中，除了良好的兼容性和流畅的自动调节功能外，页面的视觉效果、辅助功能也是吸引用户的一个重要因素。

２ 响应式网站的布局优化和常见问题的解决

在响应式网站开发过程中可以进行部分优化。

２．１ 响应式布局的优化

２．１．１ 部分样式

在ＣＳＳ 预处理技术Ｓａｓｓ 中，传统的ＣＳＳ 语法是每一种元素都具有自己独特的风格，而Ｓａｓｓ 的存在使ＣＳＳ 能够利用可变、逻辑、函数等编程能力，并且易于维护。开发者可以通过Ｓａｓｓ 嵌套的方法把不同的元素组合在一起，这种嵌套的方法让“凌乱”的ＣＳＳ 更有层次、条理，而且不会出现重复的样式。Ｓａｓｓ 可以自定义主题的色彩以及字体大小等，在将来修改的过程中，改变主题的色彩即可［６］ 。

２．１．２ 对ＣＳＳ 和ＪａｖａＳｃｒｉｐｔ 的处理

嵌入或导入的ＪａｖａＳｃｒｉｐｔ 应该尽可能地放置在网页的最底层，因为浏览器是从上而下地呈现ＨＴＭＬ 文件，当网页装入ＪａｖａＳｃｒｉｐｔ 或ＪａｖａＳｃｒｉｐｔ 文件时，它就会停止，直到ＪａｖａＳｃｒｉｐｔ 完成，然后再进行下一步的操作。现在网络上有大量的压缩和解压的工具，如果能把ＣＳＳ 和ＪａｖａＳｃｒｉｐｔ 压缩到最小，就能最大限度地缩短装入速度，当要调试时，用解压工具来打开。如果使用Ｂｏｏｔｓｔｒａｐ 来打开网页，要花费较长时间，那么很有可能是由于Ｂｏｏｔｓｔｒａｐ 在网上调用谷歌的资源，所以只要将所有的在线调用代码设置为空即可解决这个问题。

２．１．３ 使用Ｂｒｏｗｓｅｒ Ｃａｃｈｅ 来降低ＨＴＴＰ 请求的数量

首先，可以引用图片，通常的引用方式＜ ｉｍｇ ｓｒｃ＝＂ ｉｍｇ／ ｂａｎｎｅｒ．ｐｎ ｇ＂ ＞，如果在ｓｒｃ 之后出现一个网页，将会触发ｈｔｔｐ 请求，加上“ｄａｔａ：”，将会成为该页面的内容，当用户再次点开时，将不再需要重新下载。

因为在手机端上有一个流量问题，所以减少ｈｔｔｐ 的请求也可以为用户节约流量。

２．１．４ 页面实现逐次加载

手机端的屏幕大小、信息量都是有限的，因此在设计手机端的时候，可以采用瀑布式的方法，让用户在下载的时候可以节省更多的时间，在不需要查看的情况下，也不需要下载，这就可以节省用户的时间。

同时，在需要的时候点击鼠标，就可以下载相应的内容，这也是一种提升用户体验的方法。

２．２ 解决响应式布局中的常见问题

２．２．１ Ｂｏｏｔｓｔｒａｐ 的ｂａｎｎｅｒ 轮播问题

问题一：Ｂｏｏｔｓｔｒａｐ 中的图片轮播如果要求自动轮播，则必须在＂ｃａｒｏｕｓｅｌ?ａｄ＂类＝＂ ｃａｒｏｕｓｅｌ ｓｌｉｄｅ＂ ＞标签中加上一轮播放的初始数据类型＝＂ ｃａｒｏｕｓｅｌ＂，并在轮播中设置轮播周期为＂３０００＂，所以当用户再次打开时，轮播将会自动播放，但当使用者按下ｂａｎｎｅｒ 图或鼠标在ｂａｎｎｅｒ 图上一划，轮播画面就会结束，这会对使用者造成一定的影响。

问题二：Ｂｏｏｔｓｔｒａｐ 的ｂａｎｎｅｒ 图的高度是随着屏幕宽度的减小而变小的，若ｂａｎｎｅｒ 图等比例减小到了手机屏幕的宽度，则文本链接模块的高度就会超过ｂａｎｎｅｒ 的高度，从而显示不正常。为解决以上两个问题，可以用ＪＱｕｅｒｙ 插件取代Ｂｏｏｔｓｔｒａｐ 的轮播，再用＠ｍｅｄｉａ 进行媒体查询，根据Ｂｏｏｔｓｔｒａｐ 的插槽，为ｂａｎｎｅｒ图设定不同的高度。具体如图１ 所示。

２．２．２ ＰＣ 端的ｈｏｖｅｒ 在移动端的处理

ＰＣ 上有ｈｏｖｅｒ，但在手机端上却没有，有时ＰＣ 上的链接如果加了ｈｏｖｅｒ，在手机端点击一次变成ｈｏｖｅｒ样式，然后点击下一次，就会出现相应的链接。因此，可以在ｂｏｄｙ 上绑定ｔｏｕｃｈｓｔａｒｔ 事件来解决这个问题。

２．２．３ 弹出的模态框被遮罩遮住

这种情况很有可能是模态框的代码放置不当，正确的位置应该是在ＨＴＭＬ 文件的后面，即ｂｏｄｙ 的后面，这可以降低其他代码或者模块对模态框的影响。

２．２．４ 折叠的内容展开显示滚动条

开发人员希望用ｃｏｌｌａｐｓｅ 组件实现一个可折叠的功能，容器的尺寸取决于内容的大小，有时会出现滚动条，但在添加了ｏｖｅｒｆｌｏｗ?Ｙ 属性后，它还是无法删除，如果遇到这种情况，可以将其放置在容器的顶部并设定适当的高度，这样就不会再出现滚动条。

２．２．５ Ｃｏｍｐａｓｓ 扩展库的使用问题

在创建Ｃｏｍｐａｓｓ 项目时，在ｃｍｄ 中输入“ｃｏｍｐａｓｓｃｒｅａｔｅ 项目名”后，生成了３ 个类似于图２ 的文件。

开发人员无法找到所建立的项目档案时，在ｃｍｄ中继续键入“ｃｄ ｍｙｐｒｏｊｅｃｔ”，即可找到该文件的位置。

然后，开发人员要把这３ 个文件拷贝到相应的文件夹，即配置文件， Ｓａｓｓ 编译后ＣＳＳ 文件夹， Ｓａｓｓ 源文件夹。开发人员在完成这个步骤之后，常常会碰到带有Ｃｏｍｐａｓｓ 扩展库代码的Ｓａｓｓ 文件，在编译时会出现一些错误的编辑提示，如果出现这样的问题，开发者会先查看条目对应的路径是否有汉字，然后再将ｃｏｎｆｉｇ． ｒｂ 文件进行调配，有２ 条路径可以选择。

（１）ｃｓｓ＿ｄｉｒ ＝ ＂ｓｔｙｌｅｓｈｅｅｔｓ＂ ／ ／ 引号内写Ｓａｓｓ 编译生成的ＣＳＳ 文件所在的文件名。

（２）ｓａｓｓ＿ｄｉｒ ＝ ＂ｓａｓｓ＂ ／ ／ 引号内写Ｓａｓｓ 文件所在的文件名。

第一行的引号是要写出ＣＳＳ 文件的目录名，然后是Ｓａｓｓ 源文件的目录名。完成了这些后编译工具，用户就可以正常地编译包含Ｃｏｍｐａｓｓ 扩展的代码的Ｓａｓｓ文件。

３ 结束语

基于Ｂｏｏｔｓｔｒａｐ 的响应式网站虽然存在一些问题，

但这不能否定以Ｂｏｏｔｓｔｒａｐ 为基础的响应式网站是当前优化设计的主流方向。在使用Ｂｏｏｔｓｔｒａｐ 框架进行响应式设计时，还需要考虑更多的互动因素，因为这是最直观的用户体验。设计者在设计的时候，要充分考虑到各个模块之间的反应，如此一来才能让网站的用户体验更好。

参考文献：

［１］ 原方亮，刘占方．基于Ｂｏｏｔｓｔｒａｐ 的Ｈ５ 响应式网站优化设计与实现［Ｊ］．数码世界，２０１８（８）：１７７．

［２］ 原方亮．基于Ｂｏｏｔｓｔｒａｐ 的Ｈ５ 响应式网站开发技术研究［Ｄ］．郑州：郑州大学，２０１８．

［３］ 孙丽英．响应式設计技术在视频网站开发中的应用策略［Ｊ］．电脑编程技巧与维护，２０２２（４）：１４１?１４３＋１５２．

［４］ 陶瑜，龚花兰，郭自飞．基于Ｂｏｏｔｓｔｒａｐ 的响应式高校招生网站的开发［Ｊ］．沙洲职业工学院学报，２０２０，２３（３）：５?７．

［５］ 郭欣桐，于洪． 基于雨课堂的在线教学模式实践与探索———以响应式布局网站开发为例［Ｊ］．科技视界，２０２２（３）：７５?７７．［６］ 张涛，么伟伟． 响应式设计技术在视频网站中的应用［Ｊ］．现代工业经济和信息化，２０２２，１２（４）：１３３?１３４＋１３６．

作者简介：陈彩燕（１９９２—），本科，研究方向：Ｗｅｂ 前端开发、Ｊａｖａ 程序设计、Ｊ２ＥＥ 企业级开发。