周萍+赵娜+李慕

摘要：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]。……