What is the use of bootstrap’s grid system?

In bootstrap, the role of the grid system is to allow the same set of pages to adapt to devices with different resolutions; the system divides each row into 12 grids evenly, and then specifies that the same element will be occupied on different devices. The number of grids is different to achieve page layout for different devices.

The operating environment of this tutorial: Windows 10 system, bootstrap version 3.3.7, DELL G3 computer

What is the use of bootstrap's grid system

1.bootstrap grid system: its function is to make the same set of pages adapt to devices with different resolutions

2. Implementation of the grid system: divide each row into 12 grids, and then Specify that the same element occupies a different number of grids on mobile devices and PC devices. For example: a div occupies 4 grids on the computer and 12 grids on the mobile phone

3. Step

1 .Define container: equivalent to table table

*Container classification:

1.container: Fixed width varies with different devices (leave blank)

2.container- fluid: 100%

2. Define row: equivalent to tr style: row

3. Define element: specify the number of grids occupied by the element on different devices. Style: col-device code-number of grids

*Device code:

1.xs: ultra-small screen mobile phone (768px): col-xs-12

2. sm: small screen tablet (>=768px)

3.md: medium screen desktop monitor (>=992px)

4.lg: large screen large desktop monitor (>= 1200px)

**Note: If the number of grids in a line exceeds 12, the excess parts will automatically wrap

**Note: The defined class attributes are upward compatible, but not downward compatible , if the width of the device is less than the minimum value of the device code of the grid class attribute you set, one element will occupy the entire row by default.

Related recommendations: bootstrap tutorial

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