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

In this article, the editor introduces in detail "what are the functions of bootstrap's grid system", the content is detailed, the steps are clear, and the details are handled properly. I hope this article "what is the role of bootstrap's grid system" can help you solve your doubts.

In bootstrap, the role of the grid system is to make the same set of pages adapt to different resolution devices; the system divides each row into 12 grids on average, and then specifies that the same element occupies a different number of grids on different devices, thus realizing the page layout of different devices.

Operating environment of this tutorial: Windows10 system, bootstrap3.3.7 version, DELL G3 computer

What's the use of bootstrap's grid system?

1.bootstrap grid system: the function is to make the same set of pages can adapt to different resolutions of the device

two。 Implementation of the grid system: divide each row into 12 grids on average, 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 computers and 12 grids on mobile phones.

3. Steps

1. Define containers: equivalent to table tables

* Container classification:

1.container: fixed width varies from device to device (blank)

2. ContainerMutual fluidPack 100%

two。 Define lines: equivalent to tr style: row

3. Define element: specify the number of cells the element occupies on different devices. Style: col- device code-grid number

* device code:

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

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

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

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

* * Note: if the number of squares in a line exceeds 12, the excess will automatically wrap.

* * Note: the defined class attributes are upward compatible, while downward incompatible. If the width of the device is less than the minimum value of the device code of the grid class attribute you set, by default, one element will occupy the entire line.

After reading this, the article "what is the function of bootstrap's grid system" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it to understand it. If you want to know more about related articles, welcome to follow the industry information channel.

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.