Beauty of Bootstrap 3 02-grid introduction and application

This article mainly includes:

■ Grid Introduction
■ Application Grid
■ Multiple Grids

 

About Grid

In Bootstrap, the page is divided into 12 equal parts, which is the so-called grid.

 

In Bootstrap, use the class name control, which follows a form similar to ". col-xx-6.

 

The entire page is filled with 2 or 6. Therefore, the number at the end of the class name indicates the number of cells.

 

For example, 3 4 also occupies the entire page.

 

For example, four three are also full of the entire page.

 

For example, 6 2 s also occupy the entire page.

 

In addition, for Class names like ". col-xx-10. col-xx-offset-2", offset represents offset, and 2 represents offset to the right two cells.

The above is worth noting: in the second to last line, when ". col -- xx-3 "placed ". col-xx-3. col-xx-offset-2 "later, due to the size of more than 12 cells ,". col -- xx-3 automatically runs to the beginning of the next line.

 

Application Grid

How to Apply grid to a section with ID as body?
In index.html, add the class = "Container" attribute to the Section whose ID is body.
→ Add the class = "col-md-8" attribute to section whose ID is main
→ Add class = "col-md-4" attribute to section with ID sidebar

How can we make the header and footer partially apply the grid?
→ Remove the class = "Container" attribute of the DIV whose ID is page and change it to: <Div id = "page">
→ Add the class = "Container" attribute to the header and change it to: → Add the class = "Container" attribute to footer and change it to <footer class = "Container">

Above, the header, body, and footer parts all apply the grid. The main part of the body occupies 8 cells, and the sidebar part of the body occupies 4 cells.

 

So far so good. However, if we reduce the browser width to the screen size of a smartphone, we will see some non-harmonious aspects:

 

For example, the title of a row is added to two rows:

 

For example, you need to slide the horizontal scroll bar to view the full picture of an image that can be completely presented:

For example, the original part on the right is pushed to the bottom.

How can we solve these problems?

 

Multiple Grids

Multiple grids indicates that a page element can have multiple class names that indicate the size of cells. Enable different classes for different page widths.

 

In Bootstrap 3,
". Col-LG-xx" indicates the page width> = 1200 pixels.
". Col-MD-xx" indicates the page width> = 992 pixels.
". Col-Sm-xx" indicates the page width> = 768 pixels.
". Col-xs-xx" indicates the page width <768 pixels.

 

We can assign multiple class names to an HTML element, which are uniquely represented. In the case of LD, the class occupies several cells, and in the case of MD, the class occupies several cells.

 

Suppose we need to consider the SM situation, that is, the face width is greater than or equal to 768 pixels.
→ Add col-sm-9 to class in section with ID as main
→ Add a col-sm-3 to the class in sectioin with ID sidebar

 

Now, adjust the page width to about 800 pixels.

It can be seen that, as previously set, section with ID as main occupies nine cells, and sectioin with ID as sidebar occupies three cells.

Next, we will consider the case of XS, that is, the page width is less than 768 pixels.
→ Add col-xs-6 to class in section with ID as main
→ Add a col-xs-6 to the class in sectioin with ID sidebar

 

Now, adjust the page width to about 590 pixels.

It can be seen that, as previously set, section with ID as main occupies 6 cells, and sectioin with ID as sidebar occupies 6 cells.

 

However, when the page width is less than 768 pixels, setting both the left and right sides to occupy 6 cells is unlikely to appear in the actual project. The above is just for demonstration. We also need to delete the corresponding class name in this case. Return to the following status:

Reference: wilderminds

 

The beauty classes of Bootstrap 3 include:

$ Bootstrap 3 $01-download and introduce Bootstrap 3 $02-grid introduction and application