Bootstrap框架在响应式Web设计中的应用
作者：周萍 赵娜 李慕
来源：《软件导刊》2017年第06期
        摘要：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]。
        栅格系统应用包含两个要点，本文以某管理系统为例进行说明。
        （web布局框架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） { … }；