On the principle of grid system of bootstrap3.0

This article mainly introduces the principle of bootstrap3.0 grid system, has a certain reference value, now share to everyone, the need for friends can refer to

The bootstrap incorporates a responsive, mobile-first streaming grid system that is automatically divided into up to 12 columns as the screen device or viewport (viewport) size increases. I'm here to put the grid system in bootstrap called layout

Grid system (Layout)

The bootstrap incorporates a responsive, mobile-first streaming grid system that is automatically divided into up to 12 columns as the screen device or viewport (viewport) size increases.

I'm here to put the grid system in bootstrap called the layout. It is to create a page layout with a series of rows and columns (column), and then your content can be placed in the layout you created. Here's a brief introduction to how the bootstrap grid system works:

The row must be included in the. Container to give it the appropriate arrangement (aligment) and inner complement (padding). Create a set of columns (cpumn) horizontally using rows (row). Your content should be placed in columns (Cpumn), and only columns (cpumn) can act as direct child elements of rows. Similar to predefined grid classes like. Row and. Cp-xs-4 These predefined raster classes can be used to quickly create a raster layout. The mixin defined in the bootstrap source code can also be used to create a semantically formatted layout. Create the interval between columns (cpumn) by setting padding (gutter). The effect of padding is then offset by setting negative values for the first and last margin . A column in a raster system represents a range that is spanned by specifying a value of 1 to 12. For example, three equal-width columns can be created using three .cp-xs-4 .

DW6 Encoding Implementation

Okay, write down the amount of code below. First, let's take a look at the editor I used, and use more tools when learning html+css in school.

Then create a new HTML document, select the type HTML5

Once created, save as in the same directory as the previous section in the JS, CSS folder.

Layout.html is the file I just created. Bootstrap.html is also the first HTML page created in the previous section.

You can now copy all the code in bootstrap.html to the layout.html page.

Then add the following code under the body tag

These labels should all be able to see, the most basic of the simplest.

After adding the layout.html page all the code is as follows

<! DOCTYPE html>
Of course the effect is very simple, I still put on, can be compared.


Optimization One: The page effect can be found full screen, we can use the Bootstrap style class to center the above content.

<p class= "Container" > ... Previously added in the body tag under the code </p>
The effect is as follows


You can see that the container class sets the width and lets the content appear in the middle of the page.

Optimization Two: Three regions are displayed in the same row, and the average divided into three columns.

First, add a container for three zones, you can use P, and add a class for P <p class= "row";.

Then we add a container p for each small area, and add a class for P <p class= "cp-xs-4" >

The simple code is implemented as follows

<p class= "Container" >
The effect is as follows


In a row, and then into three columns. Then combine the 6 principles of the grid system above. Do you understand a little, anyway, I understand a lot. A more complex Grid layout page can be created in the same way. You only need to add classes for the appropriate grid layout above the container used by the layout. For example, if the content occupies 6 meshes, add a cp-xs-6 class, Occupy four meshes, add a cp-xs-4 class, and then use the container with the row class around the same row.

Summarize

This section focuses on the layout (raster system) of the study, with a simple example to understand how it works.

The classes used are:

1..container: .container Center alignment with content on the package page. The container is set to match the raster system in different media queries or value ranges max-width .

2..cp-xs-4: This class is divided into three parts through "-", the third part of the number as a generic, its range is 1 to 12. It is possible to divide an area into 12 columns, which is used in conjunction with the row class.

In fact, this layout is much like the table layout TR line and TD column in HTML.

The temporary understanding of these, the code directly copy paste can see the effect, of course, first of all to the pre-CSS, js file preparation.

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!