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: