有一天，老板把一群人叫到办公室，说：刚刚接到一个项目，嗯，项目不大，也挺简单，客户要做一个网站，支持手机和pc，我们一听，嗯，像原来那样用JS识别跳转不就行了嘛，也不复杂，多写一套页面而已。刚想把想法说出来，老板又说了：这次我们不采用原来的跳转了，我们要一个页面支持PC和手机，多个页面客户管理起来比较麻烦。说完老板转身就走了，留下心中万马奔腾的我们。没办法，迫于生计压力只好去找解决方案了，这时候是强大的度娘解救了我，使我了解到还有一种网站既能在PC下正常显示，在手机下显示效果也不差。尼玛，这不就是我要的吗，赶快在各种平台搜索相关资料视频。学习了一段时间，终于有所收获，原来有一种网站叫响应式网站，有一种框架叫Bootstrap，我*，还是脸书出品，脸书出品必属精品啊。
Bootstrap问世已经2、3年了，现在越来越多的网站都是响应式的，像一些国际化的大网站早已是响应式的了，如微软官方、苹果官方、IBM官方网站，大家可以试着在浏览器中打开这些网站，然后把浏览器拉窄来，你会发现，在宽屏时与窄屏时网站的显示效果是不一样的，在窄屏是所有的内容都在一屏显示，同时下方是没有左右的滚动条的，现在我们做的项目全都是支持响应式的。
什么是响应式？这是由于我们的电脑显示器的分辨率与手机的分辨率不一样，如果一个传统的网站，你在手机中打开会发现网站的字体图片等信息会很小，小到你几乎看不清，这对于用户来说是非常不好的体验，现在有了响应式我们就可以针对手机平板等这种小屏幕的设备来进行优化，给用户一个良好的用户体验。当然有人会说我们如何知道当前设备是手机还是平板或者电脑呢，其实是有很多方法的，我们可以用JS获取当前设备信息，我们可以知道它是Android手机还是苹果手机还是Windows Phone或者是其他操作系统的收，这种方法是比较发杂的一种方法，我们有个简单的方法来判断是手机、平板、PC，那就是媒体查询，我们可以定义一个宽度，当设备的宽度小于这个值得时候我们就认为它是手机，大于这个宽度就是PC，这样即简单有实用。
Bootstrap框架就是采用了媒体查询来进行构建响应式网站的，Bootstrap框架最关键的就是它的栅格系统了，Bootstrap中定义了container（容器），容器是用来放栅格的，我们以前在传统网站开发的时候总是会这样写css：.main { margin:auto; width:1000px;}，现在我们引入Bootstrap框架之后就不用在这样定义主体宽度了，应为容器的宽度是会随着设备的分辨率变化的，见下图：
当设备的宽度大于1200px的时候，容器的宽度为1170px，当设备的宽度大于992px小于1200px的时候容器款多问970px，当设备的宽度大于768，小于992的时候容器的宽度为750px，当容器的宽度小于768的时候，容器的宽度就是100%了。
栅格系统的使用与列之间的间距的调整，大屏时，container的宽度为1170px，但是当我们把一张图片放在一个容器里面，图片的宽度设置为100%时，我们会发现图片的宽度为1140px，这是应为container有向左和向右各15px的内边距，哪为什么要设置这个15像素的内边距呢，这是因为当我们在手机设备上浏览是，如果没有这个边距的话，文字或者图片就会贴边了，有这个边距的话，这样在手机设备上访问的话就会相对美观一些。
栅格系统把一个容器分成了12等分，为什没是12呢，我想是因为12是2、3、4、6这些数字的倍数，这样我们在对页面进行划分的时候也就能够满足我们大部分的需求了。栅格系统在对容积进行划分的时候还进行了针对不同的屏幕宽度的定义，如：我们可以设置一个div当大屏的时候占3个栅格（3/12=1/4），而当在手机屏幕下的时候，如果占四分之一的话会发现宽度太小了，这时我们可以设置它在手机模式下占一半的宽度，这样就不会由于太窄而信息无法友好的显示了。
<divclass=”container”>
<divclass=”row”>
<divclass=”col-lg-3 col-md-4 col-sm-6 col-xs-12“>
…
</div>
<divclass=”col-lg-9 col-md-8 col-sm-6 col-xs-12“>
…
</div>
</div>
</div>
上面的代码就是一个标准的栅格系统的使用了，为什么要在container下包一个row呢，这是因为每个栅格都有向左与向右的15px的内边距，而row有向左与向右的-15px的外边距，这样的话就刚好抵消了栅格的内边距了，是的容器的左右可以对其了。因为每个栅格都有向左与向右的15像素的内边距，那每个栅格之间的距离就是30像素了，我们在做项目的时候发现30像素对于有些网站来说是太宽了，我们可已通过一些方法来把这之间的间距稍微缩小点，定义css：
.padding5 {padding-left:5px; padding-right:5px;}
.padding10 {padding-left:10px; padding-right:10px;}
使用方法1：
<div class=”container”>
<div class=”row padding5”>
<divclass=”col-lg-3 col-md-4 col-sm-6 col-xs-12 padding10“>
…
</div>
<divclass=”col-lg-9 col-md-8 col-sm-6 col-xs-12 padding10“>
…
</div>
</div>
</div>
这样使用的话会似的每个栅格之间的距离变为20像素，如果觉得20像素还是太宽了的话，可以使用下面的方法：
<div class=”container”>
<div class=”row padding10”>
<divclass=”col-lg-3 col-md-4 col-sm-6 col-xs-12 padding5“>
…
</div>
<divclass=”col-lg-9 col-md-8 col-sm-6 col-xs-12 padding5“>
…
</div>
</div>
</div>
这样可以使得每个栅格之间的距离缩小到10像素，总之，row上的内边距与栅格上的内边距之和为15像素，这样就不会影响到栅格系统了。
当然了，Bootstrap还有很多的其他功能，如组件与Javascript插件，我们可以用其来实现我们的许多功能，在我做网站的过程中使用最多的有下面几个组件与插件：
1、 Bootstrap矢量图标与FontAweSome矢量图标，详见：
http://code.zoomla.cn/Boot/components.html、http://code.zoomla.cn/Boot/font.html
2、 输入框组件、按钮组件
3、 导航与导航条组件
4、 媒体对像，用来显示图片带标题与简介的列表非常方便
5、 模态框 一个Bootstrap自带的弹出层效果
6、 Carousel 图片滚动效果，
在开始的时候会这些基本上就足够了，关于更多的Bootstrap知识与使用方法可见逐浪官方响应式开发文档：http://code.zoomla.cn/