bootstrap笔记（五）——栅格参数

兮动人

发布于 2021-06-11 11:38:53

1.5K0

发布于 2021-06-11 11:38:53

文章被收录于专栏：兮动人的博客

col-md-数字： xs：手机设备大小 sm:平板设备大小 md:笔记本设备大小 lg:台式电脑设备大小数字：代表着在一行12列中所占的单元格数。

如：col-lg-3，代表着在一行12列中所占的3列（col-lg-1）。当设备窗口大小调到浏览器最大时容器大小（width:1170），占据3个列。

当设备窗口大小调到浏览器最大时容器大小（width:970），占据1个列。这是因为容器大小的改变时，在<970px时，lg参数将不再适用于容器的编排，所以处于在sm的范围内将占据一行作为一列。 970，col-lg-3将变成等同于处于1170，col-lg-1

如果是970，col-lg-1,结果如下，还是会跟上面的970，col-lg-3一样。 如果在没有范围的设备下都是显示一行，只有在使用了栅格参数表明的情况下才会显示对应的结果

总结：所以一行中可以用到xs,sm,md,l来调整在不同设备下的结果，这个时候就必须用到栅格参数。如：在md下显示一行3列，sm下显示一行4列

<div cLass="col-md-3 col-sm-4">栅格参数</div>

也说明在md下占据（12列中的）3列，在sm下占据（12列中的）4列。

如：

<div cLass="col-md-3">栅格参数</div>

表示的含义：一行为12列，在md一行中将会显示1个占据有着3个单元格的一列

上述的实现必须在容器内的实现，容器内包括行。

需求：如果把一行（12列）比作12个单元格。

如果是大屏幕一行显示6列说明每一列将占据2个单元格 col-lg-2 如果是中等屏幕一行显示4列说明每一列将占据3个单元格 col-md-3 如果是小屏幕一行显示3列说明每一列将占据4个单元格 col-sm-4 如果是超小屏幕一行显示2列说明每一列将占据6个单元格 col-xs-6

分析：首先在四个要求中有lg是要有6列的，所以一行中有6列col-lg-2。md下有4列，所以前4列都有 col-md-3。sm下有3列，所以前3列都有col-sm-4。xs下有2列，所以前2列都有col-xs-6

col-lg/md/sm/xs-数字:数表示在一行12列当中所占的列数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--支持移动设备优先-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--引入css文件-->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <!--引入bootstrap.js之前一定要先引入jQuery.js文件-->
    <script type="text/javascript" src="bootstrap/js/jquery.min.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
</head>
<body>
    <div class="container">
        <!--需求：
		如果是大屏幕			一行显示6列      col-lg-2
		如果是中等屏幕		一行显示4列      col-md-3
		如果是小屏幕			一行显示3列      col-sm-4
		如果是超小屏幕		一行显示2列      col-xs-6
		-->
        <!--使用栅格系统加上栅格参数来实现响应式布局-->
        <div class="row">
            <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
                <img src="images/1.jpg" class="img-responsive">
            </div>
            <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
                <img src="images/1.jpg" class="img-responsive">
            </div>
            <div class="col-lg-2 col-md-3 col-sm-4">
                <img src="images/1.jpg" class="img-responsive">
            </div>
            <div class="col-lg-2 col-md-3">
                <img src="images/1.jpg" class="img-responsive">
            </div>
            <div class="col-lg-2">
                <img src="images/1.jpg" class="img-responsive">
            </div>
            <div class="col-lg-2">
                <img src="images/1.jpg" class="img-responsive">
            </div>
        </div>
    </div>
</body>
</html>

lg: