Bootstrap Introductory Tutorial (iii) The response principle _javascript skills

Related reading:

Bootstrap Introductory Tutorial (i) Visual layout

Bootstrap Getting Started Tutorial (ii) fixed built-in style

Bootstrap grid (grid system)

With the increase of the size of the screen or viewport (viewport), the response grid system is automatically divided into up to 12 columns.

Working principle

· Rows must be placed within the. Container class to get the appropriate alignment (alignment) and inner margin (padding).

· Use rows to create horizontal groups of columns.

· Content should be placed in columns, and only columns can be direct child elements of rows.

· Predefined grid classes, such as. Row and. Col-xs-4, can be used to quickly create a grid layout. Less mixed classes can be used for more semantic layouts.

· Columns create gaps between column contents through an internal margin (padding). The inner margin is taken by the outer margin (margin) on the. Rows to represent the row offsets for the first and last columns.

· The grid system is created by specifying the 12 available columns that you want across. For example, to create three equal columns, use three. Col-xs-4.

Media inquiries

/* Ultra small equipment (mobile phone, less than 768px) * *
Bootstrap By default No media inquiries * * *
* Small equipment (Tablet PC, 768px)/
@media (min-width: @screen-sm-m In) {...}
/* Medium equipment (desktop computer, 992px) 
/@media (min-width: @screen-md-min) {...}
* * Large equipment (large desktop computer, 1200px)
/@media (min-width: @screen-lg-min) {...}

The basic structure of the grid

<div class= "Container" >
<div class= "Row" >
<div class= "col-*-*" ></div>
< Div class= "col-*-*" ></div> 
</div>
<div class= "Row" >...</div>
</div >

Example one: horizontal stacking

The code is as follows:

<! DOCTYPE html>  

Effect:

Ensure that the total number of units is 12 to ensure that the display effect is more harmonious. More than 12 on the serial. If the number of cells in a single row exceeds 12:

As shown in the figure above, the number of cells in a single row exceeds 12 and the inner margin is lost.

Example two: Medium and large equipment

It's hopeless to sleep late and dream too early.

Medium-sized devices are 50%/50%, and large devices are 33%/66%, so you can write this:

<div class= "col-md-6 col-lg-4" >....</div> <div class= "col-md-6
col-lg-8" >....</div>

The source code is as follows:

<! DOCTYPE html>  

If so, the medium device display is 50%/50%:

The display of large equipment is 33%/66%:

Similarly, mobile devices can have similar settings:

<div class= "col-sm-3 col-md-6 col-lg-4" >....</div>
<div class= "col-sm-9 col-md-6 col-lg-8" > ....</div>

Source and effect slightly.

Response-Column Reset

You cannot determine where the grid appears when you are a small device.

The workaround is to add a response block (the description may not be accurate), using the. Clearfix class and the response utility:

<div class= "Container" > <div class= "Row" > <div class= "col-xs-6 col-sm-3" style= "Box-shadow:inset 1px-1 PX 1px #444, inset-1px 1px 1px #444; " > <p>lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> <div class= "col-xs-6 Col -sm-3 "style=" Box-shadow:inset 1px-1px 1px #444, inset-1px 1px 1px #444; " > <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolo Re Magna Aliqua.
UT enim ad minim veniam, quis nostrud exercitation, Ullamco laboris ut nisi ex ea aliquip commodo.
</p> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor ut.
</p> </div> <div class= "Clearfix visible-xs" ></div> <div class= "col-xs-6 col-sm-3" style= " Box-shadow:inset 1px-1px 1px #444, inset-1px 1px 1px #444; " > <p>ut enim ad minim veniam, quis nostrud exercitation Ullamco laboris nisi Ut aliquip ex EA commodo consequat. </p> </div> <div class= "col-xs-6 col-sm-3 style=" Box-shadow:inset 1px-1px 1px #444, inset-1px 1px 1px # 444; " > <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolo Re Magna Aliqua. Ut enim ad minim </p> </div> </div> </div>

Explain the middle sentence:

<div class= "Clearfix visible-xs" ></div>

The response utility is currently available for block and table switching. Look at the two forms below to find out.

The basic structure of the grid

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

Example Three: Response utility

Source:

<! DOCTYPE html>  

The effect is as follows:

Large equipment:

Other equipment slightly.

Offset column

The. Col-xs=* class does not support offsets, which can be achieved by using an empty cell.

Use the. col-md-offset-* class to increase the left margin of a column by the * column, where the * range is from 1 to 11.

<div class= "Container" >
   
 

Effect:

Nested columns

Nesting requires adding a new. Row, and then adding a set of. col-md-* columns in this nested. Row. The number of columns in this group cannot exceed 12.

<div class= "Container" >  

Effect:

Column sorting

A bit like positioning. col-md-push-* is equivalent to left;.col-md-pull-* similar to right. The range of the * is from 1 to 11. The label is higher at the back level.

<div class= "Container" >
   
 

Effect:

Reference: http://www.runoob.com/bootstrap/bootstrap-grid-system.html

The above is a small set to introduce the bootstrap introductory course (iii) of the response principle, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!