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

原方亮 刘占方 郑州大学

引言：据数据统计近些年使用移动互联网的用户数量一直在增长，使用智能手机、平板电脑的用户已经大大超过PC用户，响应式布局从而走进人们视野。但在国内，企业如果去做上档次点的响应式网站，往往花费技术成本会比较高，而如果企业使用响应式网站建模，虽然这种方法费用不高，但这种建模做的响应式网站往往“撞衫率”很高，在这种情况下用Bootstrap框架去开发响应式网站就成了性价比很高的选择。因为普通网页开发者只要具备基本的前端技术能力，就可以通过短时间的学习后上手使用Bootstrap进行快速地开发，而且Bootstrap不仅兼容大部分JQuery插件，还在JQuery的基础上进行了交互体验和网站风格个性化的改善。

1 关于Bootstrap及响应式核心技术

1.1 Bootstrap

Bootstrap是Twitter公司开发的一个基于HTML、CSS和JavaScript的技术框架，此框架融合了最新的前端技术，它简单灵活使开发便捷，有样式化的参考文档，而且开放式的代码库让开发者可以按自己的想法进行发挥，这也使得其代码库更加丰富。Bootstrap提供的响应式开发功能在国内很受到欢迎，并且拥有庞大的用户基础和实践基地。

相比其它框架，Bootstrap在开发响应式方面有很多的优势，如：Bootstrap框架被大多数浏览器和设备支持，不仅为PC端网页提供了导航、模态框、图片轮播等丰富的Web组件，还为移动开发提供了平稳的开发平台。

1.2 响应式的核心技术

首先，弹性布局。根据不同尺寸屏幕动态地对布局做出调整，如果用Bootstrap做响应式就是用网格系统进行栅格布局，网格系统的原理是用百分比划分区域，Bootstrap为超小设备（＜768）、小型设备（＞768）、中型设备（＞992）、大型设备（＞1200）提供了不同的引用前缀，使网页可以根据屏幕的宽度去调整页面的宽度以及各模块的百分比占比，以此来适应不同尺寸屏幕。

其次，媒体查询。根据不同分辨率尺寸改变相应样式或已添加的前缀，从而实现在不同尺寸屏幕下改变网页的视口大小，显示、隐藏或移动内容，媒体查询也是网格系统得以实现的关键。媒体查询可以在HTML或CSS中进行，主要用到@media screen and ( ){} 语句。

最后，弹性图片。如果同一张图片在不同尺寸的屏幕下引用不同尺寸的图片，用户在使用手机端时就不会浪费其数据流量而且防止加载速度过慢，从而让用户在不同端都有好的体验。方法主要有使用picture标签、srcset搭配sizes、SVG图片运用和使用JQuery判断。

2 响应式布局的优化和和常见问题的解决

笔者在实际工作实践中，总结出在响应式开发中能够优化的部分和一些问题的解决方法，下面将罗列出典型的几个，处理好这些问题只为让网站性能和用户的体验更好。

2.1 响应式布局的优化

2.1.1 部分样式运用CSS预处理技术Sass来编写

CSS的传统语法是各个元素都有独立变化的样式，Sass出现让CSS能使用变量、简单的逻辑程序、函数等一些编程特性，方便代码的维护。

开发者可以通过Sass嵌套地将元素的样式组合在一起，这种嵌套的写法让“凌乱”的CSS传统样式变的有层次和条理，并且减少重复的样式代码。

Sass可以为网站整体的主题色、字体大小、相同尺寸的模块来定义一个变量，在后期想改的时候只需要改变变量的值而不用去一一做修改，比如在不同的节日企业想换官网的主题色，只需要改一处主题色的变量值就可以实现。

2.1.2 对CSS、JavaScript、在线 Bootstrap 的处理

内嵌或引入的JavaScript应尽量放在页面的底部，这是由于浏览器是从上往下对HTML文件进行渲染的，页面加载到JavaScript代码或JavaScript文件引入时就会暂停并等待JavaScript执行完毕才会继续往后执行，如果放在前面，用户就需要在页面加载上等待更多的时间，所以将JavaScript文件放在底部能对网站性能有一些优化。

