Article 3 bootstrap grid basics and article 3 bootstrap

Article 3 bootstrap grid basics and article 3 bootstrap

Bootstrap provides a responsive, mobile device-first streaming grid system. With the increase in the screen or viewport size, the system will automatically be divided into up to 12 columns.

The grid system is similar to a table with rows and columns. It must be placed in a container with the type set to iner. It can be a div and the content is placed in the column, the grid in web design is used to layout the content so that the website can be easily browsed. The following is an example of using the bootstrap grid layout.

<Div class = "row">

<Div class = "col-sm-2"> col2 </div>

<Div class = "col-sm-10"> col10 </div>

</Div>

The display effect is as follows:

 

 

With the Class = "row" style to represent the row, with the class = "col-sm-2" style to represent the column, the system will be divided into 12 copies of the screen, the col-sm-2 indicates that the column across 2 copies, the col-sm-10 ratio indicates that the column spans 10 portions. The display effect is shown in. It indicates a row with two columns. The first column occupies two portions, and the second column occupies 10 portions.

Bootstrap is a responsive front-end framework. It is embodied in a grid system that corresponds to devices of different Display sizes and can display different display effects. As follows:

<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-Items4</Div> 

</div>

 

 

Col-md-8 indicates that the column occupies 8 copies under a medium screen such as a normal desktop and notebook. Col-xs-12 indicates that the column occupies 12 copies on a small screen, such as a tablet. The code above indicates that there are eight copies in the first column, four copies in the second column, and 12 copies in the first column in the next row of the tablet, the second column occupies 6 copies. In this way, different effects are displayed on different display devices. You can adjust the browser size to simulate the two cases.

Shows how the Bootstrap grid system works on multiple screen devices.