bootstrap用起来很方便，代码量少，写自适应网站最合适了！
关于bootstrap你必须要知道的几点：
- “行（row）”必须包含在
.container（固定宽度）或.container-fluid（100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。 - 通过“行（row）”在水平方向创建一组“列（column）”。
- 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
- 类似
.row和.col-xs-4这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。 - 通过为“列（column）”设置
padding属性，从而创建列与列之间的间隔（gutter）。通过为.row元素设置负值margin从而抵消掉为.container元素设置的padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。 - 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
- 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个
.col-xs-4来创建。 - 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
- 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何
.col-md-*栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何.col-lg-*不存在， 也影响大屏幕设备。
必须要的meta：
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="format-detection" content="telephone=yes">
<meta name="msapplication-tap-highlight" content="no">
配合运用的media:
<style>
*{font-size:24px;}
@media(max-width:960px){
*{font-size:24px;}
}
@media(max-width:900px){
*{font-size:22px};
}
@media(max-width:800px){
*{font-size:20px};
}
@media(max-width:720px){
*{font-size:16px};
}
@media(max-width:640px){
*{font-size:16px};
}
@media(max-width:480px){
*{font-size:12px};
}
</style>
另外要注意的几点是：
1.container里面可以包含任意标签，我们习惯性用div
2.row的子级必须是col
3.尽量多用bootstrap里面自带的类名，大家都知道很多通用的效果和代码bootstrap都有相应的类名，你只要在你的标签里面加上类名就可以了
4.bootstrap.min.js是依赖jquery而运行的，我们引入js文件时必须先引入jquery文件再引入bootstrap.min.js，并且jquery文件必须是2.0版本以上的