现在网上有很多代码的压缩和解压工具，如果对CSS和JavaScript进行代码压缩，可以减少页面的大小从而优化加载时间，在需要调试代码时再用解压工具进行解压即可。

如果打开用Bootstrap做的页面都需要加载半天的情况时，可能是因为Bootstrap在线调用谷歌网站上的资源造成的，这种情况下只需要把所有在线调用的代码置空就可以了。

2.1.3 运用浏览器缓存来减少HTTP请求次数

首先是在图片的引用上，可以用＜img src="data：img/banner.png"＞来引用图片，普通的引用方式＜img src="img/banner.png"＞由于src后面是一个网页地址所以会触发一次http请求，而加“data：”后就成为了网页的内容，用户在下一次打开后就不用加载，这样做虽然增加了一些网页大小，但会减少http请求次数提升网站性能，还可以通过ajax异步请求来使前端去缓存一些不经常变化的数据，来减少http请求次数。

因为用户在手机端相比PC端有一个流量的问题，所以减少http请求次数也可以为用户节约流量。

2.1.4 页面实现逐次加载

移动端毕竟在屏幕大小、信息量展示以及流量方面有限，所以在设计移动端时可以用比如瀑布流的方式进行逐次加载，这样用户所等待的加载时间少，而且在用户不需看未加载的部分时此部分也没有加载，减少了用户的流量消耗，而在想看时做出相应的滑动手势即可加载出相应的内容，用这种加载方式代替传统的一次性把内容加载完毕的方式也是一种在用户体验和网站性能上的优化。

2.2 响应式布局常见问题的解决

2.2.1 关于Bootstrap的banner轮播问题。

问题一：Bootstrap自带的图片轮播如果需要自动轮播，需要在＜div id="carousel-ad" class="carousel slide"＞标签里加上轮播的初始化 data-ride="carousel" 和设置轮播的间隔时间datainterval="3000"，这样再打开页面后虽然会自动轮播，但如果用户点击了banner图或者鼠标在banner图上滑动几下，自动轮播就会停止，这个框架上的问题会影响用户的体验。

问题二： Bootstrap的banner图高度，是根据屏幕的宽度变小而等比例变小，在这种情况下，banner图等比例缩小至移动端设备的宽度时，文字链接模块的高度可能会超出banner的高度而展示不正常。

上面两点问题，可通过找一个能正常轮播的JQuery插件代替Bootstrap自带的图片轮播，然后基于这个插件用@media进行媒体查询，在不同设备的尺寸范围内，给banner图定不同的并且合适的高度。

2.1.2 PC端的hover在移动端的处理。

在PC端有hover但在移动端就没有了，有时候在PC端做的链接如果加了hover会发现切换到移动端后，点第一次变成hover的样式，点第二次才会跳转到对应链接。这时可通过给body上绑定一个touchstart事件，便能解决。

2.1.3 弹出的模态框被遮罩遮住。

出现这个情况最可能是因为模态框代码的位置不合适造成的，正确的位置是放在HTML文件的跟元素内，也就是紧跟着body元素，这样就可以减少其它部分的代码或模块对模态框造成影响。

3 展望

除了本文总结的基于Bootstrap的响应式网站所存在的一部分问题外，还有种种其它或大或小的问题，但基于此框架做的响应式网站仍然是瑕不掩瑜，这种开发方式还是会被越来越多的企业青睐。在用Bootstrap框架做响应式设计时，也应该多考虑和设计好一些交互上的东西，毕竟这是用户体验上最直接的部分，设计者在设计时应该更多得考虑响应式网页在不同端模块的分布以及适合所在端的页面交互，响应是本，交互是质，设计是根，把用户所可能接触到的方方面面都设计好，才会让自己所做的响应式网站有更好的用户体验和得到更多的关注度。