以Bootstrap为基础建立响应式安徽省地震局网站

孙 静，万 杰，李亚龙

(安徽省地震局，安徽 合肥 230031)

以Bootstrap为基础建立响应式安徽省地震局网站

孙 静，万 杰，李亚龙

(安徽省地震局，安徽 合肥 230031)

随着安徽省地震事业的发展和人民群众对防震减灾知识需求的日益增长，以及“十二五”项目建设工作的深入展开，迅速传播安徽省地震局的工作成果和及时发布工作动态显得尤为重要。目前安徽省地震局对外的宣传窗口仍是传统模式网站，即PC互联网模式。而随着手机、移动终端上网的大规模普及以及移动网速的提高，标志着移动互联网时代的来临。到2015年，移动互联网的用户数量将会超过桌面用户数量。对于接入移动互联网的用户来说，除了智能手机外，使用平板电脑甚至是电视机进行上网的用户也在不断增加。在这种形势下，怎样让设计的网站能够尽量兼容更多的移动设备来确保用户的良好体验，将成为需要面对的一大挑战。而基于BootStrap开发的门户网站，正是对这一趋势的良好回应。以BootStrap为基础开发的响应式WEB网页能弹性适应屏幕尺寸，智能兼容多种终端，使网站不挑剔浏览终端，能很好为公众提供方便。

BootStrap；智能兼容；响应式设计

随着通信技术3G、4G的发展和移动通信WEB2.0技术的提升，近年来各种移动智能设备的广泛应用，中国互联网应用正在往移动方向发展，呈现出多元化的趋势。越来越多的用户拥有多种移动设备，像智能手机、平板电脑、智能手表等在现今的大环境下正在普及并逐渐超过PC设备。面对市场上移动设备的不断增多，伴随着各种各样的设备屏幕的分辨率、尺寸和型号越来越多，要能够在不同屏幕、不同系统平台等环境下保持网页的一致性，为满足用户的一致体验将成为了整个网页设计行业的一个新挑战。

1 基于BootStrap的响应式Web设计概述

1.1 BootStrap简介

Bootstrap是Twitter推出的CSS框架，它是由Twiter的设计师Mark Otto和Jacob Thornton合作开发的，推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC(微软全国广播公司)的BreakingNews都使用了该项目，基本上是目前欧美最流行的框架[1]。CSS Reset是指重设浏览器的样式[2]。在各种浏览器中，都会对CSS的选择器默认一些数值。但并不是所有的浏览器都使用一样的数值，所以有了CSS Reset，以让网页的样式在各浏览器中表现一致。Bootstrap中包含有丰富的组件，其中包括下拉菜单、按钮组、按钮下拉菜单、导航条、面包屑、分页、排版、缩略图、警告对话框、进度条等，根据这些组件，可以快速搭建一个风格简约和功能完备的网站。它还自带了一组jQuery交互插件，包括模式对话框、标签页、滚动条、弹出框等，不但功能完善，而且十分精致，正在成为众多jQuery项目的默认设计标准。而这些模块化的组件在修改时也是非常方便的，只需要修改变量就可以形成自己的独特风格。要使用Bootstrap就必须首先将Bootstrap的文件包放在相应的文件夹下，文件包中包含所有CSS文件、jQuary文件以及相关的图标文件，使用时只在网页文件中引入即可，代码如下：

Bootstrap．CSS”，>，其中“path”为Bootstrap所在路径，若用到其他组件和插件，只需要引人相应的文件就可以了。Bootstrap默认页面宽度为940px，并将其平均分为12栅格(Grid)，分别从span1到spanl2，在使用过程中只需保持各个行块中内容的宽度不大于设置的相关span宽度即可。搭建一个网站中常用1∶2格局的版面只需要如下代码：

