Bootstrap Introductory Books (iii) _javascript Techniques for grid systems

Implementation principle

Grid system is the core of bootstrap, it is because of the existence of grid system, Bootstrap can have such a powerful response layout scheme. The following is a commentary in the Official document:

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. It includes easy-to-use predefined classe, and powerful mixin for generating more semantic layouts.

Let's take a look at this passage and find that the most important part of this is mobile device priority, so what is the priority of mobile devices?

Bootstrap's underlying CSS code defaults to the start of a small screen device (such as a mobile device, tablet), and then uses media queries to extend to components and grids on large-screen devices such as laptops, desktops.

Has the following strategies:

Content: Decide what is most important.
Layout: first design smaller width.
Progressive enhancement: Adding elements as the screen size increases.

Working principle

The data row (. Row) must be included in the container. Container (fixed width) or. Container-fluid (100% width) to give it the appropriate arrangement (aligment) and inner padding (padding). Such as:

<div class= "container" ><!--horizontally centered, with margin on both sides, a minimum screen full of parent elements--> <div class=
"Row" ></div>
</div>
<!--or-->
<div class= "Container-fluid" ><!--By default always fills the entire parent element-->
< Div class= "Row" ></div>
</div>

You can add columns (column) in a data row (. Row), but the sum of the columns cannot exceed the total number of columns that are equally divided (the excess is displayed when the extra part is exceeded), by default 12. (Custom settings can be made using less or sass) such as:

<div class= "Container" >
<div class= "Row" >
<div class= "col-md-2" ></div>
< Div class= "col-md-6" ></div>
<div class= "col-md-4" ></div>

The specific content on the page should be placed in columns (column), and only columns (column) can serve as data rows. The immediate child element of the row container.

Predefined grid classes, such as. Row and. Col-xs-4, can be used to quickly create a grid layout.

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.

Precautions:

As shown in the annotation section above, the. container (fixed width) is a fixed-width layout. By looking at the source, when viewing the. Container class, we will find that its width is responsive: (as follows)

. container {
padding-right:15px;
padding-left:15px;
Margin-right:auto;margin-left:auto;
}
@media (min-width:768px) {
. container {
width:750px
}}
}
@media (min-width:992px) {
. container {
width:970px
}}
}
/*........*/

As you can see from the CSS code above, the class defaults to the width of the entire parent element (the smallest screen), but it has a different width under the large screen, and the left and right margin will increase or decrease (horizontally centered) under different widths.

The. Container-fluid class is 100% width, just like the default for. Container. (same as CSS code)

Besides

From the source we can also find that, in addition to the left and right margin, you can also see that the class is filled with the left (padding).

If we continue to look at the source code, we can find data rows. Each column in row also has a left-right padding (padding), as follows:

. col-md-1, col-lg-12/*......*/{
position:relative;
min-height:1px;
padding-right:15px;
padding-left:15px;
}

See here, we should all can think of what kind of situation appears! We are in the first and last column because of the existence of double padding, actually the isolation of the content has been to 30px. How do we need to eliminate the impact?

The bootstrap is passed. The outer margin (margin) on rows is negative margin-left: -15px;margin-right: -15px; That represents the row offset of the first column and the last column to offset the left and the right margin of the last column in the first column.

Basic usage

Bootstrap3.x uses four kinds of grid options to form a grid system, these four options on the official web site described below, many people do not understand, here with you to explain the difference between the four grid options, in fact, the difference is only one is suitable for different sizes of screen equipment. We look at the class prefix of this item, we let the prefix named these four kinds of grid options, they are Col-xs, COL-SM, COL-MD, COL-LG, we know English, LG is the abbreviation of large, MD is the abbreviation of Mid, SM is the abbreviation of small, XS is the abbreviation of * * *. This name reflects the different screen widths that these classes adapt to. Here we introduce the characteristics of these classes separately.

The following table allows you to see how Bootstrap's grid system works on a variety of screen devices.

Through the source can be found, as follows:

. col-md-1/*......*/{Float:left;} /* All columns are left-floating by default *
/. col-md-1 {
width:8.33333333%
}
. col-md-2 {
width:16.66666667%;
}
/*.....*/
. col-md-12 {
width:100%;
}

It is also easy to see from these CSS code that the width of each column in the bootstrap, and why the number of columns is set to more than 12 o'clock, will be wrapped in more than half.

The background color and border effects of each column in all of the following examples are controlled by the following CSS code:

[Class *= col-] {
background-color: #eee;
border:1px solid #ccc;
}

Basis

So let's take a look at some examples, and the following are the most basic uses:

