响应式建站框架研究

郑秀琴

摘 要：本文主要阐述了响应式设计概念和响应式布局与static静态布局、fluid流式布局、自适应布局的异同，以及各种响应式设计前端框架比较研究。着重研究了Bootstrap框架。运用Bootstrap框架进行响应式建站，其灵活性和可扩展性加速了响应式网站项目开发的进程，推动了响应式技术的发展。

关键词：响应式；Bootstrap；前端框架

基金项目：本文为衢州市科技计划项目“全网营销背景下企业响应式网站设计研究（项目编号：2017G15）”的研究成果。

1 前言

近些年以来，由于手机、平板等移动端设备的广泛应用，移动端的流量在不断地增大，为了提高用户使用不同设备浏览网页时的体验，响应式网页设计越来越来盛行。

2 响应式设计综述

2.1 响应式设计概念

目前，随着信息技术的发展和人们物质生活水平的提高，浏览网页获取信息的方式不仅仅局限于使用PC端的浏览器。對于大多数网站而言，没有资金或努力为每个新的分辨率移动设备产品设计合适的移动网站版本。对于用户来说，用户只关心信息获取的体验，并不会考虑到开发的繁琐。首先，响应式网站使用一个统一的URL，无论是在手机、平板电脑还是PC桌面或笔记本电脑上。其次，响应式网页设计依靠媒体查询来促进不固定的布局并实现灵活的设计。也就是说，通过确定各种设备属性值，例如设备类型、分辨率、物理屏幕尺寸和颜色，确定相同存储空间的布局。第三，所有站点都使用响应式设计（仅使用一个代码库）来适应所有需求，并努力实现多平台多终端服务的一致性。

2.2 Responsive Layout

Responsive Layout不同于static layout、fluid layout、adaptive layout。静态布局是Web开发的早期的网页布局方式，页面具有固定大小。随着窗口大小的改变，元素的大小不会改变。因此，使用静态布局来设计网页，页面很简单，开发很容易，维护也很容易。随着屏幕分辨率和尺寸的多样化，静态布局已不能满足用户的浏览需求，静态布局逐渐被流式布局所取代。流式布局是页面整体布局始终不变，但页面中的元素会随着分辨率而改变。页面元素大小使用相对大小，而不是绝对大小。这种布局在屏幕尺寸相差很大时，显示会很不美观，于是就出现了自适应布局。自适应布局是通过媒体查询为不同的分辨率定义不同布局，在一定分辨率范围内使用相同的静态布局。这样分辨率改变时，页面中的元素大小不变但布局会改变。而响应式布局结合了流式布局和自适应布局的优点，效果会更加美观。在越来越追求完美用户体验的设计时代，很好地解决了PC、手机和平板不同分辨率的兼容问题。

3 响应式框架比较研究

前端开发框架是指一组产品化的HTML、CSS、JavaScript组件。随着响应式设计的流行，响应式前端框架的应用也越来越广泛。响应式框架有许多，这里讨论五个在github上排名靠前且深受欢迎的五个响应式框架。每个框架都有自己的优缺点和特定的应用领域。大家可以根据特定项目的要求选择适当的框架。

3.1 Bootstrap

Bootstrap是当今所有流行框架中无可争议的老大，它是Twitter公司的两位工程师合作推出的，在Github上非常火爆。鉴于其广受欢迎，而且用户每天仍在增长，所以这个绝妙的工具应该不会让你失望，也不会在你成功建立一个网站之前离开你。

3.2 Foundation

Foundation是这几个框架中第二大的，在像ZURB一样实力雄厚的公司支持下，这个框架确实很强大。Foundation已经在很多大型网站上投入使用，包括Facebook、Mozilla、Ebay、Yahoo！和国家地理等。Foundation提供多种UI组件，是一个易用、功能强大并且非常灵活的框架，它可用于构建各种设备上的 Web 应用。

