The fifth chapter bootstrap grid system _javascript skills

Bootstrap, from Twitter, is currently the most popular front-end framework. Bootstrap is based on HTML, CSS, JAVASCRIPT, it is simple and flexible, making Web development faster.

Learning points:

1. Mobile Equipment Preferred
2. Layout container
3. Grid system

In this lesson, we mainly study Bootstrap grid system, provide a set of responsive, mobile device priority flow grid system.

A Mobile device Preferred

In the HTML5 project, we did the moving end of the project. It has a very important meta to set the screen and device width and whether to run user scaling, and scaling problems.

respectively: screen width and device consistency, initial scaling, maximum scaling, and no user scaling

Two Layout container

Bootstrap need to package a. Container container for the page content and grid system. Because of attributes such as padding, the two container classes cannot be nested with each other.

Fixed-width
<div class= "container" > ...
</div> 
//100% width
<div class= "Container-fluid" >
...
</div>

In a grid system, browsers automatically allocate up to 12 columns as the size of the screen increases or decreases. Create a page layout by combining a series of rows (row) with columns (column). The working principle is as follows:

1. Line (row) must be included in the. container (fixed width) or. Container-fluid (100% width) to give it an appropriate arrangement (aligment) and an inner complement (padding).

2. Create a set of columns (column) horizontally by row.

3. Your content should be placed in column, and only a direct child element of column (row) can be used.

4. A predefined class like. Row and. Col-xs-4, which 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.

5. Create an interval (gutter) between columns and columns by setting the Padding property for columns (column). By setting a negative value for the. Row element

The margin thus offsets the padding set for the. container element, and the padding is offset by columns (column) that are included in rows (row) indirectly.

6. Negative margin is the reason why the following example is out of focus. The contents of a grid column are lined up in one row.

7. The columns in a grid system represent the range of spans by specifying values ranging from 1 to 12. For example, three equal-width columns can be created using three. Col-xs-4.

8. If columns (column) that are contained in one line (row) are greater than 12, the elements of the extra columns (column) will be arranged in a separate line as a whole.

9. Grid classes apply to devices with screen widths greater than or equal to the cutoff point size, and to cover grid classes for small screen devices. Therefore, applying any. col-md-* grid class on the element applies to devices with screen widths greater than or equal to the cutoff point size, and to overlay the grid class for small screen devices. Therefore, applying any. col-lg-* does not exist on the element, but also affects the large screen device.

Create a response line <div class= "container" > <div class= "Row" > ... </div> </div>//Create a response line of up to 12 columns <div class= "Container" > <div class= "Row" > <div class= "col-md-1 a" >1</div> <div class= "Col-md-1 a" >2</div> <div class= "Col-md-1 a" >3</div> <div class= "Col-md-1 a" >4</div> <div Class= "Col-md-1 a" >5</div> <div class= "Col-md-1 a" >6</div> <div class= "Col-md-1 a" >7</ div> <div class= "Col-md-1 a" >8</div> <div class= "Col-md-1 a" >9</div> <div class= " Col-md-1 a ">10</div> <div class=" Col-md-1 a ">11</div> <div class=" Col-md-1 a ">12</div 
> </div> </div>//To display the obvious CSS. a {height:100px; Background-color: #eee; border:1px solid #ccc;} The total number of columns is 12, each column is assigned multiple columns <div class= "container" > <div class= "Row" > <div class= "col-md-4 a" >1-4</div> & Lt;div class= "Col-md-4 a" >5-8</div> <div class= "Col-md-4 A">9-12</div> </div> <div class=" Row "> <div class=" col-md-8 a ">1-8</div> <div class  = "Col-md-4 a" >9-12</div> </div> </div>

Grid parameter Table

As shown in the figure above, the outermost layer of the grid system distinguishes between four-width browsers: A <768px, a small screen (>=768px), a medium screen (>=992px), and a large screen (>=1200px). and the inner layer. The adaptive width of the container container is: Automatic, 750px, 970px, and 1170px. Automatically means that if you are a mobile screen, then a full exclusive line display.

All four screen categories are activated <div class= "container" > <div class= "Row" > <div class= "col-lg-3" col-md-4 col-sm-6 col-xs-12 A ">4</div> <div class=" col-lg-3 col-md-4 col-sm-6 col-xs-12 a ">4</div> <div class=" col-lg-3
Col-md-4 col-sm-6 col-xs-12 A ">4</div> <div class=" col-lg-3 col-md-4 col-sm-6 col-xs-12 a ">4</div> <div class= "col-lg-3 col-md-4 col-sm-6 col-xs-12 a" >4</div> <div class= "col-lg-3 col-md-4 col-sm-6 Col-xs-12 a ">4</div> <div class=" col-lg-3 col-md-4 col-sm-6 col-xs-12 a ">4</div> <div class=" Col-lg-3 col-md-4 col-sm-6 col-xs-12 a ">4</div> <div class=" col-lg-3 col-md-4 col-sm-6 col-xs-12 a ">4< /div> <div class= col-lg-3 col-md-4 col-sm-6 col-xs-12 a ">4</div> <div class=" Col-lg-3 col-md-4 Col-sm-6 col-xs-12 a ">4</div> <div class=" col-lg-3 col-md-4 col-sm-6 col-xs-12 a ">4</div> </div > </div>//Sometimes we can set the column offset, let the middle keep the gap <div class= "contAiner "> <div class=" Row "> <div class=" col-md-8 a ">8</div> <div class=" Col-md-3 col-md-offset-1 A ">3</div> </div> </div>//can also be nested, embedded is also 12 columns <div class=" container "> <div class=" Row "> &L T;div class= "col-md-9 a" > <div class= "col-md-8 a" >1-8</div> <div class= "col-md-4 a" >9-12</div > </div> <div class= "col-md-3 a" > 11-12 </div> </div> </div>//You can swap two columns for position, push to the left, Pul L Move right <div class= "container" > <div class= "Row" > <div class= "col-md-9 col-md-push-3 a" >9</div> & Lt;div class= "Col-md-3 col-md-pull-9 a" >3</div> </div> </div>

The above is the relevant information for the bootstrap grid system, I hope to help you!