Bootstrap provides a responsive, mobile-first streaming grid system. As the screen or viewport size increases, 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 type set to container. It can be a div and the content is placed in the column. The grid in the web design is used to layout the content, making the website easy to browse. The following is an example of using bootstrap grid layout.
<div><div>col2</div><div>col10</div></div>
The display effect is as follows:
The style of Class="row" is added to represent the row, and the style of class="col-sm-2" is added to represent the column. The system divides the entire screen into 12 parts, col-sm-2 means that the column spans 2 parts, and the col-sm-10 ratio means that the column spans 10 parts. The displayed effect will be as shown in the figure above, indicating that there are two columns in one row, the first column accounts for 2 parts and the second column accounts for 10 parts.
bootstrap is a responsive front-end framework, which is reflected in the grid system, which is a device corresponding to different display sizes, and can present different display effects. As shown below:
<div> <div>.col-xs-12 .col-md-8</div> <div>.col-xs-6 .col-md-e4</div> </div>
Col-md-8 means that this list accounts for 8 parts under medium-sized screens such as ordinary desktops and laptops. Col-xs-12 means that this column accounts for 12 copies under small screens such as tablets. The above code shows that there are two columns in the row and the next row of ordinary desktop and laptops. The first column accounts for 8 parts, the second column accounts for 4 parts, and the next row and the next column accounts for 2 columns, the first column accounts for 12 parts, and the second column accounts for 6 parts. In this way, different effects are achieved on different display devices. You can simulate these two situations by resizing the browser.
The following figure shows how Bootstrap's grid system works on multiple screen devices
The above is the complete description of the third Bootstrap grid basics introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support to Wulin.com website!