What is the working principle of bootstrap grid system

This article is about how the bootstrap grid system works. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

What is Bootstrap

Bootstrap provides a responsive, mobile device-first streaming grid system that automatically divides into up to 12 columns as the screen or viewport (viewport) size increases. Contains predefined classes for simple layout options, as well as powerful hybrid classes for generating more semantic layouts.

If we understand this passage, we can find that the most important part is mobile device priority, so what is mobile device priority?

The basic CSS code for Bootstrap starts with small-screen devices (such as mobile devices, tablets) by default, and then uses media queries to extend components and grids on large-screen devices (such as laptops, desktops).

The strategy is as follows:

Content: decide what is most important. Layout: give priority to designing smaller widths. Progressive enhancement: elements are added as the screen size increases.

Second, working principle

The grid system is used to create page layouts through a series of combinations of rows (row) and columns (column), and your content can be placed into these created layouts.

The working principle is as follows:

"row" must be included in .container (fixed width) or .container (100% width) to give it the appropriate aligment and padding.

Create a set of columns (column) horizontally through row. However, the sum of the number of columns cannot exceed the total number of columns divided equally (when the excess is exceeded, the excess will be displayed in a new line). The default is 12. (custom settings can be made using Less or Sass), as follows:

Your content should be placed in the "column", and only the "column" can be used as the direct child element of the row.

Predefined classes like .row and .col-xs-4 can be used to quickly create grid layouts. The mixin defined in the Bootstrap source code can also be used to create a semantic layout.

Create a column-to-column interval (gutter) by setting the padding property for column. By setting a negative margin for the .row element to counteract the padding set for the .container element, this indirectly counteracts the padding for the "column" contained in the "row". A negative margin is why the following example is protruding outward. The contents in the grid column are arranged in a row.

Columns in a grid system represent the range they span by specifying values from 1 to 12. For example, three columns of equal width can be created using three .col-xs-4.

If the "column" contained in a "row" is greater than 12, the elements of the redundant "column" will be arranged in another row as a whole.

The grid class is suitable for devices with a screen width greater than or equal to the size of the demarcation point, and overrides the grid class for small screen devices. Therefore, applying any .col-md-* grid class to an element is suitable for devices with a screen width greater than or equal to the size of the demarcation point, and overrides the grid class for small screen devices. Therefore, applying any .col-lg-* to the element does not exist and also affects the large-screen device.

Thank you for reading! This is the end of the article on "how the bootstrap grid system works". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!