目录：
1.Bootstrap栅格化系统
1.1 描述
1.2 代码示例
1.3
媒体查询
2.
Bootstrap基本css样式的使用
1.Bootstrap栅格化系统
1.1 描述
bootstrap栅格化系统可以根据设备视口的大小变化去适当扩展到最多12列的显示状态，它必须用.container(固定宽度)或.
container-fluid(100%宽度)来包裹，并且通过.row类来定义每一行，最后用col-xs-*、col-sm-*、col-md-* 、col-lg-*来 指定最多12列中每一列的显示宽度，相当于把增高container的宽度按自定义的比例分配显示。
1.2 代码示例：
1
<!DOCTYPE html>
2
<html>
3
<head lang="en">
4
<meta charset="UTF-8">
5
<!--添加视口meta实现布局的自动适应-->
6
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
7
8
<!--引入bootstrap样式文件-->
9
<link href="css/bootstrap.min.css" rel="stylesheet">
10
11
<!--引入jq（必须在bootstrap.min.js文件之前）-->
12
<script type="application/javascript" src="js/jquery-3.2.0.js"></script>
13
14
<!--引入bootstrap js-->
15
<script type="application/javascript" src="js/bootstrap.min.js"></script>
16
<title>Bootstrap学习</title>
17
</head>
18
<body>
19
20
<div class="container">
21
<div class="row" style="margin-top: 40px;color: white">
22
<div class="col-xs-3 col-lg-3" style="padding-top:20px;height:240px;background-color: #1b6d85">
23
苏苏是一痴心的女子，
24
象一朵野蔷薇，她的丰姿；
25
象一朵野蔷薇，她的丰姿
26
来一阵暴风雨，摧残了她的身世。
27
</div>
28
29
<div class="col-xs-3 col-lg-3" style="padding-top:20px;height:240px;background-color:grey">
30
苏苏是一痴心的女子，
31
象一朵野蔷薇，她的丰姿；
32
象一朵野蔷薇，她的丰姿
33
来一阵暴风雨，摧残了她的身世。
34
35
</div>
36
<div class="col-xs-3 col-lg-6" style="padding-top:20px;height:240px;background-color:darkred">
37
这荒草地里有她的墓碑
38
淹没在蔓草里，她的伤悲；
39
淹没在蔓草里，她的伤悲——
40
啊，这荒土里化生了血染的蔷薇！
41
</div>
42
<div class="col-xs-3 col-lg-3" style="padding-top:20px;height:240px;background-color:blueviolet">
43
44
那蔷薇是痴心女的灵魂，
45
在清早上受清露的滋润，
46
到黄昏里有晚风来温存，
47
更有那长夜的慰安，看星斗纵横。
48
</div>
49
</div>
50
</div>
51
</body>
52
</html>
细心的伙伴可以发现我代码里面每列div设置了col-xs-*和col-lg-* 其实其中我们故意把大设备中
4个div的列数大于12,我们看看他在电脑(大设备)下的显示效果：
我们设置的在xs设备大小下显示的列数刚好是12,我们来看一下在移动端他的显示效果是不是刚好一行显示完
好的，上面的例子印证了bootstrap一行最多显示12列的情况。还可以看见我们并没有为div中的文字内容设置边距，但是看上面的效果似乎是有的，是的这就是bootstrap为我们的每一列内容div的左右两边都添加了15px的内边距，如下图。
好了，上面的我们学习以后，我们需要思考一个问题，bootstrap是怎样实现在不同设备上使用不同的样式的呢，答案是媒体查询。
1.3 媒体查询
1
@media (min-width: 1200px)
2
.container {
3
width: 1170px;
4
}
5
@media (min-width: 992px)
6
.container {
7
width: 970px;
8
}
9
@media (min-width: 768px)
10
.container {
11
width: 750px;
12
}
上面这部分css来自bootstrap.min.css，其实很明显可以看出他是通过@media媒体查询根据视口的min-width大小去对应设置不同的宽度的。
最后添加一个视口宽度与类前缀的对应关系表：
视口大小 超小屏幕 手机(<768px) 小屏幕 平板(>=768px) 中等屏幕 桌面显示器(>=992px) 大屏幕 桌面显示器(>=1200px) 类前缀 .col-xs-* .col-sm-* .col-md-* col-lg-*
好了bootstap的栅格化系统就学习到这儿。
