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

This article mainly introduces when to use the bootstrap grid system, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

When you use bootstrap to create a web page, you want the web page to adapt to different resolution devices, so you need to use a grid system.

A grid system can arrange a group of block-level elements horizontally and change the style of block-level elements according to the screen resolution.

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.

Here's how the Bootstrap grid system works:

"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.

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 article carefully. I hope the article "when to use bootstrap Grid system" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.