浅谈Bootstrap制作响应式网站布局优点

移动互联网的飞速发展，不同尺寸大小、不同分辨率的移动终端设备纷纷面市，这为网络应用端的设计提出了新的要求。一个网站怎样能在数十种屏幕上显示符合用户的浏览习惯，成为大家所共同关注的问题。若要针对每一种终端各做一套页面，太耗费人力，维护起来也很困难。于是，为解决移动互联网浏览而诞生的响应式布局的概念应运而生。

1、引言

响应式布局是EthanMarcotte在2010年提出的，简而言之，就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。因此，响应式布局面对不同终端设备灵活性强，能够快捷解决不同终端的显示适应问题。

Bootstrap是目前最流行的开发框架之一，它的最大的优势是开发响应式布局，移动设备优先。它是基于HTML、CSS和JS开发出来的框架，提供了很多css和javascript的效果，内置了许多漂亮的样式。传统的网站开发需要花很大功夫才能实现不同分辨率下兼容布局，而Bootstrap的出现使得网站开发更加简单快捷，用Bootstrap制作响应式网站，令前端开发人员得心应手。

2、Bootstrap框架功能简介。

2.1 预处理脚本

虽然Bootstrap提供的CSS样式表可以直接使用，但是Bootstrap的源码是基于最流行的CSS预处理脚本-Less和Sass开发的。所以，可以采用预编译的CSS文件快速开发，也可以从源码根据自己的需要定制样式。

2.2 CSS媒体查询

多种设备共用一个框架，设计的网站和应用能在Bootstrap的帮助下通过同一份代码快速、有效适配PC设备、手机、平板，这一切都是CSS媒体查询(MediaQuery)的功劳。

2.3 多种可复用的组件

多种组件可以在所需要处多次重复使用，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。如GlyphiconHalflings的字体图标，是一套图形字体，可以像字体一样定义大小、颜色，易于使用，而且品质好。

2.4 预定义样式表

Bootstrap包括基本的CSS元素，这些元素用于排版、表单、按钮、表格、网格、导航、警告等。Bootstrap的预定义样式表，对网站的字体，字号都有统一的规定，能让网站整体上更加统一，而且这些预定义样式也可以随意更改。Bootstrap包括四种前缀，分别是xs、sm、md、lg。除了可以定义页面或各模块在不同显示设备上的显示效果外，也可以用来定义Bootstrap中大部分组件的尺寸。例如Button组件就可以很方便的定义大小。除了以上的尺寸定义外，Bootstrap还包括基础样式（内外边距、字体等）、颜色样式、状态样式（如按钮的点击状态）、动画样式（进度条的动画效果）等，这些样式的设置都非常的方便，不仅用起来简单，更能通过不同的组合，形成多种漂亮的效果。

2.5 拥有多种jquery插件

Bootstrap有非常丰富的插件，用户可以逐个引入到你的页面中，也可以简单地一次性引入所有插件。通过Bootstrap插件，开发者可轻易地操作窗口弹出框、警告框、模态框、工具提示框、滚动条、按钮等。Bootstrap最突出之处是，它提供了基本的架构与样式。可以让用户不必再费神费力地写脚本。

2.6 响应式的流式栅格系统

Bootstrap为用户提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的变化，系统会自动分为最多12列，它包含了易于使用的预定义类，还有强大的mixin用于生成更具语义的布局。Bootstrap为不同的屏幕尺寸分别定义了四种情况，分别是：小屏幕手机设备（<768px）、小屏幕平板设备（≥768px）、中等屏幕电脑（≥992px）、大屏幕桌面（≥1200px）。在它的样式中，前缀分别是xs、sm、md、lg。用户可以方便的使用这些前缀，在不同的插件或自定义样式中应用设置，灵活的组合出合适的页面。

3、用Bootstrap制作响应式布局的简要步骤

3.1 下载Bootstrap3。

下载最新版Bootstrap3，可以到Bootstrap中文网下载，只需要下载用于生产环境的Bootstrap。

3.2 准备JQuery。

要使用Bootstrap必须要有JQuery，可以从Bootstrap中文网的CDN里面保存jquery的压缩版，也可以自行下载JQuery。

3.3 进行相应的配置

载入下载好的Bootstrap的CSS文件，代码如下：<linkhref="css/bootstrap.min.css"rel="stylesheet">使用Bootstrap插件之前必须先引入jquery，因为bootstrap是基于jquery的，代码如下：<scriptsrc="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><scriptsrc="js/bootstrap.min.js"></script>如若要兼容IE9以下的浏览器，还要加相应的代码，在相应的配置完成后，就可以开始使用Bootstrap3的全局CSS样式、Javascript插件和Bootstrap组件。

3.4 用Bootstrap的栅格系统实现响应式布局

Bootstrap移动设备优先的响应式流式栅格系统，随着屏幕或视口（viewport）尺寸的变化，系统会自动分为最多12列。栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，我们这里只使用行（row）。“行（row）”必须包含在.con－tainer-fluid（流式容器：固定宽度转换为100%宽度）中。

而在Bootstrap3中主要把屏幕分成了三种(这里以行（row）来说明)，.col-xs-*超小屏幕,手机(宽度<768px)，.col-sm-*小屏幕，平板(宽度≥768px),.col-md-*中等屏幕,桌面显示器(宽度≥992px)。不管在哪种屏幕上，栅格系统都会自动的分12列，.col-xs-*和.col-sm-*和.col-md-*后面跟的参数表示在当前的屏幕中占的列数。

实际上Bootstrap的栅格布局系统主要是利用CSS的媒体查询特性来实现的，在Bootstrap中，定义了下面几个关键的分界点阈值：超小屏幕（手机，小于768px），没有任何媒体查询相关的代码，因为这在Bootstrap中是默认的（Bootstrap是移动设备优先）；小屏幕（平板，大于等于768px），@media(min-width:@screen-sm-min){...}；中等屏幕(桌面显示器,大于等于992px)，@media(min-width:@screen-md-min){...};大屏幕（大桌面显示器，大于等于1200px），@media(min-width:@screenlg-min){...}。分别对应栅格布局系统里面的，超小屏幕.colxs-*小屏幕.col-sm-*，中等屏幕.col-md-*大屏幕.col-lg-*。

实际开发中，我们自己写的CSS文件中可以这样定义：当浏览器宽度最大不超过767px时可以用@mediascreenand(max-width:767px){.../*相当于在bootstrap定义的超小屏幕*/};当浏览器宽度最小不小于768px时用@media(min-width:768px){.../*相当于在bootstrap定义的除超小屏幕在外的屏幕*/}。

4、使用Bootstrap制作响应式网站的优点

4.1 节省时间

Bootstrap库中提供了许多现成的代码片段，利用Bootstrap进行web页面布局，开发者不必再花费大量的时间、费力地编码，只需找到合适的代码，插入到合适位置即可。另外，CSS利用LESS编写，很多样式和设计都已设计完成。

4.2 定制化

Bootstrap很重要的一方面就是你可以将它据为己有。你可以留取框架中需要的部分，抛弃不需要的。Bootstrap整体允许你根据自己的需要，裁剪自己开发的项目。

4.3 易于集成

如果你想进一步完善一个已完成的网站，Bootstrap可以帮助你。例如，如果你要统一使用自己编写的表格样式，你要做的是把你的样式复制到CSS样式文件中。Bootstrap将立即剔除它本身的样式，在这里，你需要将该文件与Twitter进行关联。集成的过程十分简单、方便、快捷。完成之后，你便可以把你的设计应用到你的核心内容上。

4.4 响应式

页面的设计与开发根据用户的需求以及设备环境，进行自动的响应和相应的调整，做到“一源多屏”。

4.5 持续更新快

Bootstrap包含很多HTML5和CSS3元素，这些元素被称为设计的未来。Bootstrap在不停地改进，且具有规律性与持续性。Web开发者一旦发现新问题，Bootstrap团队便立刻着手修复它。

5、结语

使用Bootstrap制作响应式网站布局，可以提高效率。但是，响应式布局要兼容各种终端设备，代码量必然增大，从而出现效率低下、网站加载时间长等问题。因此，在前端设计开发时，要权衡负载消耗与设计效果，以期达到最佳的用户体验。