Is there a grid layout in bootstrap?-Bootstrap Tutorial-php.cn

Is there a grid layout in bootstrap?

WBOY

Release： 2022-06-16 11:10:13

Original

3020 people have browsed it

There is a grid layout in bootstrap; grid layout refers to dividing a row into 12 grids and assigning 12 grids to different div elements for layout. You can set the column occupancy The number of grids is used to set the width of the columns, and the number of columns is used to define the modular page layout.

Is there a grid layout in bootstrap?

The operating environment of this tutorial: Windows 10 system, bootstrap version 5, DELL G3 computer

Is there a grid layout in bootstrap

There is a grid layout in bootstrap

1. What is a grid layout?

In the past, tabel layout was used to create web page layouts. The web page was divided into large and small tables by dividing the tables, and then elements were filled from the tables. Later it developed into div css layout. float via div css. float:right and float:left. layout.

Now bootstrap uses grid layout. To put it simply, a row is divided into 12 grids. Assign 12 grids to different DIV elements for layout.

Introduced grid layout in Bootstrap, dividing the page into a table-like layout
Each row consists of 12 columns, you can Set the width of the column by setting the number of columns occupied by the column
Supports responsive layout, with 5 responsive sizes corresponding to different device widths
Use flexbox flow layout to realize page layout
Use div to realize the layout of containers, rows and columns

2. How to implement grid layout?

First of all, there are many ways to use bootstrap, webpack loading or using CND references, etc. I downloaded version 3.37 directly from CDN to my local computer. Then reference it through the link tag. This is similar to referencing Jquery.

Secondly, assign the grid according to the layout. For example, let's say you want to implement a large horizontal layout with three columns. Then allocate 12/3=4 grids to each DIV.

If the three columns are unequal, there will be about 3 grids on the left, 5 in the middle, and 4 on the right

Specific operation:

First arrange a container div to store the grid, add the container class to the div to implement the container
is Add the row class to the sub-element to implement the row layout, and use col-* to implement the column layout
When the class name is container-fluid, the default occupied width is 100%, occupying The entire page
When using col-, if the size is not set, the width will be intelligently divided into equal parts by default. If the size of * is set, the page space will be divided proportionally
But the size of * in the same line cannot exceed 12, it can be less than 12, and there will be blanks; when it exceeds 12, the excess part will be placed in the next line

<!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>

Copy after login

3. What does the grid layout class parameter mean?

The grid class has four col-lg-1, col-md-1, col-sm-1, col-xs- 1, corresponding to large screen (large), medium screen (middl), small screen (smll), and extremely small screen (xs). Among them, col means column, the middle is the abbreviation of the size, and the last is the grid size allocated by the div (the example is that it occupies 1/12)

Related recommendations: bootstrap tutorial

The above is the detailed content of Is there a grid layout in bootstrap?. For more information, please follow other related articles on the PHP Chinese website!