Bootstrap layout Way Detailed _javascript skill

Bootstrap 3 is a priority for mobile devices, in the sense that Bootstrap code starts with a small screen device, such as a mobile device, a tablet computer, and then expands to components and grids on large-screen devices such as laptops and desktops.

One, Mobile Device Priority policy
1, content: Decide what is the most important.
2, layout
Design a smaller width first.
The basic CSS is the mobile device first, the media query is for the tablet computer, desktop computer.
3. Progressive enhancement
Add elements as the screen size increases.

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

Second, the Bootstrap grid systems (grid system) Working principle
The grid system creates a page layout through a series of rows and columns that contain content. The following is a list of how the Bootstrap grid system works:

1. The line must be placed within the. Container class to obtain the appropriate alignment (alignment) and internal margin (padding).
2. Use rows to create horizontal groups of columns.
3, the content should be placed in the column, and only the column can be a direct child element of the row.
4, 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.
5, the column through the internal margin (padding) to create the gap between the contents of the column. The inner margin is negative by the outer margin (margin) on the. Rows, representing the row offsets for the 6th, column, and last column.
7. 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.

Third, media inquiries
A media query is a very chic "conditional CSS rule." It only applies to some CSS that is based on some specified conditions. If those conditions are met, the appropriate style is applied.

Media queries in Bootstrap allow you to move, display, and hide content based on the viewport size. The following media queries are used in the less file to create the critical threshold thresholds for Bootstrap grid systems.

/* 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) {...}

We sometimes include max-width in the media query code to limit the effect of CSS to a smaller screen size.

@media (max-width: @screen-xs-max) {...}
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {...}
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {...}
@media (min-width: @screen-lg-min) {...}

The media query has two parts, first a device specification, and then a size rule. In the previous case, the following rules were set:

Let's look at the following line of code:
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {...}
For all devices with Min-width: @screen-sm-min, if the screen width is less than @screen-sm-max, some processing is done.

Four, grid options
The following table summarizes how the bootstrap grid system works across multiple devices:

Five, basic grid structure
The following is the basic structure of the Bootstrap grid:

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

Here is a specific code example:

<div class= "Container" >  

Six, offset column
Offset is a useful feature for a more professional layout. They can be used to free up more space for the columns. For example, the. col-xs=* class does not support offsets, but they can be implemented simply by using an empty cell.

To use the offset on a large-screen monitor, use the. col-md-offset-* class. These classes add a column's left margin (margin) to the * column, where the * range is from 1 to 11.

In the example below, we have <div class= "col-md-6". </div>, we'll use the. Col-md-offset-3 class to center this div.

<div class= "Container" > <div class= "Row" > <div class= "col-xs-6 col-md-offset-3" style= "background -color: #dedef8; " > <p> Test Offset column---here to the right offset 3 columns </p> </div> </div> <div class= "Row" > <di V class= "col-xs-1" style= "background: #f00" >1</div> <div class= "col-xs-1" style= "background: #b2b0b0" > 2</div> <div class= "col-xs-1 style=" background: #ff6a00 ">3</div> <div class=" col-xs-1 "style=" Background: #ffd800 ">4</div> <div class=" col-xs-1 "style=" background: #4cff00 ">5</div> <div class= "col-xs-1" style= "background: #0ff" >6</div> <div class= "col-xs-1" style= "background: #0094ff" >7 </div> <div class= "col-xs-1" style= "background: #b200ff" >8</div> <div class= "col-xs-1" style= "b Ackground: #ff00dc ">9</div> <div class=" col-xs-1 "style=" background: #ff006e ">10</div> <div Class= "Col-xS-1 "style=" background: #ac5050 ">11</div> <div class=" col-xs-1 "style=" background: #54bd4f ">12</
 Div> </div> </div>

Display effect:

Seven, nested columns
To nest the default grid in the content, add a new. Row and add a set of. col-md-* columns in an existing. col-md-* column. The nested rows should contain a set of columns, which cannot exceed 12 (in fact, you have to fill 12 columns without asking).

In the following example, the layout has two columns, and the second column is divided into two rows and four boxes.

<div class= "Container" >
  <div class= "Row" >
   <div class= "col-xs-4" style= "background: #b2b0b0" > First column </div>
   <div class= "col-xs-8" style= "background: #dedef8" > The second column--nested four div
    <div class= "Row" >
     <div class= "col-xs-6" style= "background: #0094ff" > I am content one <br/><br/><br/></ div>
     <div class= "col-xs-6" style= "background: #b200ff" > I am content two </div>
    </div>
    < Div class= "Row" >
     <div class= "col-xs-6" style= "background: #ff00dc" > I am content three <br/><br/><br/ ></div>
     <div class= "col-xs-6" style= "background: #ff006e" > I am Content four </div>
    </div>
   </div>
  </div>
 </div>

Display effect:

Viii. column Sorting
Another perfect feature of the Bootstrap grid system is that you can easily write columns in one order and then display columns in another order.

You can easily change the order of the built-in grid columns with the. col-md-push-* and. col-md-pull-* classes, where the * range is from 1 to 11.

In the example below, we have two columns of layout, the left column is very narrow, as the sidebar. We will use the. col-md-push-* and. col-md-pull-* classes to interchange the order of the two columns.

<div class= "Container" >
  <div class= "Row" >
   <div class= "col-xs-4 col-md-push-8" style= " Background: #ff00dc "> Left </div>
   <div class=" col-xs-8 col-md-pull-4 "style=" background: #ff006e "> Right </div>
  </div>
 </div>

Display effect:

If you want to further study, you can click here to learn, and then attach 3 wonderful topics:

Bootstrap Learning Course

Bootstrap Practical Course

Bootstrap Plugin Usage Tutorial

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.