What does the bootstrap grid system mean?

What is the grid system

The grid system refers to dividing the page layout into equal-width columns, and then through The number of columns is defined to modularize the page layout. Bootstrap's grid system uses a 1-12 column pattern and uses proportional calculations to set the column widths you define. For example, if you want to use a two-column layout mode for this row, the width of each column will be 50% of the outer container. No matter what device you use to browse, it will be displayed in this proportion. However, if the device width is smaller than the minimum width you set, the two columns will become one column side by side.

Bootstrap’s grid system

Using the grid system in Bootstrap is very simple and convenient. You only need to introduce their already defined classes into your divs. .

Let’s first take a look at several grid classes that can be used in Bootstrap:

1. .col-xs-* This is an ultra-small screen class (<768px), similar to mobile phones and other devices .

2. .col-sm-* This is a small screen device class (≥768px and <992px), similar to tablet devices.

3. .col-md-* This is a medium device class (≥992px and <1200px).

4. .col-lg-* This is a large device class (≥1200px).

How to use the Bootstrap grid system

You can decide the layout style you want to apply on different devices by using the grid classes corresponding to these devices. For example:

The result of this encoding is that the two divs appear as two rows on the PC (each row occupies 12 columns of the grid), but on the mobile browser they appear as one row and two columns (each column occupies 6 columns of the grid). . In this form, you can easily use the grid system to customize your own application layout.

Other information

In addition to the above usage methods, you can also use the "column offset class" to quickly position your own grid. The usage method is similar to

According to this writing method, this div will be offset to the right by 3 columns on the PC side.

For more technical articles related to Bootstrap, please visit the

Bootstrap Tutorial

column to learn!

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