<div class= "Container" >
<div class= "Row" >
<div class= "col-md-6" >.col-md-6</div>
<div class= "col-md-6" >.col-md-6</div>
</div>
<div class= "Row" >
<div class= "col-md-4" >.col-md-4</div>
<div class= "col-md-4" >.col-md-4</div>
<div class= "col-md-4" >.col-md-4</div>
</div>
<div class= "Row" >
<div class= " Col-md-2 ">.col-md-2</div>
<div class=" col-md-6 ">.col-md-6</div>
<div class=" Col-md-4 ">.col-md-4</div>
</div>
</div>

The effect of the implementation is as follows:

Bootstrap as a responsive framework of course not only that simple function, we continue to go down!

Column offset

In some cases, we don't want adjacent columns to close together, and if you want to do it without additional margin or other means, the bootstrap built-in provides us with column offsets (offset), a series of classes to help us achieve the desired effect.

To add only the class name col-md-offset-* (the asterisk represents the number of column combinations to offset) on the column element that needs to be offset, the column with that class name is shifted to the right.

These classes actually add the left margin (margin) to the current element by using the * selector. For example, adding the. Col-md-offset-6 class to the column element offsets the width of the. col-md-6 element to the right of 6 columns (column).

Now our code is like this:

<div class= "Container" >
<div class= "Row" >
<div class= "col-md-2" >col-md-8 </div>
<div class= "col-md-3 col-md-offset-2" >col-md-4 col-md-offset-2</div> <div class=
"col-md-4 Col-md-offset-1 ">col-md-4 col-md-offset-1</div>
</div>
<p><br></p>
<div class= "Row" >
<div class= "col-md-4" >col-md-4 </div>
<div class= "Col-md-3" Col-md-offset-4 ">col-md-3 col-md-offset-4</div> <div class=" col-md-4 col-md-offset-4 "
> Col-md-4 col-md-offset-4</div>
</div>
</div>

The results can be achieved as follows:

From the implementation of the effect we can find something, notice the second paragraph of the display effect and code, from where we can find: use col-md-offset-* to offset the column to the right, to ensure that the total number of columns and offset columns not more than 12, otherwise the column will be displayed.

The reason is also very simple: because this class is for the column set Margin-left, and we are in the above source display, we can see that each column has a Float:left attribute, from these places we are not difficult to find in (offset + column) Over 12 o'clock, why does the line wrap show

Column sorting

Column sort is to change the direction of the column (order), is to change the left and right float, and set the floating distance. In the grid system of the bootstrap framework, by adding the class name col-md-push-* and col-md-pull-* (as above, the asterisk represents the number of column combinations moved).

Bootstrap the positioning effect only by setting left and right. By looking at the source, we can see that the basic settings are relatively simple, as follows:

. col-md-pull-12 {
right:100%
}
/*...*/
. col-md-push-1 {
left:8.33333333%
}
. col-md-push-0 {
left:auto;
}

or continue to see our actual effect! The code is as follows

<div class= "Container" >
<div class= "Row" >
<div class= "Col-md-4 col-md-push-8". Col-md-4 col-md-push-8 </div>
<div class= "col-md-8 col-md-pull-4" >.col-md-8 col-md-pull-4 </div >
</div>
<div class= "Row" >
<div class= "col-md-4" >.col-md-4 default </div>
<div class= "col-md-8" >.col-md-8 default </div>
</div>
</div>

We can see that the position of the column has changed.

Column nesting

The grid system of the bootstrap framework also supports nesting of columns. You can add one or more rows (. row) containers to one column, and then insert columns in the row container (using the columns as described earlier). However, the row container (. Row) in the column container, with a width of 100%, is the width of the current outer column. (In fact, there are multiple columns nested in the column, there are actual effects shown)

Note: The number of columns (. rows) contained in the nested row (. Row) cannot be more than 12 (in fact, you are not required to occupy 12 columns of-_-).

We now have this need:

Create a 8-4-column grid. (Note: Take the medium-screen MD (970px) as an example).
Inserts a 8-4-column grid into the first 8-column grid.
Inserts a 9-3-column grid into the second 4-column grid.

The effect is as follows:

How to achieve it?

<div class= "Container" >
<div class= "Row" >
<div class= "col-md-8" >
i have nested a grid
inside <div class= "Row" >
<div class= "col-md-8" >col-md-8</div>
<div class= "Col-md-4" > col-md-4</div>
</div>
</div>
<div class= "col-md-4" >
i have nested a grid
inside <div class= "Row" >
<div class= "col-md-9" >col-md-9</div>
<div class= "col-md-3" > col-md-3</div>
</div>
</div>
</div>
</div>

Is it simple? Of course, in order to fully achieve the same as the effect of the display, we also need to add some CSS:

[Class *= col-] [Class *= col-] {
background-color: #f36;
border:1px dashed #fff;
Color: #fff;
}

The above is a small set of bootstrap to share the introduction of the book (three) grid system, I hope to help!