一文带你马上清楚bootstrap的栅格系统

最新推荐文章于 2022-11-03 21:54:34 发布

monkeyhlj

最新推荐文章于 2022-11-03 21:54:34 发布

阅读量472

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/hhhmonkey/article/details/108405639

版权

前端学习专栏收录该内容

53 篇文章 2 订阅

订阅专栏

bootstrap的栅格系统

我们都知道bootstrap的栅格系统是为了实现网站的响应式布局，但bootstrap提供了一套响应式、移动设备优先的流式栅格系统，它会将网页分为12等价（宽度），举个例子，假设你设置最外层div的宽度为1200px，那么每一份就占100px。话不多说，直接上代码和效果图吧。
可见代码中的注释说明：
例1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstarp 栅格系统</title>

    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css">

    <!--为了更好地适配移动设备，使用css的媒体查询功能-->
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <style>
        .row div{
            border: 2px solid #ff0000;
            height: 100px;
        }
    </style>
</head>
<body>
    <!--栅格系统，会将网页分为12等价（宽度） ，设置最外层div的宽度为1200px，每一份就是100px-->
    <!--三层，第一层必须指定container属性，第二层必须指定row属性-->
    <!--所有的div，如果不指定高度，默认是0px-->
    <div class="container">
    	<!--这里是内联样式来设置的宽度，将3个div分别分为3,4,3等份-->
        <div class="row">
            <div style="width:30%">1</div>
            <div style="width:40%">2</div>
            <div style="width:30%">3</div>
        </div>
        
        <!--如果这里用col-4,则会被自动等分为3等份，因为12/3=4-->
        <div class="row">
            <div class="col-4">1</div>
            <div class="col-4">2</div>
            <div class="col-4">3</div>
        </div>
    </div>

</body>
</html>

如图：
在这里插入图片描述
例2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstarp 栅格系统</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css">

    <!--为了更好地适配移动设备，使用css的媒体查询功能-->
    <!--viewport：视口；device-width：当前设备的宽度（浏览器自己读）；initial-scale=1代表100%的视区窗口用来显示-->
    <!--下面这行代码一定要加，不然在手机端响应不了-->
    <meta name="viewport" content="width=device-width,initial-scale=1" />

    <style>
        .row div{
            border: 2px solid #ff0000;
            height: 100px;
        }
    </style>
</head>
<body>
    <!--
	   col-xl-3:屏幕宽度大于1200px 即在超大屏幕上显示3列宽度(即3/12列，也就是container总宽度的25%，下面同理)
       col-lg-3:屏幕宽度大于992px 即在大型屏幕显示3列宽度
       col-md-6:屏幕宽度大于768px 即在中型屏幕显示6列宽度
       col-sm-6:屏幕宽度大于576px 即在小型屏幕显示6列宽度
       col-12:屏幕宽度小于576px 即在超小屏幕显示12列宽度(100%) 与手机适配此设计
	-->
    <div class="container">
        <div class="row">
            <div class="col-sm-9 col-12">第一行第一列</div>
            <div class="col-sm-3 col-12">第一行第二列</div>
        </div>
    </div>

</body>
</html>

如图：
PC端显示
移动端显示
根据例2扩展例3：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstarp 栅格系统</title>
    <link rel="stylesheet" type="text/css" 

href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css">

    <!--为了更好地适配移动设备，使用css的媒体查询功能-->
    <meta name="viewport" content="width=device-width,initial-scale=1" />

    <style>
        .row div{
            border: 2px solid #ff0000;
            height: 100px;
        }
        .container{
            border: 5px solid yellow;
        }

        /*分辨率大于1200px的时候，因为bootstrap默认最大1140px*/
        @media (min-width: 1200px) {
            .container{
                max-width: 1300px;
            }
        }
    </style>
</head>
<body>
   <div class="container">
        <div class="row">
            <!--d-none d-sm-block 在中型屏幕以下浏览器上隐藏该元素 -->
            <!--d-none d-md-block 在大型屏幕以下浏览器上隐藏该元素（其他d-lg-block、d-xl-block同理） -->
            <!--反之： -->
            <!--d-sm-none 在中型屏幕以下浏览器上显示该元素，与d-none d-sm-block 是相反的效果（其他宽度的同理） -->
            <!--这里，我们以第一个为例： -->
            <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12 d-none d-sm-block">1</div>
            <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12">2</div>
            <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12">3</div>
            <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12">4</div>
        </div>
    </div>

</body>
</html>