The principle of Bootstrap3.0 grid system

By the simple introduction of the previous blog, the General Bootstrap has a preliminary understanding. Because I also just want to go through the bootstrap official website to carry on the simple study, oneself can get a not too rub of the page can be. So if you are a novice may come to see, to you have a little help, master please drift.

"Learning the first round" is also simply introduced how to download files, and to download the file, there is no real access to the front-end design learning. I also saw the vast number of Bo friends of Bootstrap3.0 also have a lot of interest, have been used before the Daniel, there is the same as I was going to learn the pots friends, side dishes. As for the reply to a lot of is: hope to have a series, of course, I also very much hope that they can be a good plan to list a series, and then follow this outline to proceed. However, my ability is limited, so I have to follow my preferences to study.

Statement: Writing ability is really incompetent, also hope that you reader forgive. If there is a mistake, please notify in time, I will be in the shortest possible time to correct, of course, more people would like to study together.

Grid system (Layout)

Bootstrap has a set of responsive, mobile-priority streaming grid systems, which are automatically divided into up to 12 columns as the size of the screen device or viewport (viewport) increases.

I'm here to call the grid system in bootstrap a layout. It is creating a page layout with a series of rows and columns (column), and then your content can be put into the layout you created. Here is a brief introduction to the workings of the bootstrap grid system:

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

DW6 Code Implementation

Okay, the following begins to write the amount of code. First of all, look at the editor I used, and use more tools when I was learning html+css in school.

Then create a new HTML document, select the type HTML5

After you create it, save it in the same directory as the JS and CSS folders that are explained in the previous section.

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 and simple.

After adding layout.html page all the code below

Of course the effect is also very simple, I still put the screenshot on, you can compare.

Optimization One: You can find the page effect of the above picture full screen, we can through the bootstrap style class to the above content center.

......... Code previously added under the body tag

The effect is as follows

You can see that the container class has the width set, and that the content is displayed in the middle of the page.

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

First add a container for three areas, you can use Div, and add a class to the DIV

.

Then we add a container div for each small area, and add a class for the Div

The simple code is implemented as follows

The effect is as follows

It's really lined up and divided into three columns. Then combine the 6 principles of the grid system above. Do you understand a little, anyway I understand a lot. You can create a more complex grid layout page in the same way. You only need to add the appropriate grid layout class to the container that the layout uses. For example, if the content takes up 6 grids, add a col-xs-6 class, occupy four grids, add a col-xs-4 class, and then use a container with a row class around the same row.

Summarize

This section focuses on the layout (raster system), using simple examples to understand how it works.

The Used classes are:

1..container: Container The content on the page to achieve center alignment. A max-width is set for container in different media queries or value ranges to match the grid system.

2..col-xs-4: This class is divided into three parts by "-", the third part of the number as a generic, its range is 1 to 12. Is that you can divide an area into 12 columns, which is used in conjunction with the row class.

In fact, this layout is much like the HTML table layout tr row and TD column Bar.

Temporary understanding on these, the code directly copy and paste can see the effect, of course, first of all to the prior CSS, JS file preparation.