Bootstrap栅格布局

最新推荐文章于 2024-05-08 16:31:38 发布

jwz934738949

最新推荐文章于 2024-05-08 16:31:38 发布

阅读量1.1k

点赞数

分类专栏： BootStrap

本文链接：https://blog.csdn.net/jwz934738949/article/details/118435582

版权

BootStrap 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

栅格布局基本概念

在Bootstrap中引入了栅格布局，将页面分成类似于表格一样的布局
每一行由12列组成，可以通过设置列所占有的列的个数来设置列的宽度
支持响应式布局，分别有5种响应尺寸，分别对应不同的设备宽度
使用flexbox流式布局来实现页面布局
使用div来实现容器、行、列的布局

栅格布局具体操作

首先布置一个容器div用来存放栅格，为div添加container类实现容器
为子元素添加row类实现行的布局，而列的布局使用col-*来实现
当类名为container-fluid的话，默认占据的宽度为100%，占据整个页面
使用col-时，不设置的大小，会默认智能平分宽度，设置*的大小会按照比例分割页面空间
但是同一行中*的大小不能超过12，可以小于12，会存在空白；当超过12时，会将超过的部分放在下一行中

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>栅格布局</title>
  <!--  移动端优先-->
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!--  引入bootstrap.css文件-->
  <link rel="stylesheet" href="css/bootstrap.css">

  <style>
    .row {
      border: 1px dashed #000;
      margin-top: 20px;
    }

    .col {
      border: 1px solid #0069d9;
      background: #f1b0b7;
    }
  </style>
</head>
<body>
<!--  不设置*的大小，默认平分列的宽度-->
<div class="container">
  <div class="row">
    <div class="col col-sm">第一列</div>
    <div class="col col-sm">第二列</div>
    <div class="col col-sm">第三列</div>
  </div>
</div>

<!--设置container-fluid默认占满宽度-->
<div class="container-fluid">
  <div class="row">
    <div class="col col-sm">第一列</div>
    <div class="col col-sm">第二列</div>
    <div class="col col-sm">第三列</div>
  </div>
</div>

<!--当设置*的大小时，默认按照比例分割宽度-->
<div class="container">
  <div class="row">
    <div class="col col-sm-5">第一列</div>
    <div class="col col-sm-2">第二列</div>
    <div class="col col-sm-5">第三列</div>
  </div>
</div>

<!--小于12时，会出现空白区域-->
<div class="container">
  <div class="row">
    <div class="col col-sm-3">第一列</div>
    <div class="col col-sm-2">第二列</div>
    <div class="col col-sm-3">第三列</div>
  </div>
</div>

<!--当超出12时，会自动换行-->
<div class="container">
  <div class="row">
    <div class="col col-sm-5">第一列</div>
    <div class="col col-sm-5">第二列</div>
    <div class="col col-sm-7">第三列</div>
  </div>
</div>

<!--首先引入jQuery文件，再引入poper文件，最后引入bootstrap文件-->
<script src="js/jquery.slim.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>

栅格等级

栅格系统有5个栅格等级：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e2zTjxJm-1625274196924)(http://119.3.124.138:8090/upload/2020/10/image-901023c995af49718892e4f04848e8d5.png)]
当同时使用两个级别及以上，并且比例相同，按照移动端优先
使用.w-100可以默认进行切割，将栅格强制进行换行
在使用w-100进行切割之后，无法对空白区域进行填充

<div class="container">
  <div class="row">
    <div class="col col-sm-4 col-md-5">第一列</div>
    <div class="col col-sm-5 col-md-3">第二列</div>
    <div class="col col-sm-3 col-md-4">第三列</div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col col-sm-4 col-md-5">第一列</div>
    <div class="col col-sm-5 col-md-3">第二列</div>
    <div class="w-100"></div>
    <div class="col col-sm-3 col-md-4">第三列</div>
    <div class="col col-sm-3 col-md-4">第四列</div>
  </div>