Bootstrap框架在响应式Web设计中的应用

周萍+赵娜+李慕

摘要：Bootstrap是响应式网页设计的主要前端框架。分析了Bootstrap框架的全局CSS栅格系统容器及断点设置对页面布局自适应能力的影响，并以此为基础设计了能适应多尺寸屏幕及分辨率的响应式网站，实现了移动端与 PC 端网页显示的一致性。

关键词：Bootstrap框架；栅格系统；响应式设计；HTML5；CSS3

DOIDOI：10.11907/rjdk.162838

中图分类号：TP319

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

0 引言

响应式Web设计是在开发和设计网站过程中产生的一种方式，它的目的是让内容布局能随设备环境以及用户行为的不同而变化。设计内容包括流体栅格、弹性图片、CSS media query（媒体查询）的使用[1]。目前，用户使用的设备环境主要包含屏幕尺寸、屏幕定向、系统平台等。面对诸多设备环境需求，页面都能自动切换不同的分辨率以确保用户体验。因此，响应式Web设计能使网站兼容不同的设备环境。

Bootstrap是基于LESS的一套前端工具库，其拥有一套完整的基础CSS模块、预定义样式表等。其中，全局CSS栅格系统负责对不同尺寸、不同分辨率的显示终端完成自适应匹配，确保显示内容以整洁、流畅方式呈现给用户。而CSS栅格系统中的容器及断点设置是关键技术，兼容性好的设置对内容显示起到重要作用，能给用户带来良好体验。

1 栅格系统应用

网页设计中的栅格系统指网页以规则的网格阵列来指导和规范网页中的版面布局以及信息分布[2]。对于网页设计来说，栅格系统的使用不单使网页更具可用性，还能让网页的信息呈现更加细致，前端开发网页也更加灵活与规范[3]。

1.1 栅格系统设计原理

在栅格系统中，为了使网页布局显得整洁规范，往往将整个屏幕划分成若干列，每列根据显示内容设置一定宽度。如图1所示，flowline流线为显示终端宽度，栅格系统则是将Web页面灵活地分割成不同整数宽度的column列（页面内容区域），以适应不同设备，利用gutter槽来分隔各个内容区域，并添加margin外边距使页面整体与显示终端两侧保持距离，使显示内容整洁、流畅。

通过解析栅格系统原理公式，可充分理解Web页面布局与栅格系统之间的深层关系，使前端开发人员更加灵活运用栅格系统来制作响应式Web页面。

1.2 Bootstrap中栅格系统应用

Bootstrap的栅格系统基于网格系统发展而来[4]，应用十分广泛，如书籍版式设计[5]等。Bootstrap的栅格系统是一套响应式、移动设备优先的流式栅格系统，通过媒体查询（media query）确认当前页面容器（container）宽度，并通过内置的响应式、移动设备优先的流式栅格系统进行渲染，使页面在不同屏幕宽度范围下使用不同的容器宽度。随着屏幕设备或视口尺寸增加，系统会自动分为最多12列[6]。

栅格系统应用包含两个要点，本文以某管理系统为例进行说明。

（1）容器（container）、行（row）和列（column）之间的构建关系。为了给栅格系统设置合适的排列（alignment）和内补（padding），需将每一行“row”包含在一个容器中，该容器用class命名为“container（固定宽度）”或者“container-fluid（100% 寬度）”。

Bootstrap中的栅格系统将每一行分成12等份，其中，“row”代表行，“col-xx-y”代表列，而“col-xx-y”中的“xx”表示断点类型，“y”值则从1-12中取。在不同的列中添加相应页面内容，合理选择列的y值，才能使页面内容更具可读性。

（2）不同断点类型的意义及其搭配。实际上Bootstrap的栅格布局系统主要是利用CSS的媒体查询特性来实现[7]。在Bootstrap中定义了以xs、sm、md、lg来表示的4种不同阈值断点类型[8]，如表1所示。

在视口宽度由小变大的过程中，column列会保持默认的竖直堆叠，当视口宽度超过sm的断点值，sm断点样式生效，column列变为一行两列；当视口宽度超过lg的断点值，lg断点的样式生效，由于lg断点的样式代码定义在sm断点之后，所以lg断点会覆盖sm断点样式，column列变为一行四列，如图2所示。

2 响应式Web设计案例

2.1 设计规划

