Bootstrap learning: Bootstrap Grid System

The first three sections are actually a copy and paste of the W3C cainiao diary. The next step is to start learning.

Bootstrap Grid System

Let's introduce it first. If you don't understand it, you can skip it. It's also taken from the W3C cainiao diary.

What is grid )?

From Wikipedia:

650) This. width = 650; "src =" http://www.w3cschool.cc/images/quote.png "alt =" quote.png "/> in graphic design, A grid is a structure (usually two-dimensional) consisting of a series of intersecting straight lines (vertical and horizontal) used to organize content ). It is widely used in print design layout and content structure. In web design, it is a very effective method for quickly creating consistent la S and effectively using HTML and CSS.

To put it simply, the grid in the web design is used to organize content, so that the website can be easily browsed and the load on the user end is reduced.

What is a bootstrap grid system )?

Description of the Grid System in the bootstrap official document:

650) This. width = 650; "src =" http://www.w3cschool.cc/images/quote.png "alt =" quote.png "/> Bootstrap contains a responsive, mobile device-first, Unfixed grid system, you can expand to 12 columns as the size of the device or view increases. It contains predefined classes for simple layout options and powerful mixing classes for generating more semantic la S.

Let's take a look at the above statements. Bootstrap 3 takes precedence over mobile devices. In this sense, bootstrap code starts from small screen devices (such as mobile devices and tablets, it then expands to components and grids on large screen devices (such as Laptops and Desktops.

Mobile device Priority Policy

• Content

  • Determine what is most important.

• Layout

  • Smaller width is preferred.

  • The basic CSS address is preferred for mobile devices, and the media query address is for tablets and desktops.

• Progressive enhancement

  • Add elements as the screen size increases.

To put it bluntly, layout !!!

Next, let's talk about this grid system.

Grid options

The following shows how the bootstrap raster system works on a variety of different mobile devices.

The subscript summarizes how the bootstrap grid system works across multiple devices:

650) This. width = 650; "src =" http://www.5icool.org/uploadfile/2013/1205/20131205095234329.png "alt =" \ "Height =" 385 "width =" 720 "/>

As shown in the preceding figure, bootstrap sets different styles for screens of different sizes (including mobile phones, tablets, and PCs, in this way, developers can have more choices during development. If you use multiple style classes on an element, the element selects the most appropriate style class (matching the most ideal) based on different sizes. For example, two style classes are used for an element:. col-MD-And. col-LG. As shown above

The first case: size "= pixel PX; select. col-LG.

In the second case, the "size" = 992px and the "size" = "pixel PX" are selected. col-MD.

In the third case, if the size is 992px, neither of these two style classes will apply to the element.

(This can be seen by narrowing down the window in the browser)

Basic Grid Structure

The use of the four style classes in the raster option is based on the. Row class, And the. Row class is usually carried out in. container.

<div class="">   <div class="">      <div class=""></div>      <div class="col-*-*"></div>         </div>   <div class="row">...</div></div><div class="container">....

Is to use the appropriate style class in the appropriate container.

Use a single group.col-md-*Raster class, you can create a basic raster system, which is stacked together on mobile phones and tablet devices (ultra-small screen to small screen), on the desktop (medium) the devices on the screen are arranged horizontally. Place a column (Col-*) on any.row.

<Div class = "Container"> <Div class = "Page-header"> 
View the stack and horizontal arrangement by controlling the browser width
650) This. width = 650; "src =" http://www.5icool.org/uploadfile/2013/1205/20131205095234396.png "alt =" \ "Height =" 565 "width =" 759 "/>
Obviously, this is the stack effect, that is, when the browser width is relatively small.
650) This. width = 650; "src =" http://www.5icool.org/uploadfile/2013/1205/20131205095234672.png "alt =" \ "/>
Now it is horizontal arrangement. Adjust the width of the browser to a slight width. You can also use the other three classes to test the effect.


