The third article bootstrap grid basic _javascript skills

Bootstrap provides a set of responsive, mobile device-priority streaming grid systems that automatically divide the system into up to 12 columns as the screen or viewport (viewport) dimensions increase.

A grid system resembles a table, there are rows and columns, it must be placed in a container of type set to container, can be div, content placed in the column, Web page design grid for layout content, so that the site easy to browse, the following is a bootstrap grid layout example.

<div>
<div>col2</div>
<div>col10</div>
</div>

The display effect is as follows:

Add the class= "row" style to represent the row, add the class= "col-sm-2" style to represent the column, the system divides the entire screen into 12, Col-sm-2 said that the column across 2, col-sm-10 than that the column across 10. The displayed effect is shown in the previous illustration, representing a row of two columns, with the first column accounting for 2, and the second column being 10.

Bootstrap is a responsive front-end framework, reflected in the grid system is corresponding to the different display size of the device, can show different display effects. As shown below:

<div class= "Row" >   
<div class= "col-xs-12 col-md-8" >.col-xs-12 .col-md-8</div> 
<div class= "Col-xs-6 col-md-4" >.col-xs-6 col-md-4</div> 
</div>

Col-md-8 represents 8 copies of the column in a medium screen such as a regular desktop and notebook. Col-xs-12 says it accounts for 12 of small screens, such as Tablet PCs. The code above represents a row of two columns in the normal desktop and notebook, with the first column accounting for 8, the second column being 4, the next row in the tablet computer, the first column being 12, and the second column being 6. This approach is achieved by displaying different effects on different display devices. You can simulate both of these situations by resizing the browser.

The following figure shows how the bootstrap grid system works on a variety of screen devices

The above is a small set to introduce the third bootstrap grid basis of all the narrative, I hope to help everyone, 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!