Bootstrap grid system_html/css_WEB-ITnose-HTML Tutorial-php.cn

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>

Copy after login

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

In order to use the built-in grid to nest the content, add a new .row and a This can be achieved by adding the series .col-md-* column to the existing .col-md-* column. The sum of the columns contained in the nested row should equal 12.

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>

Copy after login

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:

Rendering:

Move the right part to the left as follows:

Rendering:

Move to the left with .col-xs-pull- 4. But only move this div, the rest will not be affected.

Code:

The rendering is as follows:

That’s it for the bootstrap grid system. The next article will summarize the Holy Grail layout.

Related labels：

Bootstrap栅格系统

source：php.cn

Previous article：HTML, it turns out they_html/css_WEB-ITnose Next article：One reason why css cannot be loaded in ie_html/css_WEB-ITnose

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn