Bootstrap之栅格布局

最新推荐文章于 2024-03-12 20:16:50 发布

儒雅的烤地瓜

最新推荐文章于 2024-03-12 20:16:50 发布

阅读量1.4k

点赞数 1

分类专栏： Bootstrap 文章标签： bootstrap html 前端栅格布局弹性

本文链接：https://blog.csdn.net/sunyctf/article/details/127453065

版权

Bootstrap 专栏收录该内容

2 篇文章 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来左右对齐

儒雅的烤地瓜

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
Bootstrap之栅格布局

Bootstrap提供了.cintainer和.container-fluid两种容器布局。这两种样式是启用布局栅格系统最基本的要素。.cintainer是固体自适应方式，.container-fluid是流体100%自适应方式。容器布局可以嵌套，但一般不推荐使用。Bootstrap是以移动端优先的
复制链接

扫一扫