BootStrap getting started tutorial (3) responsive principle, bootstrap getting started tutorial

BootStrap getting started tutorial (3) responsive principle, bootstrap getting started tutorial

Related reading:

BootStrap getting started tutorial (1) visual layout

BootStrap getting started tutorial (2) fixed built-in styles

Bootstrap Grid System)

The responsive mesh system is automatically divided into up to 12 columns as the screen or viewport size increases.

Working Principle

· Rows must be placed in. container class for proper alignment and padding ).

· Use rows to create a horizontal group of columns.

· The content should be placed in the column, and only the column can be a direct sub-element of the row.

· Predefined grid classes such as. row and. col-xs-4 can be used to quickly create grid la S. The LESS mixing class can be used for more semantic la S.

· A column uses the padding (padding) to create a gap between the column content. This padding is used to take a negative value from the margin (margin) on. rows, indicating the row offset between the first column and the last column.

· The grid system is created by specifying the twelve available columns you want to span. For example, to create three equal columns, three. col-xs-4 are used.

Media Query

/* Super small device (mobile phone, less than 768px) * // * No media queries by default in Bootstrap * // * Small Device (tablet, starting from 768px) */@ media (min-width: @ screen-sm-min ){...} /* medium-sized device (from a desktop computer, 992px) */@ media (min-width: @ screen-md-min ){...} /* large devices (large desktop computers, starting with pixel) */@ media (min-width: @ screen-lg-min ){...}

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 1: horizontal Stack

The Code is as follows:

<! DOCTYPE html> 
Effect:


Ensure that the total number of units is 12 to ensure a harmonious display effect. If it exceeds 12, it will be serialized. What if the number of units in a single row exceeds 12:


As shown in, if the number of units in a single row exceeds 12, the padding is lost.

Example 2: medium and large devices

Sleep late, too early, too many dreams.

For medium devices, the value is 50%/50%, and for large devices, the value is 33%/66%:

<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> 
In this case, the display for medium-sized devices is 50%/50%:

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


Similarly, mobile devices can perform 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>
The source code and effect are omitted.

Responsive column resetting

The position of the grid cannot be determined when the device is small.

The solution is to add a responsive block (the description may not be accurate) and use. clearfix class and responsive utility:

<div class="container"><div class="row" ><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.</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 doeiusmod tempor incididunt ut labore et dolore magna aliqua. Utenim ad minim veniam, quis nostrud exercitation ullamco laborisnisi ut aliquip ex ea commodo consequat.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt 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 ullamcolaboris 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 doeiusmod tempor incididunt ut labore et dolore magna aliqua. Utenim ad minim</p></div></div></div>
Explain the following sentence:

<div class="clearfix visible-xs"></div>
The responsive utility is currently applicable to block and table switching. You can see the following two tables.

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 3: responsive Utility

Source code:
<! DOCTYPE html> 
The effect is as follows:


Large devices:

Other devices.

Offset Column

The. col-xs = * class does not support offset. You can use an empty cell to achieve this effect.

You can use the. col-md-offset-* class to add * columns to the left margin of a column, where * ranges from 1 to 11.

<div class="container">  
Effect:


Nested column

Add a new. row for nesting, and add a group of. col-md-* columns to the nested. row. The number of columns in this group cannot exceed 12.

<Div class = "container"> 
Effect:


Column sorting

One thing is like positioning .. Col-md-push-* is equivalent to left;. col-md-pull-* is similar to right. * Ranges from 1 to 11. The labels are higher in the following layers.

<Div class = "container"> 
Effect:

Reference: http://www.runoob.com/bootstrap/bootstrap-grid-system.html
The above section describes the responsive principle of the BootStrap getting started tutorial (3). I hope it will be helpful to you. If you have any questions, please leave a message for me, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!