若需要设置元素平行移动，代码为“offsetspanN”(0

1.2 现行的主流结构在Web开发中的弊端

目前网页设计师在设计网页时常用的主流结构是DIV+CSS，其中CSS是英语Cascading Style Sheets(层叠样式表单)的缩写，是一种用来表现HTML或XML等文件式样的计算机语言，负责前端页面的外观。但是编写CSS文件是一个繁冗细致的工作，不但需要有一定的代码编写能力，更对美术设计功底有一定的要求。在网站项目开发中，往往需要编写大量的CSS代码，如果没有一定的经验，很容易造成大量代码混杂，尤其是DIV+CSS编码，其本身并没有统一的规范，很容易造成外联样式与行内样式冗余等其他问题。其次，浏览器兼容性也是在前端设计时无法避免的问题，由于目前浏览器对CSS的代码识别不同，使得相同的CSS样式在不同类型、不同版本的浏览器上存在较大的显示差异。而解决这样的问题不仅需要在编写时高度注意，更需要通过大量的测试来确定最终的浏览效果，反复的测试无疑在很大程度上降低了网页开发效率。

1.3 基于BootStrap的响应式Web设计优劣势

图1 CSS框架不同的需求自行对页面进行响应式调整

响应式Web设计优势。使用BootStrap中的CSS框架能够很巧妙地避开上述弊端，以BootStrap为基础设计的Web页面能够让不同移动设备兼容显示，这主要指的是入口页面可以自动判断不同设备、不同环境的用户行为，并根据这些不同的需求自行对页面进行响应式调整，以期达到兼容各种设备的正常显示与浏览的目的。不管访问Web页面的用户是何种设备，或者用户对屏幕的摆放是横向还是竖向，页面都应该能够识别当前访问用户的终端并且自动切换分辨率、图片大小及相关脚本功能，以兼容不同设备，效果如图1所示。响应式Web设计劣势包括兼容各种设备工作量大，效率低下代码累赘，会出现隐藏无用的元素，加载时间加长其实这是一种折衷性质的设计解决方案，多方面因素影响而达不到最佳效果一定程度上改变了网站原有的布局结构，会出现用户混淆的情况。

2 响应式网站系统设计

2.1 设计目标

通过对现今响应式设计技术的掌握与了解，设计出的网站应该能够达到以下2个目标：(1)前台部分能够兼容显示绝大部分移动终端设备、不同尺寸和分辨率的屏幕；能够在不同浏览器内核中对网页保持同样的风格，输出时保证用户的相同体验；(2)后台部分可以根据现有的PC网站后台数据接口获取相关页面的信息，将数据库中提取的相关信息加载到相应的模块当中。

2.2 主页HTML设计

在网站主页设计中，为保持各个页面的连贯性，采用分块设计的方法。与此同时为了与传统pc网站相关联，仍采用相同的宣传图片作为各个网页的头部，为了实现响应式设计，采用Bootstrap网格系统实现，设计代码如下：

中间内容部分以白色作为基色调。能够把内容鲜明地体现出来。

网站的分页是各个栏目的详细内容的展开，各级子页面保持与主页面的风格，实现了网站的统一。

2.3 实现响应式布局

一切以弹性灵活为基础。所谓弹性布局就是不对网页页面的宽度作任何设定，即非固定式页面布局，也就是体现在页面整体布局以及字号、图片等方面可以根据不同环境自动做出适应和调整，因而能使页面更富有弹性化使其能够兼容适应不同移动设备的环境。然而弹性布局并不能完美解决web的响应式设计的需求，在某些极端特殊的情况下，一些元素或者页面布局仍有可能遭到破坏。尽管如此，弹性布局还是响应式设计的基础，如果没有它，Web响应式设计的后续工作将无法开展。

媒介查询器功能。现今大多数移动浏览器将HTML页面放大为宽的视图(viewport)以符合屏幕分辨率，为了让媒体查询能够在各个浏览器下充分发挥其响应式的作用时可以使用视图的meta标签来进行重置,先在标签里加入下面标签：

接下来就可以使用媒介查询器对整个页面进行响应式布局设计，媒介查询器可以根据条件告诉浏览器如何为指定宽度的视图渲染页面。它只一种以纯CSS方式实现响应式Web设计思路的手段，能够有效帮助锁定某些指定的设备，并针对某些特定的设备类型显示不同的页面布局风格，很好地实现响应式设计。

2.4 数据库连接代码的设计

该响应式网站的设计是以已存在的网站为基础的，所以只需要调用已存在的后台数据库数据，就可以进行与数据库的连接或读取，然后将数据显示到前台页面，代码如下：

include_once "../config.inc.php";// 连接到数据库

MYMconn =mysql_connect(MYMdbhost, MYMdbuser, MYMdbpw);

if (!MYMconn)

{

echo "Unable to connect to DB: " .mysql_error();exit;

}

if (!mysql_select_db(MYMdbname))

{

echo "Unable to select database: " .mysql_error();exit;

}

mysql_query("set names gbk");

3 响应式动态网站测试和结束语

当前期的工作完成以后，网站建设的目标就基本实现了。下面介绍如何具体实现页面截图。移动终端显示效果如图2所示。

图2 移动终端显示效果

对以BootStrap为基础的响应式Web设计进行了一定程度的研究后，针对不同移动设备环境的用户提供了更友好的浏览体验和更加舒适的界面风格，这些弥补了PC网站在时间和空间上的限制，为实现用户随时随地访问安徽省地震局网站内的主要内容提供了可能。

[1] Jake Spurlock.李松峰译.Bootstrap手册[M]．北京：人民邮电出版社，2013.

[2] 张亚飞.HTML5+CSS3网页布局和样式精粹[M]．北京：清华大学出版社，2011.

The responsive web designing based on Bootstrap for Earthquake Administration of Anhui Province

Sun Jing, Wan Jie, Li Yalong

(Earthquake Administration of Anhui Province, Anhui Hefei 230031, China)

With the earthquake researching development in Anhui Province and more knowledge on the earthquake disaster reduction are demanded. Supported by the Twelfth Five-year Plan, the particularly important task is to release the earthquake catalog timely and seismological work as soon as possible. As a propagation window of the Earthquake Administration of Anhui Province, the traditional mode web and PC Internet mode were still used. With the development of the mobile phone and the internet popularization, the mobile Internet era starts. By 2015, the number of mobile Internet users will surpass desktop users. In addition to intelligent mobile phone, tablet computer and TV Internet users continue to increase even. In this situation, to make our website as far as compatible with various types of equipment, and to ensure good user experience will be more and more important. The WEB responsive web designing based on the BootStrap is a good tool. It adapts to the screen size flexible and to be compatible with a variety of intelligent terminal.

BootStrap; intelligent compatible; responsive web designing

2015-06-24

孙静(1978-)，女，安徽省合肥市人，工程师，硕士，毕业于中国科学技术大学，主要从事网络技术方面的研究工作.

TP393.092

B

1001-8115(2015)03-0038-04

10.13716/j.cnki.1001-8115.2015.03.010