一种基于复合型框架的响应式布局技术研究

2018-12-17陈昕

电脑知识与技术 2018年25期

陈昕

摘要：文章针对响应式布局技术浏览器兼容性较差的问题，研究了一种基于Bootstrap和Unsemantic的复合型框架响应式布局技术，并给出了基本实现方案。首先分析了Bootstrap框架和Unsemantic框架的优点与不足，再阐述了复合型框架的环境搭建和页面版式布局的实现过程，最后以福建师范大学协和学院党务工作部网站（ http：//cuc.fjnu.edu.cn/dwgz/ ）为案例验证了技术可行性和浏览显示效果。

关键词：Bootstrap；Unsemantic；HTML5；响应式布局；应用研究

中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2018）25-0087-02

随着移动互联网的高速发展，响应式布局技术逐渐成为Web前端开发的主流。高效解决解决多设备显示适应问题时响应式布局的优点。特别是针对不同平台、不同尺寸的终端访问，响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验。但是，对于不同内核、不同版本的浏览器渲染显示兼容性较差是目前响应式布局技术存在的一个主要问题。

为了解决响应式布局技术浏览器兼容性较差的问题，本文提出了一种Bootstrap和Unsemantic的复合型框架响应式布局技术，并给出了基本实现方案。文章首先分析了Bootstrap框架和Unsemantic框架的优點与不足，再阐述了复合型框架的环境搭建和页面版式布局的实现过程，最后以福建师范大学协和学院党务工作部网站（ http：//cuc.fjnu.edu.cn/dwgz/ ）为案例验证了技术可行性和浏览显示效果。

1 Bootstrap框架

Bootstrap是由Twitter开发，基于HTML5，CSS3以及JavaScript的响应式布局框架。Bootstrap一直秉承着一套代码编写一个框架即可适配多种设备的开发理念，并明确强调了移动设备优先的开发原则，是目前很受欢迎的前端框架。

Bootstrap为开发者提供了完整的全局CSS样式，每个HTML元素都可以通过class设置样式并获得增强的浏览效果。Bootstrap拥有大量可复用的组件，还引入了jQuery插件，令这些组件的功能更强大、应用更灵活、更富有生命力。

Bootstrap的目标是在最新的桌面和移动浏览器上有最佳的表现，这既是它的优点，也是它的缺点。Bootstrap先进的栅格系统虽然可以帮助开发者更快更好地完成Web开发，但是其对不同内核的浏览器，尤其是早期的IE浏览器的兼容性却差强人意。

2 Unsemantic框架

Unsemantic源自经典的框架960 Grid System，是一款结构清晰、代码简洁的响应式布局框架。Unsemantic可以高效地设计开发支持多终端、跨平台的响应式布局前端，并且对于IE内核、Gecko内核以及WebKit内核等各种不同内核的浏览器有着较强的兼容性，尤其对于早期版本的IE浏览器也具有良好的兼容性。

3 复合型框架响应式布局

本文尝试在Web开发中将Unsemantic和Bootstrap相结合，即将两者同时运用构造一种复合型的框架。其中，Unsemantic主要实现页面版式的栅格布局以发挥其兼容性强的优势，而Bootstrap则主要运用其功能强大的组件及插件。

3.1 搭建环境

1）在站点根目录中将Unsemantic和Bootstrap的CSS文件、JS文件以及字体文件构建起基本的文件结构。

2）在页面中构建HTML5环境，使页面满足移动设备优先的要求。

3）在页面中插入Unsemantic和Bootstrap框架的CSS文件及JS文件，并用条件注释判断浏览器版本。

其中，当访问浏览器的版本低于IE9.0时，页面加载html5shiv_min.js及respond_min.js；当访问浏览器的版本高于IE8.0或是IEMobile版本时，页面加载unsemantic-grid-responsive.css；当访问浏览器的版本低于IE9.0并且非IEMobile版本时，页面加载ie.css。

4）为了增强页面对于IE浏览器以及国产浏览器的兼容性，可在页面中添加如图5、如图6所示标签。

