This is the fourth day of my participation in the More text Challenge. For details, see more text Challenge

“Bootstrap5 zero base to master” an old liu original, strive for a daily update section.

To correspond to the number of update days, the previous update on the first day counts as the first section, followed by one section backward. In case you were wondering, the third section is missing.

1. Working principle of Bootstrap grid system

1.1 Twelve grid system

Grid is a Grid, English Grid, the reason why some places are grids, some places are grids, just different translation habits. Twelve grid system according to the entire screen will mean width is divided into halves, and a uniform represents one over twelve of the screen width, why is divided into ten halves, rather than ten equal parts, or other equal parts, this is because the least common multiple of 12 are 1,2,3,4,6, according to the experience, according to the division of this is the most beautiful and practical. Of course, I’ve also seen 36-grid and 10-grid systems, which are not as convenient to use as 12-grid systems.

On a 12-grid system, if I want to divide the screen into left and right sides, with the left one-third and the right two-thirds, I can set the left width to 4 grids and the right to 8 grids. If I need to stand half left and half right, just set each to 6 grids. If I only need one page to fill the screen, I can set it to 12. Look, isn’t it convenient?

1.2 Bootstrap Grid system label

The Bootstrap grid system is designed with three labels, namely Container, Row and COL:

  • Container is a container, which was covered in detail in the previous section.
  • Row means row. It means a horizontal row
  • The COL is a cell, representing each specific cell, and can be written in three ways: COL, col-number of rasters (e.g., COL-3), and col-screen size -number of rasters (e.g., COL-MD-3).

Here is an example code that divides the screen into three units of equal width. Without going into the specifics of the code, just a quick look at the structure of the grid system, which will be explained in more detail later.

<div class="container">
    <div class="row">
        <div class="col">The first unit</div>
        <div class="col">Unit two</div>
        <div class="col">Unit 3</div>
    </div>
</div>
Copy the code

1.3 Bootstrap Grid system rules

  1. Use rows to create horizontal groups of columns.

  2. You can have more than one row in a page.

  3. Lines must be placed inside a container for proper alignment and padding.

  4. Contents should be placed in col columns, and only columns can be direct children of rows.

  5. Columns can also be nested with rows. Rows in a column do not need a container because the column itself is a container.

  6. Predefined grid classes, such as COL – Screen size – Number of Grids, can be used directly to quickly create raster layouts.

  7. In the predefined classes, there are five values for the screen size, mainly for responsive design, as shown in 3.1. The numbers 1 through 12 represent the width of the screen.

2. Set the cell width in the grid system

2.1 Default uniform layout

If we do not set the width of each column, how many are the default will average distribution of each column of the width of a column, but if a line of more than a dozen columns, there will be unpredictable phenomenon (I made a few tests, is to study the you don’t need to test this, if you want more than a dozen layout, can use the table). I’m going to give you a piece of code that I’m going to use for the rest of my life, with some minor changes, but I won’t repeat it.

When using col and COL-raster width Settings, please set the preview window width to the maximum, otherwise it may cause bias, and we do not recommend this setting in practice, use a responsive grid layout, even if you do not want to respond.

<! doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <link Href = "bootstrap5 / bootstrap. Min. CSS" rel = "stylesheet" > < title > grid system demonstration < / title > < / head > < body > < div class = "container" > < div Class ="row"> <div class="col"> < span style = "box-sizing: border-box; color: RGB (62, 62, 62); line-height: 22px; font-size: 14px! Important; white-space: inherit! Important;" So we needed a framework that would help us implement the basics of a page and settle the details, just by personalizing it. Bootstrap is such a simple, intuitive and powerful front-end development framework. As long as you learn and follow its standards, even the developers who have not learned web design can make very professional and beautiful pages, which greatly improves the work efficiency. <div class="col"> <h1> What is Bootstrap? < span style = "box-sizing: border-box; color: RGB (62, 62, 62); line-height: 22px; font-size: 14px! Important; white-space: inherit! Important;" So we needed a framework that would help us implement the basics of a page and settle the details, just by personalizing it. Bootstrap is such a simple, intuitive and powerful front-end development framework. As long as you learn and follow its standards, even the developers who have not learned web design can make very professional and beautiful pages, which greatly improves the work efficiency. <div class="col"> <h1> What is Bootstrap? < span style = "box-sizing: border-box; color: RGB (62, 62, 62); line-height: 22px; font-size: 14px! Important; white-space: inherit! Important;" So we needed a framework that would help us implement the basics of a page and settle the details, just by personalizing it. Bootstrap is such a simple, intuitive and powerful front-end development framework. As long as you learn and follow its standards, even the developers who have not learned web design can make very professional and beautiful pages, which greatly improves the work efficiency. <div class="col"> <h1> What is Bootstrap? < span style = "box-sizing: border-box; color: RGB (62, 62, 62); line-height: 22px; font-size: 14px! Important; white-space: inherit! Important;" So we needed a framework that would help us implement the basics of a page and settle the details, just by personalizing it. Bootstrap is such a simple, intuitive and powerful front-end development framework. As long as you learn and follow its standards, even the developers who have not learned web design can make very professional and beautiful pages, which greatly improves the work efficiency. </p> </div> </div> </div> <script src="bootstrap5/bootstrap.bundle.min.js" ></script> </body> </html>Copy the code

