代码使用：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="/stylesheets/bootstrap.min.css">
原理：
首先栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局。bootstrap根据不同屏幕尺寸，选择不同的栅格选项。一共有四种栅格选项，超小屏、小屏、中屏、大屏。栅格系统分为12列，即每行最多可容纳12列。若里，一个.row内包含的列（column）大于12个会自动排版。
而在Bootstrap3中主要把屏幕分成了三种：
.col-xs-* 超小屏幕，手机 (宽度<768px)
.col-sm-* 小屏幕，平板 (宽度≥768px)
.col-md-* 中等屏幕，桌面显示器 (宽度≥992px)
不管在哪种屏幕上，栅格系统都会自动的分12列 .col-xs-* 和.col-sm-和.col-md- 后面跟的参数表示在当前的屏幕中占的列数。
bootstrap优缺点：
优点：在大量的项目中充分的使用和测试，生态成熟，使用起来更方便，有大量的组件样式，接受定制
缺点：个性化样式需要重新定制，如果有大量的非bootstrap样式存在，那么你就需要做大量的css重写，因此也就失去了使用框架的意义。虽然很多兼容IE的办法，但需要引入其他文件，导致加载速度变慢，影响用户体验。响应式布局是利用其栅格系统，对于不同的屏幕采用不同的类属性。在开发中写一套代码，手机平板，PC端都能使用，而不用考虑使用媒体查询。Bootstrap的官方解释：Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为做多12列。 栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局。
tank yo!
