您的位置: 首页  >  文章  >  Bootstrap的栅格化系统

Bootstrap的栅格化系统

分类: 文章 • 2024-10-18 19:39:34
目录：
    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,我们看看他在电脑(大设备)下的显示效果：
 Bootstrap的栅格化系统
我们设置的在xs设备大小下显示的列数刚好是12,我们来看一下在移动端他的显示效果是不是刚好一行显示完
Bootstrap的栅格化系统

  好的，上面的例子印证了bootstrap一行最多显示12列的情况。还可以看见我们并没有为div中的文字内容设置边距，但是看上面的效果似乎是有的，是的这就是bootstrap为我们的每一列内容div的左右两边都添加了15px的内边距，如下图。
Bootstrap的栅格化系统
 好了，上面的我们学习以后，我们需要思考一个问题，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的栅格化系统就学习到这儿。

相关推荐