3.3 Skeleton

Skeleton 有一系列 JS 和 CSS集合，容易上手，使用它可快速开发出适合各种不同分辨率设备的漂亮网站。Skeleton 使用网格开发，特别适合于快速开发一些小项目。

3.4 Less Framework

Less框架的出现，简化了CSS代码编写，深受一些设计师喜爱。它是一款经典的支持自适应的CSS网格系统，它包含4个布局和3套预设字体，以单一网格为基础，可改变列的数量和边缘的宽度做出不一样的布局，满足PC和移动设备的浏览需求。

3.5 ResponsiveAeon

ResponsiveAeon 是Aeon的一个HTML5和CSS3的框架，有一个12列、全宽1104px的支持响应式的网格系统，并且提供了3个非常容易理解的类Container、Content、Col供使用，它使用了媒体查询，支持各种分辨率的设备。除了网格系统，它还提供列表、表格、按钮、表单等，因此使用它很容易快速构建简洁、美观的响应式布局。

4 Bootstrap框架研究与应用

4.1 Bootstrap框架简介

Bootstrap框架来自Twitter，是设计师Mark Otto和Jacob Thornton合作开发的HTML、CSS和JavaScript框架。它基于HTML、CSS、JavaScript技术，提供了一个直观的网页设计工具包，可用于开发响应式布局、移动设备优先的WEB项目。它还提供了许多流行且简单的UI组件、网格系统和一些常用的JavaScript插件，使Web开发更快速、简便。Bootstrap框架自推出以来一直很流行，并且一直是GitHub上流行的开源项目。美国国家航空航天局和美国MSNBC有线新闻频道都使用了该项目，目前它也是欧洲和美国最流行的前端框架。

4.2 移动设备优先

在Bootstrap2中，移动设备友好的样式已被添加到框架的某些关键部分。在Bootstrap3中，整个框架被重写，以便它开始支持移动设备。移动设备友好的概念不是简单地为移动设备添加一些可选样式，而是直接集成到框架的内核中，即Bootstrap首先基于移动设备。使用智能手机浏览PC站点时，通常会自动缩放到合适的宽度，以便视口（视口指的是移动设备上的屏幕窗口）可以顯示整个页面，但这会使文本变得非常体积小，浏览内容不方便。

4.3 布局容器

Bootstrap框架需要为页面内容和栅格系统包裹一个.container的容器。Bootstrap提供了两个类：.container类和.container-fluid类，这两种容器类不能互相嵌套。container类用于固定宽度并支持响应式布局的容器.在网站制作中可使用如图1所示的方式使用container类。container-fluid类用于100%宽度，占据全部视口。

4.4 流式栅格系统

Bootstrap框架为用户提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口大小的变化自动划分为12列。它包含易于使用的预定义类和强大的mixin，用于生成更多语义布局。网格系统用于通过一系列行和列的组合来创建页面布局，并且网页的内容可以放置在这些创建的布局中。“行（row）”必须包含在.container（固定宽度）或.container-fluid（100%宽度）中，以便为其赋予合适的排列（alignment）和内补（padding）。通过“行”在水平方向创建一组“列（column）”。表1显示了Bootstrap的网格系统如何在多屏设备上工作。

5 结束语

综上所述，在众多的前端开发框架中，目前Bootstrap无疑是其中的佼佼者，其灵活性和可扩展性加速了响应式网页项目开发的进程，推动了响应式技术的发展。不同的响应式框架都各有优缺点，框架的许多选项都是模块化的，开发人员可以结合多种框架，使用不同的组件。

参考文献

[1]徐涛.深入了解Bootstrap[M].北京：人民邮电出版社，2016：1-8.

[2]DavidCochran.Bootstrap实战[M].李松峰，译.北京：人民邮电出版社，2016：1-10.

[3]杨彬.浅谈响应式网页设计[J].辽宁行政学院学报，2016（5）：161-161.

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