# 3.栅格系统
介绍的是 4.5.x版本
一行最多放12列
- class类介绍
最外层容器：
1.container-fluid：宽度100%,和body的宽度一样
2.container：宽度是一个具体数值，但是会根据用户屏幕大小来改变
行类
1.row：分行
列类：
5个响应层
后面的*表示占据列数,取值从1-12
1.col-*:None(auto);//col为超小屏，屏幕<576px，容器的宽度固定为auto，一行可以永远设置12个列
2.col-sm-*:540px;//sm为小屏，屏幕>=576px，容器的宽度固定为540px，一行可以设置12个列。屏幕尺寸<576的时候，一行只能设置1列
3.col-md-*:720px;//md为中屏，屏幕>=768px，容器的宽度固定为720px，一行可以设置12个列。屏幕尺寸<768的时候，一行只能设置1列
4.col-lg-*:960px;//lg为大屏，屏幕>=992px，容器的宽度固定为960px，一行可以设置12个列。屏幕尺寸<992的时候，一行只能设置1列
5.col-xl-*:1140px;//xl为超大屏，屏幕>=1200px，容器的宽度固定为1140px，一行可以设置12个列。屏幕尺寸<1200的时候，一行只能设置1列
```html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >
<title>Document</title>
<style>
.row div{
height:100px;
background:green;
border:1px solid #000;
color:#fff;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xl-1">第1列</div>
<div class="col-xl-1">第2列</div>
<div class="col-xl-1">第3列</div>
<div class="col-xl-1">第4列</div>
<div class="col-xl-1">第5列</div>
<div class="col-xl-1">第6列</div>
<div class="col-xl-1">第7列</div>
<div class="col-xl-1">第8列</div>
<div class="col-xl-1">第9列</div>
<div class="col-xl-1">第10列</div>
<div class="col-xl-1">第11列</div>
<div class="col-xl-1">第12列</div>
</div>
<div class="row">
<div class="col-xl-1">占1列</div>
<div class="col-xl-2">占2列</div>
<div class="col-xl-3">占3列</div>
<div class="col-xl-4">占4列</div>
<div class="col-xl-3">占3列</div>
</div>
<div class="row">
<div class="col-xl-13">占13列</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" ></script>
</body>
</html>
```
```html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >
<title>Document</title>
<style>
.row div{
height:100px;
background:green;
border:1px solid #000;
color:#fff;
}
.v-align{
height:100px;
background:rgba(255,0,0,0.1);
margin:10px -15px;
}
.v-align div{
height:40px;
line-height:40px;
background:rgba(86,61,124,0.2);
color:#333;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col">等宽列</div>
<div class="col">等宽列</div>
<div class="col">等宽列</div>
<div class="col">等宽列</div>
<div class="col">等宽列</div>
<div class="col">等宽列</div>
<div class="col">等宽列</div>
<div class="col">等宽列</div>
<div class="col">等宽列</div>
<div class="col">等宽列</div>
<div class="col">等宽列</div>
<div class="col">等宽列</div>
<div class="col">等宽列</div>
<div class="col">等宽列</div>
<div class="col">等宽列</div>
</div>
<!--设置多行等宽列，在希望换行的地方添加一个w-100的class，能够让后面的列换行-->
<div class="row">
<div class="col">等宽列，行1</div>
<div class="col">等宽列，行1</div>
<div class="w-100" style="height:auto;border:none;"></div>
<div class="col">等宽列，行2</div>
<div class="col">等宽列，行2</div>
</div>
<!--设置一个列宽，剩下的自动平分-->
<div class="row">
<div class="col-sm-7">在小屏下占7列</div>
<div class="col">自动平分剩余的宽度</div>
<div class="col">自动平分剩余的宽度</div>
<div class="col">自动平分剩余的宽度</div>
</div>
<!--设置根据内容调整列的宽度，使用.col-{breakpoint}-auto，breakpoint代指5个响应层-->
<div class="row">
<div class="col-md-auto">在中等屏幕下内容撑开宽度</div>
</div>
<!--设置所有尺寸下，都占同样的列数，使用.col-* -->
<div class="row">
<div class="col-8">所有尺寸下都占8列</div>
<div class="col-4">所有尺寸下都占4列</div>
</div>
<!--
混合排列或组合模式
1.超大屏幕下一行显示6个div，一个div占2列
2.大屏幕下一行显示4个div，一个div占3列
3.中屏幕下一行显示3个div，一个div占4列
4.小屏幕下一行显示2个div，一个div占6列
5.超小屏幕下一行显示1个div，一个div占12列
-->
<div class="row">
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">超大屏6个，大屏4个，中屏3个，小屏2个，超小屏1个</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">超大屏6个，大屏4个，中屏3个，小屏2个，超小屏1个</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">超大屏6个，大屏4个，中屏3个，小屏2个，超小屏1个</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">超大屏6个，大屏4个，中屏3个，小屏2个，超小屏1个</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">超大屏6个，大屏4个，中屏3个，小屏2个，超小屏1个</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">超大屏6个，大屏4个，中屏3个，小屏2个，超小屏1个</div>
</div>
<!-- 对齐
垂直对齐：
1.行对齐方式
align-items-start:顶对齐
align-items-center:中间对齐
align-items-end:底对齐
2.列的单独对齐方式
align-self-start:顶对齐
align-self-center:中间对齐
align-self-end:底对齐
-->
<div class="row v-align align-items-start">
<div class="col">垂直对齐-顶部对齐-行的对齐方式</div>
<div class="col">垂直对齐-顶部对齐-行的对齐方式</div>
<div class="col">垂直对齐-顶部对齐-行的对齐方式</div>
</div>
<div class="row v-align align-items-center">
<div class="col">垂直对齐-中间对齐-行的对齐方式</div>
<div class="col">垂直对齐-中间对齐-行的对齐方式</div>
<div class="col">垂直对齐-中间对齐-行的对齐方式</div>
</div>
<div class="row v-align align-items-end">
<div class="col">垂直对齐-底部对齐-行的对齐方式</div>
<div class="col">垂直对齐-底部对齐-行的对齐方式</div>
<div class="col">垂直对齐-底部对齐-行的对齐方式</div>
</div>
<div class="row v-align">
<div class="col align-self-start">垂直对齐-顶部对齐-列的对齐方式</div>
<div class="col align-self-center">垂直对齐-中间对齐-列的对齐方式</div>
<div class="col align-self-end">垂直对齐-底部对齐-列的对齐方式</div>
</div>
<!--水平对齐
1.justify-content-start 左对齐
2.justify-content-center 居中对齐
3.justify-content-end 右对齐
4.justify-content-around 分散居中对齐（每个元素两侧的间距是相等的）
5.justify-content-between 左右两端对齐（元素之间的间距是自动平分的）
-->
<div class="row v-align justify-content-start">
<div class="col-4">水平对齐-左对齐-行的对齐方式</div>
<div class="col-4">水平对齐-左对齐-行的对齐方式</div>
</div>
<div class="row v-align justify-content-center">
<div class="col-4">水平对齐-居中对齐-行的对齐方式</div>
<div class="col-4">水平对齐-居中对齐-行的对齐方式</div>
</div>
<div class="row v-align justify-content-end">
<div class="col-4">水平对齐-右对齐-行的对齐方式</div>
<div class="col-4">水平对齐-右对齐-行的对齐方式</div>
</div>
<div class="row v-align justify-content-around">
<div class="col-4">水平对齐-分散居中对齐-行的对齐方式</div>
<div class="col-4">水平对齐-分散居中对齐-行的对齐方式</div>
</div>
<div class="row v-align justify-content-between">
<div class="col-4">水平对齐-左右两端对齐-行的对齐方式</div>
<div class="col-4">水平对齐-左右两端对齐-行的对齐方式</div>
</div>
<!--
列排序：使用。order-{breakpoint}-*
3.X的版本使用的是.col-{breakpoint}-push-* .col-{breakpoint}-pull-* 来排序
-->
<div class="row">
<div class="col">第一列</div>
<div class="col order-4">第二列</div>
<div class="col order-3">第三列</div>
</div>
<div class="row">
<div class="col">第一列</div>
<div class="col order-xl-4">第二列</div><!--只有当屏幕尺寸>=1200的时候，才会进行排序-->
<div class="col order-xl-3">第三列</div>
</div>
<div class="row">
<div class="col">第一列</div>
<div class="col order-first">第二列</div><!--order-first代表排在第一位，order-last代表排在最后一位-->
<div class="col order-last">第三列</div>
</div>
<!--列偏移：使用offset-{breakpoint}-* -->
<div class="row">
<div class="col-md-4">第一列</div>
<div class="col-md-4 offset-md-4">往右偏移4列</div>
</div>
<div class="row">
<div class="col-3 offset-md-3">第一列</div><!--第一列偏移，后面的格子都会偏移，和下面的现象区分-->
<div class="col-3">第二列</div>
</div>
<div class="row">
<div class="col-3 offset-md-3">第一列</div><!--第一列偏移，后面的格子都会偏移，和上面的现象区分-->
<div class="col-3 offset-md-3">第二列</div>
</div>
<div class="row">
<div class="col-sm-5 col-md-6">小屏占5列，中屏占6列</div><!--第一列偏移，后面的格子都会偏移，和上面的现象区分-->
<div class="col-sm-5 offset-sm-3 col-md-6 offset-md-5">小屏偏移3列，中屏偏移5列</div>
</div>
<!--间距：使用margin工具可以让列之间产生间距
margin-right 和 margin-left
mr-{breakpoint}-auto 使右侧的列远离到最右边
ml-{breakpoint}-auto 使左侧的列远离到最左边
-->
<div class="row">
<div class="col-md-4">第一列</div>
<div class="col-md-4 ml-auto">第二列，跑到最右边</div>
</div>
<div class="row">
<div class="col-md-3 ml-md-auto">在中屏下，离左边距离自动计算</div>
<div class="col-md-3 ml-md-auto">在中屏下，离左边距离自动计算</div>
</div>
<div class="row">
<div class="col-auto mr-auto">宽度由内容撑开</div>
<div class="col-auto">宽度由内容撑开</div>
</div>
<!--嵌套：每个列里面可以再继续进行放行，那嵌套里面的元素就会以父级的宽度为基准，再分12列-->
<div class="row">
<div class="col-sm-9">
父级的第一列
<div class="row">
<div class="col-sm-8 col-6">子级的第一列，小屏下占8列，超小屏下占6列</div>
<div class="col-sm-8 col-6">子级的第一列，小屏下占8列，超小屏下占6列</div>
</div>
</div>
<div class="col-sm-3" style="height:150px;background:pink;">父级的第二列</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" ></script>
</body>
</html>
```
以上是markdown格式的笔记