学习 Bootstrap 5 之 Grid

栅格布局系统 (Grid system)

Bootstrap 5 官方文档

1. 什么是栅格布局系统?

  布局系统基于12列6个响应断点的, 采用div标签, 它可以创造出各种形状和大小的布局

2. 特点

(1). 支持六种响应式布局

(2). 容器会居中和水平填充内容

(3). 每一列都有水平填充器(称为gutter)，用于控制列与列之间的间距

(4). 每行有12个模板列，允许创建跨任意数量列的元素的不同组合

  布局系统基于12列, 即把每一行划分为12列, 可以自行分配, 创造出不用的布局, 通过col-N来指定当前列占了几个列的位置, N是介于1-12的, 如果超过12则多出来的会换行

(5). Gutter也是响应式和可自定义的

(6). 修改sass文件中的值, 可以改变这些默认的设置

3. 栅格布局选项

	Extra small < 576px	Small ≥ 576px	Medium ≥ 768px	Large ≥ 992px	Extra Large ≥ 1200px	Extra extra Large ≥ 1400px
.container 宽度	None (auto)	540px	720px	960px	1140px	1320px
类前缀	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-	.col-xxl-
总列数	12	12	12	12	12	12
Gutter 宽度	1.5rem (.75rem on left and right)	1.5rem (.75rem on left and right)	1.5rem (.75rem on left and right)	1.5rem (.75rem on left and right)	1.5rem (.75rem on left and right)	1.5rem (.75rem on left and right)
是否可以自定义Gutter	是	是	是	是	是	是
是否可以嵌套	是	是	是	是	是	是
列是否可以排序	是	是	是	是	是	是

4. 使用

.col 表示 这个区域是一列

.row 表示 这个区域是一行

使用的时候, 先用行, 再用列

(1). 简单的例子

  设置div标签使用了container的样式, row是设置该区域是一行, col设置该区域是一列, 这种布局满足的是

	Extra small < 576px	Small ≥ 576px	Medium ≥ 768px	Large ≥ 992px	Extra Large ≥ 1200px	Extra extra Large ≥ 1400px
.container 宽度	None (auto)	540px	720px	960px	1140px	1320px

  下面这个图是视口宽度大于1400像素的情况, 该情况下, 区域的宽度是1320像素
如果缩小视口宽度, 例如到了1300像素, 则该区域的宽度是1140像素, 具体每个视口宽度对应的区域宽度, 都总结在上表中

  <div class = "container">
    <div class = "row" style = "border:3px solid black">
      <div class = "col" style = "border:1px solid red">
        Column
      </div>
      <div class = "col" style = "border:1px solid red">
        Column
      </div>
      <div class = "col" style = "border:1px solid red">
        Column
      </div>
    </div>

(2). 默认情况下, 会均分每一行的12列

  <div class="container">
    <div class="row" style = "border:3px solid black">
      <div class="col" style = "border:1px solid red">
        1 of 2
      </div>
      <div class="col" style = "border:1px solid red">
        2 of 2
      </div>
    </div>
    <div class="row" style = "border:3px solid black">
      <div class="col" style = "border:1px solid red">
        1 of 3
      </div>
      <div class="col" style = "border:1px solid red"> 
        2 of 3
      </div>
      <div class="col" style = "border:1px solid red">
        3 of 3
      </div>
    </div>

(3). 设置指定宽度

1). 正常指定宽度

col-N N介于1 - 12之间

col-{断点}-N N介于1 - 12之间

  一行列数不够12, 会空出来, 如果不指定列宽, 默认就是剩下未被指定列的宽度

  <div class="container">
    <div class="row" style = "border:3px solid black">
      <div class="col-1" style = "border:1px solid red">
        占 1 列
      </div>
      <div class="col-5" style = "border:1px solid red">
        占 5 列
      </div>
    </div>
    <div class="row" style = "border:3px solid black">
      <div class="col-2" style = "border:1px solid red">
        占 2 列
      </div>
      <div class="col-2" style = "border:1px solid red">
        占 2 列
      </div>
      <div class="col" style = "border:1px solid red">
        使用默认
      </div>
    </div>
  </div>

2). 指定宽度超出12

  超出12列, 最后一个列会被换到下一行

  <div class="container">
    <div class="row" style = "border:3px solid black">
      <div class="col-6" style = "border:1px solid red">
        占 6 列
      </div>
      <div class="col-9" style = "border:1px solid red">
        占 9 列
      </div>
    </div>
  </div>

(4). 设置变宽 (列宽根据内容自动变化)

col-{断点}-auto 或 col-auto

  <div class="container">
    <div class="row" style = "border:3px solid black">
      <div class="col col-auto" style = "border:1px solid red">
        1 of 3 (col-auto)
      </div>
      <div class="col col-auto" style = "border:1px solid red">
        2 of 3 (col-auto)
      </div>
      <div class="col" style = "border:1px solid red">
        3 of 3
      </div>
    </div>
    <div class = "row" style = "border:3px solid black">
      <div class="col" style = "border:1px solid red">
        1 of 3
      </div>
      <div class="col" style = "border:1px solid red">
        2 of 3
      </div>
      <div class="col" style = "border:1px solid red">
        3 of 3
      </div>
    </div>
  </div>

(5). 在行中设置该行的列数

1). 指定固定值

row-cols-N N介于1 - 12之间

使用row-cols-2 指定每行2列, 多余的到下一行

  <div class="container">
    <div class="row row-cols-2" style = "border:3px solid black">
      <div class="col" style = "border:1px solid red">Column</div>
      <div class="col" style = "border:1px solid red">Column</div>
      <div class="col" style = "border:1px solid red">Column</div>
      <div class="col" style = "border:1px solid red">Column</div>
      <div class="col" style = "border:1px solid red">Column</div>
    </div>
  </div>

2). 根据每一列中内容变化列的宽度

row-cols-auto

列宽根据内容宽度自动改变

  <div class="container">
    <div class="row row-cols-auto" style = "border:3px solid black">
      <div class="col" style = "border:1px solid red">Column</div>
      <div class="col" style = "border:1px solid red">Column Column</div>
      <div class="col" style = "border:1px solid red">这 一 列 很 宽 x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x</div>
      <div class="col" style = "border:1px solid red">Column Column Column</div>
      <div class="col" style = "border:1px solid red">Column</div>
    </div>
  </div>

其实这就相当于给每一列加上了 col-auto

  <div class="container">
    <div class="row" style = "border:3px solid black">
      <div class="col col-auto" style = "border:1px solid red">Column</div>
      <div class="col col-auto" style = "border:1px solid red">Column Column</div>
      <div class="col col-auto" style = "border:1px solid red">这 一 列 很 宽 x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x</div>
      <div class="col col-auto" style = "border:1px solid red">Column Column Column</div>
      <div class="col col-auto" style = "border:1px solid red">Column</div>
    </div>
  </div>
  <br />
  <div class="container">
    <div class="row" style = "border:3px solid black">
      <div class="col col-auto" style = "border:1px solid red">Column</div>
      <div class="col col-auto" style = "border:1px solid red">Column Column</div>
      <div class="col col-auto" style = "border:1px solid red">这 一 列 很 宽 x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x</div>
      <div class="col col-auto" style = "border:1px solid red">Column Column Column</div>
      <div class="col col-auto" style = "border:1px solid red">Column</div>
    </div>
  </div>

(6). 嵌套

  <div class="container">
    <div class="row" style = "border:3px solid black">
      <div class="col" style = "border:1px solid red">Column</div>
      <div class="col" style = "border:1px solid red">
        <div class="row" style = "border:3px solid black">
          <div class="col" style = "border:1px solid red">Column</div>
          <div class="col" style = "border:1px solid red">Column</div>
        </div>
        <div class="row" style = "border:3px solid black">
          <div class="col" style = "border:1px solid red">Column</div>
          <div class="col" style = "border:1px solid red">Column</div>
        </div>
      </div>
    </div>
  </div>

(7). 不同视口宽度下的显示与隐藏

原理: 参考…

1). 隐藏

效果	类
所有视口宽度都隐藏	d-none
仅xs下隐藏	d-none d-sm-block
仅sm下隐藏	d-block d-sm-none d-md-block
仅md下隐藏	d-block d-sm-block d-md-none d-lg-block
仅 lg下隐藏	d-block d-sm-block d-md-block d-lg-none d-xl-block
仅 xl下隐藏	d-block d-sm-block d-md-block d-lg-block d-xl-none d-xxl-block
仅 xxl下隐藏	d-block d-sm-block d-md-block d-lg-block d-xl-block d-xxl-none

效果	d-	d-sm-	d-md-	d-lg-	d-xl-	d-xxl-
所有视口宽度都隐藏	none
仅xs下隐藏	none	block	block	block	block	block
仅sm下隐藏	block	none	block	block	block	block
仅md下隐藏	block	block	none	block	block	block
仅 lg下隐藏	block	block	block	none	block	block
仅 xl下隐藏	block	block	block	block	none	block
仅 xxl下隐藏	block	block	block	block	block	none

2). 显示

效果	类
所有视口宽度都显示	啥也不写, 默认都显示 或 d-block
仅xs下显示	d-block d-sm-none d-md-none d-lg-none d-xl-none d-xxl-none
仅sm下显示	d-none d-sm-block d-md-none d-lg-none d-xl-none d-xxl-none
仅md下显示	d-none d-sm-none d-md-block d-lg-none d-xl-none d-xxl-none
仅 lg下显示	d-none d-sm-none d-md-none d-lg-block d-xl-none d-xxl-none
仅 xl下显示	d-none d-sm-none d-md-none d-lg-none d-xl-block d-xxl-none
仅 xxl下显示	d-none d-sm-none d-md-none d-lg-none d-xl-none d-xxl-block

效果	d-	d-sm-	d-md-	d-lg-	d-xl-	d-xxl-
所有视口宽度都显示	block 或 不写
仅xs下显示	block	none	none	none	none	none
仅sm下显示	none	block	none	none	none	none
仅md下显示	none	none	block	none	none	none
仅 lg下显示	none	none	none	block	none	none
仅 xl下显示	none	none	none	none	block	none
仅 xxl下显示	none	none	none	none	none	block