Mobile devices and desktops
From the above case, we can find that it is used when the screen is small. when col-MD-* is displayed in the stacked state, developers must sometimes want to horizontally display small screen pages. Then, our. col-xs-* (Style Class smaller than 768px screen) will come in handy.
<Div class = "Page-header"> 
The Code shows that for the DIV in the first two. Row style classes, we have set two style classes on each element.
650) This. width = 650; "src =" http://www.5icool.org/uploadfile/2013/1205/20131205095234341.png "alt =" \ "Height =" 151 "width =" 893 "/>
This is the effect displayed on a slightly larger screen. The two styles of each element are selected in different sizes. In this case, the selected style class will be. col-MD -*.
Therefore:
The first line: Ratio of 8 to 4.
Row 2: divide the three four equal parts into three equal parts.
The third line: 6 and 6 are large. Because only this style is available, they are equally divided into two parts.
650) This. width = 650; "src =" http://www.5icool.org/uploadfile/2013/1205/20131205095234760.png "alt =" \ "/>
Now, when the page screen is smaller than a certain degree, you can re-select the style class for each element. Currently, col-xs-* is selected for the first two. rows -*.
Therefore:
The first line: the two elements are divided into 12 and 6, while the first line is 12, so the second element will wrap and occupy half of the six parts.
Row 2: 3 in 6 portions. A row contains 12 copies. Therefore, the third element will wrap the line, and then occupy 6 general positions.
Responsive column resets
Through the analysis of the above two cases, we can use these four raster classes to design a relatively complex page layout. However, in some cases, a column in a row is higher than other columns. Maybe you are still not quite clear about what I mean, but it doesn't matter. Let's discuss the case directly.
<Div class = "Page-header"> 
First, let's take a look at the page display on the big screen.
650) This. width = 650; "src =" http://www.5icool.org/uploadfile/2013/1205/20131205095234168.png "alt =" \ "/>
The height of the first element is indeed not the same. Then let's take a look at the small screen.
650) This. width = 650; "src =" http://www.5icool.org/uploadfile/2013/1205/20131205095244284.png "alt =" \ "/>
The arrangement is as follows, because the style classes of. col-xs-* are selected on the small screen, and they all occupy 6 copies. I don't know if this effect is what you want. Do you want to see these four elements in two rows and then two elements in each row on a small screen?
Next, we will slightly change the above Code, which is actually adding a line of code.
<Div class = "Page-header"> 
650) This. width = 650; "src =" http://www.5icool.org/uploadfile/2013/1205/20131205095244167.png "alt =" \ "/>
This effect is still achieved in two rows and two columns. Of course, you can also use a responsive tool, which will be described in detail later. Examples are not provided here.


Column offset
In fact, it is very simple to use a style class, through.col-md-offset-*You can offset the column to the right. These classes use*The selector adds the left-side margin of all columns. For example,.col-md-offset-4Set.col-md-4The width of the four columns is shifted to the right.
<Div class = "Page-header"> 
By reading the code above, you can imagine its layout.
650) This. width = 650; "src =" http://www.5icool.org/uploadfile/2013/1205/20131205095244231.png "alt =" \ "/>
Nested column
To use a built-in grid for content nesting, add a new one. row and a series. col-MD-* columns to existing. col-MD-* can be implemented in the column. The total number of columns in a nested column is 12.
<Div class = "Page-header"> 
Through the code above, we can find that a row is defined first, and then a. col-md-9 column is added to this row, which indicates that this element occupies nine columns.
Then, two different rows are added to the element with nine columns.
That is, the first row: the first row is divided into two parts, each of which occupies 6 columns, these 12 columns, however, its total width is the same as that of the nine columns outside it.
Second row: divide the second row into two parts. The first part occupies three columns, the second part occupies six columns, and the remaining three columns are not filled.
650) This. width = 650; "src =" http://www.5icool.org/uploadfile/2013/1205/20131205095244101.png "alt =" \ "Height =" 187 "width =" 820 "/>
Column sorting
The explanation of chinam.com is as follows:.col-md-push-*And.col-md-pull-*You can easily change the column order.
Through code implementation, we can see the effect. I still haven't fully understood this sentence.
<Div class = "Page-header"> 
We can see that I have defined three rows.
The first row is evenly divided into three parts, each of which occupies four columns. This line is mainly used to compare with the following two lines.
There is only one element in the second row that occupies two columns, and a style class of. col-md-push-4 is added to this element. (If the element that occupies two columns moves four columns to the right, it occupies the fifth and sixth columns .)
The third column is divided into two parts. The first part occupies seven columns, but it is empty. The second part occupies five columns, and an element is added. the Style Class of the col-md-pull-4, of course, this class should have the opposite effect as the class appended to the previous line. (The five columns of elements are moved to the left by four columns, which were originally from the eighth column, so now it starts from the fourth column .)
Now let's take a look at the results
650) This. width = 650; "src =" http://www.5icool.org/uploadfile/2013/1205/20131205095244540.png "alt =" \ "Height =" 140 "width =" 876 "/>
Summary
This article uses the simplest case to analyze the layout points involved in the case.


Bootstrap learning: Bootstrap Grid System