Shulou(Shulou.com)06/03 Report--

This article shows you what the grid system in Bootstrap is like, the content is concise and easy to understand, it can definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

1. The working principle of Bootstrap grid system.

1.1 Twelve grid system

Grid is grid, English Grid, the reason why some places are grid, some places are grid, but the translation habits are different. The twelve-grid system means that the whole screen is divided into twelve equal parts according to its width, and one equal part represents 1/12 of the screen width. Why is it divided into twelve equal parts instead of ten equal parts or other equal parts? this is because 12 is the least common multiple of 1, 2, 3, 4, 6, according to experience, this division is the most beautiful and practical. Of course, I have also seen 36-grid and 10-grid systems, which are really not as convenient as 12 grids.

In a twelve-grid system, if I want to divide the screen into left and right sides, 1/3 on the left and 2/3 on the right, I can set the width of the left to 4 grids and the right to 8 grids. If I need half of the left and right stations, I just need to set each grid to 6. If I only need to set one page to fill the screen, I can set it to 12 grids directly. Look, isn't it convenient?

1.2 Bootstrap Grid system label

The Bootstrap grid system designs three tags, which are container,row,col:

Container is a container, which was described in detail in the previous section.

Row means "line" and represents a horizontal line

Col is a cell that represents each cell. It can be written in three ways: col, the number of col- grids (such as col-3), and the col- screen size-the number of grids (such as col-md-3).

The following is a sample code that divides the screen into three equal-width units. Instead of delving into the writing of the specific code, you only need to have a brief understanding of the structure of the grid system, which we will explain in detail later.

First unit, second unit, third unit.

1.3 Bootstrap grid system rules

Use rows (row) to create horizontal groups of columns.

There can be multiple rows in a page.

Rows must be placed in a container (container) to achieve proper alignment (alignment) and inner margins (padding).

The content should be placed in a column (col), and only the column can be an immediate child of the row.

You can also nest rows within a column, and the rows in the column do not need container, because the column itself is a container.

You can directly use predefined grid classes, such as col- screen size-grid count, to quickly create grid layouts.

In the predefined class, there are five values for screen size, which are mainly used for responsive design, see 3.1. The number of grids is the number 1 to 12, which represents the width of the screen.

2. Cell width setting in Bootstrap grid system.

2.1 default equal width layout

If we do not set the width of each column, by default how many columns will distribute the width of each column evenly, but if a row has more than 12 columns, there will be unpredictable phenomena (I did several tests to study. You don't need to test this, if you want to layout more than 12, you can use a table). I'll give you a piece of code that will be used all the time, making some minor changes and not repeating it.

When using the number of col and col- grids to set the width, please set the window width to the maximum, otherwise it may cause effect deviation. In addition, we do not recommend this setting in practical application, please use responsive grid layout, even if you do not want to respond.

What is the grid system demo Bootstrap?

When we develop front-end pages, it would be a waste of time if we had to write every button, style, and browser compatibility code from scratch. So we need a framework to help us achieve the basic part of a page to resolve some tedious details, as long as personalized customization on the basis of it. Bootstrap is such a simple, intuitive, strong front-end development framework. As long as we learn and abide by its standards, even developers who have not learned web design can make professional and beautiful pages, which greatly improves the work efficiency.

What is Bootstrap?

When we develop front-end pages, it would be a waste of time if we had to write every button, style, and browser compatibility code from scratch. So we need a framework to help us achieve the basic part of a page to resolve some tedious details, as long as personalized customization on the basis of it. Bootstrap is such a simple, intuitive, strong front-end development framework. As long as we learn and abide by its standards, even developers who have not learned web design can make professional and beautiful pages, which greatly improves the work efficiency.

What is Bootstrap?

When we develop front-end pages, it would be a waste of time if we had to write every button, style, and browser compatibility code from scratch. So we need a framework to help us achieve the basic part of a page to resolve some tedious details, as long as personalized customization on the basis of it. Bootstrap is such a simple, intuitive, strong front-end development framework. As long as we learn and abide by its standards, even developers who have not learned web design can make professional and beautiful pages, which greatly improves the work efficiency.

What is Bootstrap?

When we develop front-end pages, it would be a waste of time if we had to write every button, style, and browser compatibility code from scratch. So we need a framework to help us achieve the basic part of a page to resolve some tedious details, as long as personalized customization on the basis of it. Bootstrap is such a simple, intuitive, strong front-end development framework. As long as we learn and abide by its standards, even developers who have not learned web design can make professional and beautiful pages, which greatly improves the work efficiency.

The effect of this code is shown in the image above. You can copy a few more of the cells below to see the effect.

What is Bootstrap?

When we develop front-end pages, it would be a waste of time if we had to write every button, style, and browser compatibility code from scratch. So we need a framework to help us achieve the basic part of a page to resolve some tedious details, as long as personalized customization on the basis of it. Bootstrap is such a simple, intuitive, strong front-end development framework. As long as we learn and abide by its standards, even developers who have not learned web design can make professional and beautiful pages, which greatly improves the work efficiency.

2.2 set each column width

Try to change the col of the three to col-3,col-6,col-3 or other values, respectively. In short, the three numbers can be added to 12. Of course, you can also delete or add one or more cells, so that the sum of one line is 12. Through such a simple setting, you can easily modify the width of the cell. The following figure shows the display effect of changing it to col and col-2,col-2,col-4,col-4 respectively

2.3 variable width column

If you set only one of the three cells when setting the cell value, the remaining two cells will divide the remaining space equally, so that you can easily set the variable width column. As a reminder, cells with fixed values don't need to be in front of them. For example, you can set the second cell to occupy the screen (col-6) and distribute the other cells equally.

2.4 columns that wrap automatically

When each cell is set to a width value, when the remaining space in a row no longer holds a cell, it will automatically wrap.

Change the example of 2.1and replace the col in all four with col-6 to see the effect.

Change the example of 2.1and replace the col in all four with col-12 to see the effect.

Change the example of 2.1and replace the col in all four with col-8 to see the effect.

As you can see, although set to col-8 can also be set to one line per cell, but the text accounts for only eight-tenths of the screen, that is, 2/3, so if there is no special requirements, try to add up the cell value of each row exactly 12.

3. Bootstrap grid responsive layout

3.1 what is responsive layout

When it comes to responsive layout, it simply means that the page layout is different when the screen size is different. For example, there is only one cell in a row when the phone is watching, two cells in a row when the tablet is watching, and three when the computer is watching. Bootstrap can easily implement this function.

3.2 screen size partition of Bootstrap grid system

Take a look at the following table, is not very familiar, and breakpoint provisions are exactly the same, but more than a xs, in fact, the default is xs, so you can directly omit. As you can see, Bootstrap divides the screen into six size types through five breakpoints.

Xs

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.