The Beauty of Bootstrap 302-Grid Introduction and Application_html/css_WEB-ITnose

This article mainly includes:

■ Introduction to Grid
■ Application Grid
■ Multiple Grids

Introduction to Grid

In Bootstrap, the page is divided into 12 equal parts. This is the so-called Grid.

In Bootstrap, controlled by class names, these types follow a form similar to ".col-xx-6".

Two sixes take up the entire page. Therefore, the number at the end of the class name indicates how many spaces it will occupy.

Another example, three 4s also occupy the entire page.

Another example, four 3s also occupy the entire page.

Another example, 6 2’s also occupy the entire page.

In addition, for class names like ".col-xx-10 .col-xx-offset-2", offset means offset, and 2 means offset to the right. 2 cells.

It is worth noting that in the second to last line, when putting ".col--xx-3" in ".col-xx-3 .col-xx-offset After -2", ".col--xx-3" will automatically run to the beginning of the next line because it exceeds the size of 12 cells.

Applying Grid

How to apply Grid to the section whose id is body?
→In index.html, add the class="container" attribute to the section with the id of body
→Add the class="col-md-8" attribute to the section with the id of main
→ Add the class="col-md-4" attribute to the section with the ID of sidebar

How to apply Grid to the header and footer parts?
→Remove the class="container" attribute of the div with id page, and it becomes:

→Add the class="container" attribute to the header, and it becomes: < ;header class="container">
→Add the class="container" attribute to the footer and it becomes:

Above, Grid is applied to the header, body, and footer parts. 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 width of the browser to the size of a smartphone screen, some disharmonious aspects emerge:

For example, a one-line title becomes two lines. :

For example, a picture that could have been presented completely now needs to slide the horizontal scroll bar to get a full view of it:

Also, for example, originally The part on the right is pushed underneath, and so on.

How to solve these problems?

Multiple Grids

Multiple Grids means: a page element can have multiple class names representing the cell size. Different page widths enable different classes.

In Bootstrap 3,
".col-lg-xx" means page width >= 1200 pixels.
".col-md-xx" means page width>=992 pixels.
".col-sm-xx" means page width>=768 pixels.
".col-xs-xx" means page width

We can give multiple class names to an html element, indicating how many cells it occupies in the case of ld, how many cells it occupies in the case of md, etc. .

Suppose we need to consider the case of sm, that is, the case where the face width >= 768 pixels.
→In the section with id of main, add col-sm-9 for class
→In the section with id of sidebar, add col-sm-3 for class

Now, adjust the page width to about 800 pixels.

It can be seen that at this time, as set before, the section with the id of main occupies 9 cells, and the sectioin with the id of sidebar occupies 3 cells.

Next, let’s consider the case of xs, that is, the page width →In the section with id of main, add col-xs-6 for class
→In the section with id of sidebar, add col-xs-6 for class

Now, adjust the page width to about 590 pixels.

It can be seen that at this time, as set before, the section with the id of main occupies 6 cells, and the sectioin with the id of sidebar occupies 6 cells.

However, when the page width is

Reference: WilderMinds

Bootstrap 3 beauty categories include:

The Beauty of Bootstrap 3 01-Download and introduce the page

The Beauty of Bootstrap 3 02-Grid introduction and application