案例：某管理系统网站的外观设计需要兼顾外在、内在、前端和后台需求。在本次主页规划中，将页面元素归纳为头部功能区、左侧导航区、内容区3 个部分，如图 3所示。其中，头部导航区包括系统名称、功能列表等；内容区由最新提醒、我的任务、最新订单、工程进度4 个模块进行展示；导航区则为简单的文字按钮。

（1）页面设计。目前仍有一些用户使用非移动端浏览网站，而响应式Web设计原则是移动设备优先，该原则弱化了非移动端用户的视觉体验。结合实际环境，在某管理系统主页上遵循优先采用PC端设备、兼顾移动端设备原则。

2.2 媒体查询

媒体查询部分主要适配电脑、手机和平板电脑。在Bootstrap框架自带的 Less 文件中使用media query来创建断点阈值，以此实现响应式Web设计，实现代码如下：

超小屏幕xs（< 768px），在 Bootstrap 中是默认配置；

小屏幕sm（ ≥768px ），@ media （ min-width： @ screen-sm -min） { … } ；

中等屏幕md（ ≥992px ）， @ media （ min-width： @ screen- md-min） { … }；

大屏幕lg（ ≥1200px ）， @ media （ min-width： @ screen-lg- min） { … }

在实际网站开发过程中，开发者不需要花费过多时间进行编码，只需要在相应的位置插入正确的代码即可。

2.3 栅格系统

根据响应式Web设计理念，页面元素都是向左浮动的。当一行无法容纳某个页面元素时，该元素将自动在下一行靠左显示。依据此规则，每个元素在页面上都有合理的位置。使用 Bootstrap 框架的流式栅格系统，可以很好地实现响应式Web设计的流式布局[8]。本案例应用该原理代码如下：

若为PC端显示宽度大于1200px，此时由断点类型col-md-2控制左侧导航栏宽度。因页面宽度较大，页面右侧内容将以多行兩列横向显示；若PC端显示宽度小于768px，此时由断点类型col-sm-4来控制左侧导航栏宽度，而页面顶部的菜单栏因页面宽度变小而隐藏，转化成按钮形式来实现功能展示，页面右侧内容以单列多行呈堆叠方式显示；若为移动端显示效果，此时由断点类型col-xs-4来控制左侧导航栏宽度。由于页面宽度较小，页面内容纵向单列显示。

通过定义class=“col-xs-4 col-sm-4 col-md-2”，多种断点类型组合使用，使Web页面效果不受屏幕分辨率影响。在不同的屏幕分辨率下，不同的column列的类会发挥相应作用，以确保用户体验，实现响应式Web设计。

2.4 栅格系统在响应式Web设计中的优势及问题

栅格系统在响应式Web设计中有很多优点：①代码简洁、易懂，非前端开发人员也能快速掌握；②使用栅格系统可以节省网站开发与维护成本；③提升网页书写规范性。

栅格系统并非完美，有以下缺陷需要优化：①类名命名没有语义化，需要参考手册；②对IE浏览器的兼容性有待改善。

3 结语

Bootstrap框架通过主动查询设备页面容器宽度来构建适应不同屏幕分辨率的响应式Web网页，拥有较好的用户体验。但过度依赖HTML添加class来增加表现力，违背了内容与表现分离的原则，而且class的命名语义化尚显不足。因此，Bootstrap对于快速开发很有帮助，但对于网页个性化设计则还需改进。

参考文献：

[1]MARCOTTE E.Responsive Web design[M].Happy Cog，2011.

[2]吴智君，丘昊.浅析网格系统在网页设计中的重要性[J].计算机光盘软件与应用，2010（5）：37-38.

[3]曾祥利，柴炜嘉.响应式布局中栅格系统和弹性盒子的比较[J].产业与科技论坛，2015（20）：62-65.

[4]赵蓉.浅谈书籍版式设计中网格系统手法的使用[D].石家庄： 河北科技大学，2014.

[5]高榕岭.Bootstrap在前端开发中的优势[J].计算机光盘软件与应用，2015（1）：74-75.

[6]Bootstrap Expo[EB/OL].[2014-06-06].http：//expo.getbootstrap.com/.

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

[8]张树明.基于响应式Web设计的网页模板的设计与实现[J].计算机与现代化，2013（6）：125-127.

（责任编辑：杜能钢）