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>
如图:
根据例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>
好了,到这里你应该已经比较清楚bootstrap的栅格系统是怎么工作的了吧,不妨自己把代码写一写看看各种效果,这样子会理解得更快。