王永恒 将存峰

（1.上海中侨职业技术学院 上海市 201514 2.上海市软件中心 上海市 201112）

1 BootStrap及相关技术简介

1.1 Bootstrap技术

Bootstrap 是流式栅格系统，目前企业里比较热门的制作前端响应网页的框架，它的显著特点是移动设备优先，在设计与开发中，一般设置四个屏幕，移动端，小屏，中屏和大屏，移动端设备样式优先，其余设备继承移动端。BootStrap 支持大多数浏览器，如Firefox 和Chrome 等[1]。

在移动端进行设计时，首先需要引入meta 标记，meta 标记中viewport 的设置直接会影响到不同屏幕的响应，Bootstrap 框架自带.container 或 .container-fluid 类，称为布局容器，行必须包含在此布局容器中，即行必须在.container class 内，目的是获得适当的alignment 和padding。padding 是内边距，可以设置列中内容的边距，该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移[2]。

1.2 响应式布局

在传统的网页设计与开发中，在不同的设备终端显示时，需要单独设计每个终端的布局，PC 端设计一套，手机端设计一套。而使用响应式布局可以实现不同屏幕分辨率的终端上浏览不同的网页的布局。响应式布局可以通过检测视口的分辨率响应不同的客户端的布局和内容，通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。

2 基于BootStrap响应式网站的设计与实现

文中所设计的企业网站项目包含首页，新闻页面，乐园和联系四个主页面，本文主要是以“首页”和“联系我们”页面为例进行分析和设计。“首页”中主要是对Carousel 插件和nav 插件进行设计和实现，Grid System 布局的设计选择了结构比较清晰的“联系我们”页面。

2.1 meta标签引入

打开 网页，在＜head＞和＜/head＞中引入meta 标 记，添加viewport 和content 属性，其中content 中宽度等于设备宽度， initial-scale 是页面首次被显示可见区域的缩放级别，取值1 表示页面按实际尺寸显示，无任何缩放，代码如图1 所示。

2.2 BootStrap下载与安装

登录https://www.bootcss.com 中文网站，单击Bootstrap 中文文档，下载用于生产环境的Bootstrap 压缩包并将其解压到所创建的网站项目中，直接根据其开发文档使用Bootstrap3。将其中的bootstrap.css 放在CSS 文件夹中，jquery.min.js 和bootstrap.min.js 放在JS 文件夹中，三个文件在HTML 页面的引入位置如图2 和图3所示。

图1：meta 标记

图2：bootstrap.css 引入位置

图3：jquery.min.js 和bootstrap.min.js 的引入位置

2.3 nav导航模块和Bootstrap滑块设计与实现

2.3.1 nav 导航模块的设计和实现

导航栏是Bootstrap 的基础组件，是Bootstrap 响应式网站的一个突出特点。在 Bootstrap 中，导航栏包括了站点名称和基本的导航定义样式。在大屏、中屏和小屏中导航将横向布局，在移动端导航将以隐藏按钮（折叠）的形式出现，当单击按钮时弹出横向菜单，按钮菜单的实现主要是通过.icon-bar 类来实现的，是否被触发则是通过button 按钮的data-toggle=“collapse”事件实现的。

具体的设计如下：

（1）最外面直接使用＜nav＞＜/nav＞标签是导航条，class 为navbar，指定一个颜色，这里使用的navbar-inverse：黑底白字，daohang 是用户自定义的类，实现上边距和背景的颜色；

（2）＜nav＞＜/nav＞标签中添加两个＜div＞，其中第一个＜div＞里引入button 标记，主要实现的功能是当屏幕小于一定分辨率的时候，导航条自动隐藏。按钮标签里嵌套了三个span 的icon，引入navbar-toggle 样式类和collapse 属性(收起的作用)，点击的时候目标为data-target。

图4：四屏导航效果图

当窗口缩小到一定分辨率时（移动端），导航条会折叠成三个“横线”的按钮显示出来，当点击这个按钮时可以显示出导航的菜单来。折叠按钮效果如图4 所示。第二个div 标签中添加带有 class .nav、.navbar-nav 的无序列表，可以实现下拉菜单，同时注意要增强可访问性，一定要给每个导航条加上role="navigation"。设计参考代码如图5 所示。

2.3.2 Bootstrap 滑块（Carousel）设计与实现

Bootstrap 滑块（Carousel）插件实现的效果是图片轮播，内容多样化，可以是图像、内嵌框架或视频等。一个简单的图片轮播是由轮播指标，轮播项目和轮播导航构成的，其中轮播指标指的是轮播图下方的原点，轮播项目指的是实现轮播效果的图片，轮播导航指的是轮播图片左右两边的箭头。例如下图中就使用 Bootstrap滑块（Carousel）插件实现了一个循环播放。为了实现轮播，设计中引用了默认的class 类carousel slide，表示轮播滑动， dataride="carousel"属性用于标记轮播在页面加载时就开始动画播放，而不是需要单击时才触发，实现效果图如图6 所示。

Carousel 设计详细过程如下：

（1）轮播指标：在此部分的设计中，使用carousel-indicators设置indicators 的索引项， data-slide-to 将每个轮播指标与图拼列的索引位置一一对应，索引从 0 开始计数， data-target="#myCarousel"将所有轮播指标指向激活轮播的元素，就是id=” myCarousel “。

（2）轮播项目：每一个轮播的img 都放在一个div 中，外层div 中引入的class="carousel-inner"是轮播的内容，包括所有轮播图的盒子；class="item"，表示轮播的每一张图片。

（3）轮播导航：在此部分的设计中，＜a＞超链接实现点击切换，href 指向启用轮播的元素的id。属性 data-slide 接受关键字 prev 或 next，用来改变幻灯片相对于当前位置的位置，class="carouselcontrol " 用于添加左右两个轮播导航箭头，left 和right 指的是左箭头和右箭头, Glyphicons 是 Bootstrap 字体图标，class="glyphicon glyphicon-chevron"是图标箭头。

图5：导航代码结构

图6：轮播箭头效果

图7：Section 主体部分和footer 版权参考代码

2.4 BootStrap栅格布局（Grid System）的设计及实现

本部分的Grid System 设计以“我们”页面为例展开设计，本页面分为三部分，header 顶部logo 和导航部分（上文中已经介绍），中间Section 主体和底部Footer 版权部分。

2.4.1 Section 主体部分的设计

此部分的Grid System 设计分为上下两部分。在上面部分的“联系方式”和“网站介绍”部分，大屏(min-width:1300px)和中屏（min-width:992px）左右两部分栅格布局的列数分别为4 列和8 列，记为col-md-4 和col-md-8；小屏幕（min-width:768px）和移动端（min-width:480px）的栅格布局设置为col-xs-12，在此部分中引入了自定义的多个类about-img、lianxi 和 brief 等以实现CSS 样式标准。在 “爱獒生活”部分的设计中，大屏和中屏分为三列col-md-4，小屏和移动端分为两列，记为col-md-6，在此部分中自定义的类有dg-bianju。

2.4.2 Footer 版权部分的设计

此部分四个屏幕的Grid System 设计是一样的，总12 列中平均分为2 列col-sm-6，自定义的类有footer、banquan、biankuang、pull-right 和weixin 等。部分参考代码和页面整体效果如图7 所示。

3 总结

BootStrap框架在响应式网页的设计中占据着非常重要的作用，其中的插件组件在一定程度上能够缩短开发的时间，节省成本，通过BootStrap 所开发的页面能够适应不同分辨率响应式WEB 网站，尤其是在智能移动端更为用户提供了良好的视觉效果。响应式网页的设计对细节的要求是非常高的，需要不断的调试，在本文提到的企业项目的设计过程中，上海市软件行业协会给予了大力的支持，上海市软件开发中心的IT 运维主管、网络工程师蒋存峰先生在响应式网站的设计与实现的过程中给予了详细的指导，再次感谢！