基于Bootstrap的响应式网页设计

何秀全

摘要：响应式设计已成为移动互联时代网页设计开发的基本要求。Bootstrap作为成熟的前端框架可极大降低开发设计人员进行响应式设计的工作量。以学校无线网络登录页面响应式改造设计与实现为例，探讨了Bootstrap的优势、使用方法和技巧。

关键词：Bootstrap；响应式设计；网页设计

DOIDOI：10.11907/rjdk.171180

中图分类号：TP319

文献标识码：A 文章编号：1672-7800（2017）006-0104-02

0 引言

近几年来，随着移动互联网的发展，用户对网站的访问越来越多地来自于移动设备。目前，在网站、信息系统开发中，移动端的需求分析已经成为必不可少的环节。早期开发中，为满足用户的这类需求，有的开发人员根据浏览器的user-agent判断设备类型、响应页面，显然这需要制作、维护两套以上的页面。由于不同浏览器（或不同版本）对页面CSS样式和JS脚本的解释有所不同，因此采用这种方法开发的页面要能满足环境或用户需求变化所需的代价是非常高的。随着响应式设计理念的提出，越来越多的设计人员选择使用响应式设计框架，以低成本的方式实现页面的不同设备自适应显示。然而，前端开发人员使用DIV+CSS+JS的方式实现响应式设计是非常繁杂的工作，不但需要有一定的代码编写能力，还要有美工功底，因此只有比较优秀的有经验的前端开发人员才能驾驭这种技能。

Bootstrap 最初是由就职于Twitter 的一个设计师和一个工程师创造的，目前Bootstrap 已经成为世界上最流行的前端开发框架和开源项目。Bootstrap框架中包含有丰富的组件，其中包括下拉菜单、按钮组、按钮下拉菜单、导航条、面包屑、分页、排版、缩略图、警告对话框、进度条等。它还自带了一组jQuery交互插件，包括模式对话框、标签页、滚动条、弹出框等，不但功能完善，而且十分精致，成为众多jQuery项目的默认设计标准。这些模块化的组件在修改时也非常方便，只需要修改变量就可以形成自己的独特风格。普通网页开发人员只要具备基本的CSS+DIV+JS能力，通过短时间的学习就可以上手使用Bootstrap，且开发的网页可较好地兼容各类浏览器。可以说，通过灵活使用这套前端开发框架，可以事半功倍地达到前人难以达到的能力高度。因此，Bootstrap等成熟的框架特别适合前端开发新手或者平时主要工作不是做前端开发的开发人员。

本文通过改造一个无线网络的登录页面讨论使用Bootstrap进行响应式设计的优势和方法。

1 无线网络登录页改造需求分析

上海外国语大学无线网络使用的是Aruba的Web Portal方式认证。用户登录连接好无线信号后，访问外网将自动弹出登录页面，用户输入学校的统一身份认证账号，登录成功后弹出相应的提示页面。由于早期无线网络的使用设备是笔记本电脑，因此整套登录页面设计并未考虑到小屏的手机设备。随着手机、Pad用户的增多，登录页面已经成为意见集中反映之处。

本次页面改造的内容主要包括3个方面：①实现响应式设计，信道登录页、提示页可自适应各类终端；②新增登录错误提示，主要包括账号密码类错误和无线控制器反馈的错误；③可查询用户账号对应的在线终端，并可注销登录。学校允许一个用户账号可同时拥有3个设备在线，如超出则需要注销已登录的设备，原来未能提供用户自助注销的功能，此次改造需一并实现。

2 无线网络登录页改造设计实现

2.1 页面自适应改造

（1）下载、配置Bootstrap及一些其它js插件。在Bootstrap中文网（http：//v3.bootcss.com）下载最新版的用于生产环境的Bootstrap。由于Bootstrap 必须要有jQuery，因此还需要下载 jQuery。配置载入下载好的Bootstrap的 CSS 文件、jQuery，代码如下：

（2）响应式布局实现。之所以能用Bootstrap实现响应式设计，主要是因为其提供了一套响应式、移动设备优先的流式栅格系统。使用该栅格类后，页面屏幕或视口（viewport）会自动分为最多12列，通过一系列的行（row）与列（column）的组合可创建相应的页面布局，其工作原理如下：①“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）；②通过“行（row）”在水平方向创建一组“列（column）”；③内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素；④类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局；⑤如果一“行（row）”中包含的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列；⑥栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-*，也不影响大屏幕设备。

2.2 錯误提示功能

（1）账号错误。包括密码错误、用户名不存在两类。在用户输入完用户名密码，点击提交后，通过jQuery的Ajax提交到账号有效性验证页面，根据错误类型在输入框下方进行相应提示。

（2）无线控制器反馈的错误。包括违反规则错误（如已在线终端超出、设备被拒绝）、其它无法认证的错误等，在页面进行错误提示。

2.3 在线设备查询及注销功能

根据Aruba提供的API文档，通过数据库查询操作，得到用户名对应的登录设备信息，设计在线列表页面。利用注销操作API，在每个在线设备后面提供注销操作功能。

3 结语

随着移动端需求的增加，需要经常对网站进行响应式设计。通过利用成熟的前端框架，可实现以较小的代价完成页面设计开发的前端工作，而将精力聚焦在更重要的功能实现上。Bootstrap作为业界主流的前端框架，具有功能丰富、简单易用、可扩展性好等优势，值得各类网站开发人员学习和研究。

参考文献：

[1]贾英霞.浅谈Bootstrap制作响应式网站布局[J].福建电脑，2015（8）：122-123.

[2]陈员义，李艺志.基于Bootstrap响应式Web前端研究[J].福建电脑，2015（12）：72-73.

[3]舒后.基于Bootstrap框架的响应式网页设计与实现[J].北京印刷学院学报，2016（4）：47-52.

[4]王少华.基于Bootstrap的响应式网页设计与实现——以i-太极网站主页为例[J].宁波广播电视大学学报，2016（9）：119-122.

（责任编辑：孙 娟）