Bootstrap栅格布局
2022-03-21 本文已影响0人
马佳乐
布局系统
- Bootstrap提供了.cintainer和.container-fluid两种容器布局
- 这两种样式是启用布局栅格系统最基本的要素
- .cintainer是固体自适应方式，.container-fluid是流体100%自适应方式
- 容器布局可以嵌套，但一般不推荐使用
- Bootstrap是以移动端优先的
栅格系统
- Bootstrap栅格系统是一个以移动为优先的网格系统;
- 基于12列的布局，5种响应尺寸(面向不同屏幕设备);
- 完全使用flexbox流式布局构建的，完全支持响应式标准;具体采用div容器的行、列和对齐内容来构建响应式布局;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--移动设备优先-->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--引入Bootstrap CSS-->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<title></title>
<style>
.row {
border: dashed 1px red;
margin-top: 10px;
}
.col-sm,.aa {
border: solid 1px blue;
background-color: #EFEFEF;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm">
第一列
</div>
<div class="col-sm">
第二列
</div>
<div class="col-sm">
第三列
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm">
第一列
</div>
<div class="col-sm">
第二列
</div>
<div class="col-sm">
第三列
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-2 aa">
第一列
</div>
<div class="col-sm-4 aa">
第二列
</div>
<div class="col-sm-6 aa">
第三列
</div>
</div>
</div>
<!--引入JavaScript和jQuery-->
<!--jQuery第一个，然后Bootstrap （集成了 Popper.js和Bootstrap.js）-->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>
- .row表示一行，.col-*表示一列，实现了智能三列;
- sm表示屏幕类型
- 如果采用的是.container-fluid,会100%占用屏幕的宽度;
- 在.col-sm-的“”位置，还可以强制设定每列所占有的栅格列;所占的栅格位正好是12列，超过12列则会换行，小于12例则不能100%占满;
- 智能计算和强制设置栅格位都是等宽的，也可以设置不对称。
栅格等级
| 超小屏幕<576px | 小屏幕>=576px | 中等屏幕>=768px | 大屏幕>=992px | 超大屏幕>=1200px | |
|---|---|---|---|---|---|
| 最大容器宽度 | None(auto) | 540px | 720px | 960px | 1140px |
| 类前缀 | .col- | .col-sm- | .col-md- | .col-lg- | .col.xl- |
| 列数 | 12 |
- 如果同时使用两个或以上的级别，并且比例相同，则遵循移动端优先的原则;
- 栅格系统支持只指定其中一种或几种，其它随机的方式，指定数字奇偶均可;
- 可以通过两个或以上来实现不同设备不同比例的混合布局;
- 使用.w-100可以切割栅格栏位，进行分行操作;
- 如果强制设置了col-3数值，那切割后，将不会自动填充;
例如：
<div class="container">
<div class="row">
<div class="aa col-4 col-sm-2 col-md-5 col-lg-6">第一列</div>
<div class="aa col-3 col-sm-3 col-md-2 col-lg-3">第二列</div>
<div class="w-100"></div>
<div class="aa col- 5 col-sm-7 col-md-5 col-lg-3">第三列</div>
</div>
</div>
隐藏和显示方法
可实现在不同尺寸的屏幕上，显示不同的效果。
| 屏幕尺寸 | 类 |
|---|---|
| 隐藏在所有 | .d-none |
| 仅在xs上隐藏 | .d-none .d-sm-block |
| 仅在sm上隐藏 | .d-none .d-md-block |
| 仅在md上隐藏 | .d-none .d-lg-block |
| 仅在lg上隐藏 | .d-none .d-xl-block |
| 仅在xl上隐藏 | .d-none .d-xl-none |
| 所有人可见 | .d-block |
| 仅在xs上可见 | .d-block .d-sm-none |
| 仅在sm上可见 | .d-block .d-sm-none .d-md-none |
| 仅在md上可见 | .d-block .d-md-none .d-lg-none |
| 仅在lg上可见 | .d-block .d-lg-none .d-xl-none |
| 仅在xl上可见 | .d-block .d-xl-block |
对齐与排列
栅格对齐：
| 样式（作用域行间） | |
|---|---|
| 居顶（默认） | .align-items-start |
| 居中 | .align-items-center |
| 居底 | .align-items-end |
行对齐，用在行中（给行高看效果）
| 样式（作用域列间） | |
|---|---|
| 居顶（默认） | .align-self-start |
| 居中 | .align-self-center |
| 居底 | .align-self-end |
列对齐，用在列中
| 样式（作用域行间） | |
|---|---|
| 居左（默认） | .justify-content-start |
| 居中 | .justify-content-center |
| 居右 | .justify-content-end |
| 间隔相等（分散） | .justify-content-around |
| 两端对齐（分散） | .justify-content-between |
不是100%填充，实现水平对齐方式，用在行中
栅格排列:
- 栅格的列可以排序，使用.order-N,N最大值为12
- 使用.order-first强行设置列为第一列,.order-last为最后一列使用
- .offset-N或.offset-*-N设置列的偏移量，N表示棚格列数
- 使用.ml-N或.mr-N微调列距离
- 使用.ml-auto和.mr-auto来左右对齐