如图1所示标签被包含在了所有Bootstrap文档和实例页面中，为的就是在每个被支持的IE版本中拥有最好的绘制效果，有效提高了响应式框架页面对于IE浏览器的兼容性。

目前，大多数国产浏览器都支持兼容模式（即IE内核）和高速模式（即webkit内核），但是默认都使用兼容模式，这就造成了低版本的IE内核对于响应式的框架渲染效果比较糟糕的现状。所以，如图2所示标签支持部分国产浏览器以默认高速模式（即webkit内核）渲染页面，极大提高了响应式框架页面对于国产浏览器的兼容性。

3.2 布局实现

3.2.1 导航条

导航条是站点或应用中必不可少的响应式基础组件。响应式导航条在移动设备上应该可以折叠，且在窗口宽度增加时逐渐变为水平展开模式。

导航条可以使用Bootstrap中的导航条组件

标签实现。添加.navbar-fixed-top类可以让导航条固定在顶部，还可包含一个.container或.container-fluid容器，从而让导航条居中，并在两侧添加内补（padding）。

导航条中的.navbar-header类容器定义了当移动设备访问时响应式导航条折叠显示的效果，基本案例实现代码如图3所示。

3.2.2 页面版式布局

页面版式采用Unsemantic栅格系统布局，分为主体版块和左侧版块两大部分。主体版块以.grid-75类容器定义，在计算机终端显示占75%宽。左侧版块以.grid-25类容器定义，在计算机终端显示占25%宽，基本HTML结构如图4所示。

栏目版块采用.grid-100类容器嵌套在页面版块中。这种嵌套的方式可以继承Unsemantic框架定义的CSS样式，让栏目版块之间的间距（margin）和内补（padding）以Unsemantic框架的默认样式显示。在主体版块和页面版块的容器添加.mobile-grid-100类，可以使页面在移动互联网终端显示时实现响应式布局。

3.2.3 栏目版式布局

栏目版式布局以Bootstrap组件为主，包括巨幕、缩略图、表单、列表组、面板等。Bootstrap组件可以直接嵌入在Unsemantic栅格中使用，而不需要再添加Bootstrap的栅格类。

如图5所示代码为例，定义了主体版块中的50%宽度的栏目。其中，.panel类容器定义了一个基本的bootstrap面板，.panel-heading类容器定义面板的标题，.panel-body类容器定义了面板的主体，.btn类标签定义了一个按钮式的超链接。

3.3 案例调试

福建师范大学协和学院党务工作部网站（ http：//cuc.fjnu.edu.cn/dwgz/ ）的前端采用基于Bootstrap和Unsemantic的复合型框架响应式布局技术开发，前端调试结果如下：

1）该站点在IE7.0中页面整体版式还算工整，并没有出现严重的错位现象。但是页面中存在的问题也比较明显，栏目的间距和边距显示效果不够协调，友情链接栏目中将每张图片设置为.grid-15类也是无效的。

2）该站点在IE8.0和IE9.0中页面均可正确浏览显示，并没有发生IE7.0中出现的不兼容现象。但是，在IE8.0和IE9.0中的浏览显示效果却并不是完全一样，在页面版块宽度以及栏目版块宽度上存在着细小差异，对比而言IE9.0的浏览显示效果会显得更加协调。

3）该站点在360安全浏览器8.1中的高速模式（即webkit内核）下页面可以正确显示。对比IE内核和webkit内核的显示效果，在列表项换行缩进样式上存在差别。

4）该站点在移动互联网终端中页面版块和栏目版块中的标题、文字、列表、图标、图片、超链接以及样式都可以正确显示，体现了较强的响应式布局效果。

4 结论

本文提出了一种基于Bootstrap和Unsemantic的复合型框架响应式布局技术，将Unsemantic稳定的栅格系统和Bootstrap丰富的组件有效地结合运用，极大提高了响应式布局页面对于（下转第99页）

（上接第88页）