When to use bootstrap grid system

When you use bootstrap to create a web page and want the web page to adapt to devices with different resolutions, you need to use a grid system. (Recommended learning: Bootstrap video tutorial)

Grid system is a group of block-level elements that can be arranged horizontally and follow the screen Change the style of block-level elements with different resolutions.

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

The following is an introduction to how the Bootstrap grid system works:

"Row" must be contained in .container (fixed width) or .container-fluid (100% width) , in order to give it appropriate alignment and padding.

Create a group of "columns" in the horizontal direction through "rows".

Your content should be placed within "column", and only "column" can be a direct child element of row.

Similar to .row Predefined classes such as .col-xs-4 can be used to quickly create grid layouts. The mixins defined in the Bootstrap source code can also be used to create semantic layouts.

By "column ( column)" sets the padding attribute to create a gap (gutter) between columns. By setting a negative margin for the .row element to offset the padding set for the .container element, it is indirectly "row" The included "column" offsets the padding.

Negative margins are why the following example sticks out. The content in the raster column lines up.

Columns in a raster system are represented by the range they span by specifying a value from 1 to 12. For example, three equal-width columns can be created using three .col-xs-4.

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

Grid Grid classes apply to devices with screen widths greater than or equal to the breakpoint size, and grid classes are overridden for small screen devices. Therefore, applying any .col-md-* grid classes on an element applies to devices with screen widths greater than or equal to Breakpoint sized devices, and override the grid class for small screen devices. Therefore, applying any .col-lg-* on the element does not exist and also affects large screen devices.

More Bootstrap related technical articles , please visit the Bootstrap Tutorial column to learn!

The above is the detailed content of When to use bootstrap grid system. For more information, please follow other related articles on the PHP Chinese website!