您的位置：首页 > 技术中心 > 前端框架 >

bootstrap中有栅格布局吗

时间：2022-09-07 11:14

bootstrap中有栅格布局；栅格布局指的是将一行分为12个栅格，将12个栅格分配给不同的div元素来进行布局，可以通过设置列所占有的栅格的个数来设置列的宽度，是通过列数来定义模块化的页面布局方式。

本教程操作环境：Windows10系统、bootstrap5版、DELL G3电脑

bootstrap中有栅格布局吗

bootstrap中有栅格布局

1.什么是栅格布局？

以前的网页制作布局用的是tabel布局，通过把表格将网页分为大大小小的表格，再从表格中填充元素。后来发展为div+css布局。通过div+css浮动。flaot:right和float:left.布局。

现在bootstrap运用的是栅格布局。简单来说就是把一行分为12个栅格。将12个栅格分配给不同的DIV元素来进行布局。

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

2.如何实现栅格布局?

首先，使用bootstrap由很多方式，webpack加载或者使用CND引用等。我是直接从CDN上下载3.37版本到本地。再通过link标签引用。这点和引用Jquery类似。

其次，根据布局分配栅格。举个例子，比如说要实现水平的三列等大布局。那么就给每个DIV分配12/3=4个栅格，

如果是三列不等大的，左边大约为3个栅格，中间为5个，右边为4个

具体操作：

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

<!DOCTYPE html>
<html>
<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>
  <div>
    <div class="col col-sm">第一列</div>
    <div class="col col-sm">第二列</div>
    <div class="col col-sm">第三列</div>
  </div>
</div>
<!--设置container-fluid默认占满宽度-->
<div>
  <div>
    <div class="col col-sm">第一列</div>
    <div class="col col-sm">第二列</div>
    <div class="col col-sm">第三列</div>
  </div>
</div>
<!--当设置*的大小时，默认按照比例分割宽度-->
<div>
  <div>
    <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>
  <div>
    <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>
  <div>
    <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>

3.栅格布局class参数是什么意思?

栅格的class有四个col-lg-1，col-md-1，col-sm-1,col-xs-1,分别对应大屏幕（large)，中等屏幕（middl），小屏幕（smll），极小（xs）。其中col表示列的意思column，中间为尺寸的缩写，最后是div分配的栅格大小（例子是占用的是1/12）