投稿
  1. 极客之音首页
  2. 后端开发
  3. Python

学习 Bootstrap 5 之 Colunms

飞熊 • • Python • 阅读 184

书读的越多而不加思考，你就会觉得你知道得很多；而当你读书而思考得越多的时候，你就会越清楚地看到，你知道得很少。

导读：本篇文章讲解 学习 Bootstrap 5 之 Colunms，希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com，来源：原文

学习 Bootstrap 5 之 列

列 (Columns)

Bootstrap 5 官方文档

1. 列在垂直方向的对齐方式 (整行都发生变化)

  用于行的高度大于行中每一个元素的高度情况, 之前的例子都是行列一样高的
注意: 这些类是使用在行中, 使用后整行的都会发生变化

(1). 居顶 class = “row align-items-start” (默认)

在这里插入图片描述

  <div class="container">
    <div class="row align-items-start" style = "border:3px solid black; height:200px">
      <div class="col" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
      <div class="col" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
      <div class="col" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
    </div>
  </div>

(2). 居中 class = “row align-items-center”

在这里插入图片描述

  <div class="container">
    <div class="row align-items-center" style = "border:3px solid black; height:200px">
      <div class="col" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
      <div class="col" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
      <div class="col" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
    </div>
  </div>

(3). 居低 class = “row align-items-end”

在这里插入图片描述

  <div class="container">
    <div class="row align-items-end" style = "border:3px solid black; height:200px">
      <div class="col" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
      <div class="col" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
      <div class="col" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
    </div>
  </div>

(4). 三种对齐方式的比较

在这里插入图片描述

  <div class="container">
    <div class="row align-items-start" style = "border:3px solid black; height:200px">
      <div class="col" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
      <div class="col" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
      <div class="col" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
    </div>
    <br />
    <div class="row align-items-center" style = "border:3px solid black; height:200px">
      <div class="col" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
      <div class="col" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
      <div class="col" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
    </div>
    <br />
    <div class="row align-items-end" style = "border:3px solid black; height:200px">
      <div class="col" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
      <div class="col" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
      <div class="col" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
    </div>
  </div>

2. 列在垂直方向的对齐方式 (指定列发生变化)

  用于行的高度大于行中每一个元素的高度情况, 之前的例子都是一样高的
注意: 这些类是使用在列中, 用于使指定列发生变化

(1). 居顶 class = “col align-self-start” (默认)

(2). 居中 class = “col align-self-center”

(3). 居低 class = “col align-self-end”

(4). 三种对齐方式的比较

在这里插入图片描述

  <div class="container">
    <div class="row" style = "border:3px solid black; height:200px">
      <div class="col align-self-start" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
      <div class="col" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
      <div class="col align-self-end" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
    </div>
  </div>

3. 列在水平方向的对齐方式 (整行中的列发生变化)

在这里插入图片描述
&emps;&emps;我为每一列都指定了宽度 (col-2), 但是它们都居左, 我想实现居中, 居右等效果, 该怎么办?

(1). 居左 class = “row justify-content-start” (默认)

在这里插入图片描述

  <div class="container">
    <div class="row align-items-center justify-content-start" style = "border:3px solid black; height:200px">
      <div class="col col-2" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
      <div class="col col-2" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
      <div class="col col-2" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
    </div>
  </div>

(2). 居中 class = “row justify-content-center”

在这里插入图片描述

  <div class="container">
    <div class="row align-items-center justify-content-center" style = "border:3px solid black; height:200px">
      <div class="col col-2" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
      <div class="col col-2" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
      <div class="col col-2" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
    </div>
  </div>

(3). 居右 class = “row justify-content-end”

在这里插入图片描述

  <div class="container">
    <div class="row align-items-center justify-content-end" style = "border:3px solid black; height:200px">
      <div class="col col-2" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
      <div class="col col-2" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
      <div class="col col-2" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
    </div>
  </div>

(4). 两端对齐 class = “row justify-content-between”

在这里插入图片描述

  <div class="container">
    <div class="row align-items-center justify-content-between" style = "border:3px solid black; height:200px">
      <div class="col col-2" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
      <div class="col col-2" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
      <div class="col col-2" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
    </div>
  </div>

(4). 列左右间隔相等 class = “row justify-content-around”

在这里插入图片描述

  <div class="container">
    <div class="row align-items-center justify-content-around" style = "border:3px solid black; height:200px">
      <div class="col col-2" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
      <div class="col col-2" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
      <div class="col col-2" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
    </div>
  </div>

(5). 间隔相等 class = “row justify-content-evenly”

在这里插入图片描述

  <div class="container">
    <div class="row align-items-center justify-content-evenly" style = "border:3px solid black; height:200px">
      <div class="col col-2" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
      <div class="col col-2" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
      <div class="col col-2" style = "border:1px solid red; height:50px;">
        One of three columns
      </div>
    </div>
  </div>

justify-content-evenly 与 justify-content-around 的区别

在这里插入图片描述
在这里插入图片描述
around: 每一列左右两边都有间隔, 且间隔是相同的
evenly: 每一列两边的间隔都是相同的

(6). 五中对齐方式的比较

在这里插入图片描述

4. 列的对齐方式总结

类后缀 水平方向效果 垂直方向效果 默认方式
start 居左 居顶 √
center 居中 居中
end 居右 居下
类前缀 效果
align 垂直方向
justify 水平方向
类 作用对象 方向 效果
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-between 行 水平 该行所有列中的区域都两端对齐
justify-content-around 行 水平 该行所有列中的区域都左右间距相等
justify-content-end-evenly 行 水平 该行所有列中的区域都等间距

5. 列分隔 class = “w-100”

一般用于分隔的区域是空区域
在这里插入图片描述
可以发现, 换行还是在一个大的行区域中, 两行中间并没有边框

  <div class="container">
    <div class="row">
      <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
      <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

<!--      强制换行-->
      <div class="w-100 d-none d-md-block"></div>

      <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
      <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    </div>
  </div>
      <div class="row">
      <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
      <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

<!--      强制换行-->
      <div class="w-100 d-none d-md-block"></div>

      <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
      <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    </div>
  </div>

分割区域加上边框
在这里插入图片描述

  <div class="container">
    <div class="row" style = "border:3px solid black; height:200px">
      <div class="col-6 col-sm-4" style = "border:1px solid red; height:50px;">.col-6 .col-sm-4</div>
      <div class="col-6 col-sm-4" style = "border:1px solid red; height:50px;">.col-6 .col-sm-4</div>

<!--      强制换行-->
      <div class="w-100 d-none d-md-block" style = "border:2px solid purple;"></div>

      <div class="col-6 col-sm-4" style = "border:1px solid red; height:50px;">.col-6 .col-sm-4</div>
      <div class="col-6 col-sm-4" style = "border:1px solid red; height:50px;">.col-6 .col-sm-4</div>
    </div>
    <div class="row" style = "border:3px solid black; height:200px">
      <div class="col-6 col-sm-4" style = "border:1px solid red; height:50px;">.col-6 .col-sm-4</div>
      <div class="col-6 col-sm-4" style = "border:1px solid red; height:50px;">.col-6 .col-sm-4</div>

      <!--      强制换行-->
      <div class="w-100 d-none d-md-block" style = "border:2px solid purple;"></div>

      <div class="col-6 col-sm-4" style = "border:1px solid red; height:50px;">.col-6 .col-sm-4</div>
      <div class="col-6 col-sm-4" style = "border:1px solid red; height:50px;">.col-6 .col-sm-4</div>
    </div>
  </div>

6. 列换行 (Column wrapping)

  如果一行中放置了 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>

7. 列重组 (Reordering)

(1). 排序 order-N

order-N N在1 – 5之间

order-{断点}-N N在1 – 5之间

指定了顺序后, 顺序小的一定在前, 但是没有指定顺序的, 永远在最前面
在这里插入图片描述

  <div class="container">
    <div class="row" style = "border:3px solid black">
      <div class="col" style = "border:1px solid red">
        第一个 没有指定顺序
      </div>
      <div class="col order-5" style = "border:1px solid red">
        第二个 指定顺序 5
      </div>
      <div class="col" style = "border:1px solid red">
        第三个 没有指定顺序
      </div>
      <div class="col order-1" style = "border:1px solid red">
        第四个 指定顺序 1
      </div>
    </div>
  </div>

(2). 排序中两种特殊的位置

1). 最前面 .order-first

最前面

order-first

2). 最后面 .order-last

最后面

order-last

这两个位置优先于全部方式

在这里插入图片描述

  <div class="container">
    <div class="row" style = "border:3px solid black">
      <div class="col" style = "border:1px solid red">
        第一个 没有指定顺序
      </div>
      <div class="col order-5" style = "border:1px solid red">
        第二个 指定顺序 5
      </div>
      <div class="col" style = "border:1px solid red">
        第三个 没有指定顺序
      </div>
      <div class="col order-1" style = "border:1px solid red">
        第四个 指定顺序 1
      </div>
      <div class="col order-first" style = "border:1px solid red">
        第五个 指定顺序 first
      </div>
      <div class="col order-last" style = "border:1px solid red">
        第六个 指定顺序 last
      </div>
      <div class="col order-3" style = "border:1px solid red">
        第七个 指定顺序 3
      </div>
    </div>
  </div>

8. 偏移 offset-N

offset-N N表示偏移的列数, 即前一列和当前列的间距

offset-{断点}-N N表示偏移的列数, 即前一列和当前列的间距

在这里插入图片描述

  <div class="container">
    <div class="row" style = "border:3px solid black">
      <div class="col col-1" style = "border:1px solid red">
        第一个
      </div>
      <div class="col col-2 offset-2" style = "border:1px solid red">
        第二个
      </div>
      <div class="col col-1 offset-4" style = "border:1px solid red">
        第三个
      </div>
    </div>
  </div>

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/122821.html

赞 (0)
飞熊的头像飞熊bm
0 0

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！