Home > Article > Web Front-end > Bootstrap grid system_html/css_WEB-ITnose
Bootstrap grid system_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:43:471339browse
In the process of learning the front-end, the previous layout was adjusted through position or margin in css. I have recently learned several layout methods.
These layout methods include Bootstrap grid system, Holy Grail layout, and negative margin layout.
Today we will talk about the Bootstrap grid system.
Bootstrap grid system:
Bootstrap has a built-in responsive, mobile-first fluid grid system. As the screen device or viewport size increases, the system It will be automatically divided into up to 12 columns. It contains easy-to-use predefined classes and powerful mixins for generating more semantic layouts.
Introduction: The grid system is used to create a page layout through a series of rows and columns. Your content can be placed into the built layout
. The following introduces the working principle of the following Bootstrap grid system:
1. "Row" must be included in the .container in order to give it appropriate alignment and padding.
2. Use "row" to create a group of "columns" in the horizontal direction.
3. Your content should be placed within "column", and only "column" can be a direct child element of row.
4 .Predefined grid classes like .row and .col-xs-4 can be used to quickly create grid layouts. The mixins defined in the Bootstrap source code can also be used to create semantic layouts.
5. Create a gap (gutter) between "columns" by setting padding. Then offset the effect of padding by setting a negative value for the first and last margins.
6. Columns in a grid system are represented by the range they span by specifying a value from 1 to 12. For example, three equal-width columns can be created using three .col-xs-4. Apply these principles to your code by studying cases:
Grid options:
Take a closer look at how Bootstrap's grid system works on a variety of screen devices. .
The grid class works on devices with a screen width greater than or equal to the threshold, and will override the class set for small screen devices. Therefore, applying any .col-md-class to any element will not only apply to medium-sized screens, but also to large-screen devices (if .col-lg-class is not set)
<.>
The following is a simple layout made with Bootstrap:
1 <body> 2 <div class="container"> 3 <div class="row r1"> 4 顶部内容 5 </div> 6 <div class="row r2"> 7 <div class="col-xs-5 col-xs-offset-4 left"> 8 左边内容 左边内容 左边内容 左边内容 左边内容 左边内容 左边内容 左边内容 左边内容 左边内容 左边内容 左边内容 左边内容 左边内容 左边内容 左边内容 左边内容 左边内容 左边内容 左边内容 左边内容 9 左边内容 左边内容 左边内容 左边内容 左边内容 左边内容 左边内容 左边内容10 11 </div>12 <div class="col-xs-3 right">13 右边内容14 </div>15 </div>16 <div class="row r3">17 底部内容18 </div>19 </div>20 </body>As above , one row is divided into 12 blocks, and col-xs-5 occupies 5 blocks. It can be concluded that if you want to get 3 equal-width columns, you can use three .col-xs-4 to create them. 🎜>
Column offset:
The above layout can also use column offset to adjust the position
Initial position :
Columns can be offset to the right using .col-xs-offset-* These classes increase all columns to the left of the column by using the * selector. Margin. For example, .col-xs-offset-4 moves .col-xs-5 to the right by 4 columns. If you move this div, the previous one will not be affected. 🎜>
The rendering is as follows:
- Nested columns
The code is as follows:
The rendering is as follows:
1 <div class="col-xs-4 right"> 2 右边内容 3 <div class="row r2_1"> 4 <div class="col-xs-5 left2"> 5 右边的左部分 6 </div> 7 <div class="col-xs-7 right2"> 8 右边的右部分 9 </div>10 </div>11 </div>Column sorting
1. You can also use .col-xs-push-4 to move to the right, but only this div will be moved, and the rest will not be affected.
Code: fab1fbd16615068dc3532f1a3198ebfb
Rendering:
Move the right part to the left as follows:
fab1fbd16615068dc3532f1a3198ebfb
dce136e0eafb63497c5281766c8c435b
Rendering:
Move to the left with .col-xs-pull- 4. But only move this div, the rest will not be affected.
Code: 0c2bcbd3ec2c606e9cdfb05d1d47602b
The rendering is as follows: