As a front-end plug-in that supports responsive layout, Bootstrap does play an important role. Whether you browse the web on your phone, tablet or PC, you can achieve good results. All of this is brought to us by bootstrap!
Today I will mainly talk about the layout of the page. This is the most basic thing. When we design a site, we should design a global and unified standard page for it. We call this kind of page layout pages, and what is reflected on the page is the layout elements, which is of course indispensable in bootstrap.
Bootstrap's layout is a raster system, that is, it consists of rows and columns. When used, it needs to wrap a .container container for the page content and the raster system.
A.container class is used for containers that are fixed-width and support responsive layouts.
<div>...</div> The .container-fluid class is used for containers with 100% width, occupying all viewports. <div>...</div>
In bootstrap, rows and columns are represented by row and col, and there are up to 12 column units in a row. Col-md-1 represents the width of one unit, and col-md-7 represents the width of seven units. They are added together to be up to 12 units.
<div><div>.col-md-1</div><div>.col-md-1</div><div>.col-md-1</div><div>.col-md-1</div><div>.col-md-1</div><div>.col-md-1</div><div>.col-md-1</div><div>.col-md-1</div><div>.col-md-1</div><div>.col-md-1</div><div>.col-md-1</div><div>.col-md-1</div>< div>.col-md-1</div><div>.col-md-1</div><div>.col-md-1</div></div><div><div>.col-md-8</div><div>.col-md-4</div></div><div><div>.col-md-4</div></div><div><div>.col-md-4</div><div>.col-md-4</div><div>.col-md-4</div></div>
The second and third lines show similar effects
Three nested columns, there can also be columns in the column . We need to change md to sm in this nesting
<div><div>Level 1: .col-sm-9<div><div>Level 2: .col-xs-8 .col-sm-6</div><div>Level 2: .col-xs-4 .col-sm-6</div></div></div>
The effect is similar to this
The above is the basic knowledge of Bootstrap page layout introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!