This code is shown in the image above, you can copy a few more cells below to see the effect.

              <div class="col">
                <h1>What is Bootstrap?</h1>
                <p>It would be a waste of time if we had to write every button, style, and browser compatibility code from scratch when developing a front-end page. So we needed a framework that would help us implement the basics of a page and settle the details, just by personalizing it. Bootstrap is such a simple, intuitive and powerful front-end development framework. As long as you learn and follow its standards, even the developers who have not learned web design can make very professional and beautiful pages, which greatly improves the work efficiency.</p>
            </div>
Copy the code

2.2 Set each column width

Of course, you can also delete or add one or more cells, but the sum of a row is 12. With this simple setting, you can easily change the width of the cell. The following figure shows the display effect of col-2, col-2, col-4 and col-4 when set to COL

2.3 Variable width columns

If you set a value for one of the three cells, the remaining two cells will split the rest of the space, making it easy to set variable width columns. As a reminder, cells with fixed values do not need to be set first. For example, in code 2.1 you can set the second cell to take up screen size (COL-6) and the other cells to be equally allocated.

2.4 Auto wrap columns

When each cell is set to a width value, when there is no room left for a cell in a row, the line wraps.

  1. Will 2.1 examples, will four<div class="col">Change the col-6 to col-6.

  1. Will 2.1 examples, will four<div class="col">Change the col to col-12.

  1. Will 2.1 examples, will four<div class="col">Change the col-8 to col-8.

As you can see, although col-8 will work for one row per cell, the text only takes up eight twelfths of the screen, or two-thirds, so if you don’t have special requirements, try to add up the values of the cells in each row to exactly 12.

3. Responsive grid layout

3.1 What is responsive Layout

A responsive layout simply means that the layout of the page is displayed differently at different screen sizes. For example, a phone has one cell per row, a tablet has two cells per row, and a computer has three. Bootstrap is a convenient way to implement this function.

3.2 Partition of the screen size of the Bootstrap grid system

Look at the table below, if you’re familiar with it, it’s exactly the same as the breakpoint, but with an extra xs, which is the default, so you can skip it. As you can see, Bootstrap divides the screen into six size types with five breakpoints.

xs

<576px 		sm

P 576 px.		 md

P 768 px.		 lg

P 992 px.		 xl

P 1200 px.		 xxl

P 1400 px.
The Container vessel None (auto) 540px 720px 960px 1140px 1320px
Screen size class prefix .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-

3.3 Bootstrap Grid responsive layout instance

When 768px< width <992px there are two columns (6 grids each width), and when larger than 992px there are three columns (4 grids each width). Here is a video of the demonstration

And of course, you can change it a little bit more<div class="col-12 col-sm-6 col-md-4 col-md-3 col-lg-2">.

Here’s a little trick, if you want to display a row of columns, the width is just 12 divided by the number, ha ha, you can probably get it.

3.4 If you do not want to respond

If you want all browsers to look the same, in two columns, so you don’t want it to be responsive, then it’s easy,

This is the end of today’s course, please pay attention to me, and learn the layout and sorting of the fifth section of Bootstrap web layout in my original “Bootstrap5 From zero to Master”.