Detailed explanation of Bootstrap grid system_javascript skills-JS Tutorial-php.cn

Detailed explanation of Bootstrap grid system_javascript skills

WBOY

Release： 2016-05-16 15:03:57

Original

1550 people have browsed it

The grid system in the bootstrap framework divides the container into 12 equal parts. When using it, you can recompile the LESS/SASS source code according to the actual situation to modify the value of 12. How the grid system of the bootstrap framework works:

1. The data row (.row) must be contained in the container (.container) so that it can be given appropriate alignment and padding

<div class="container">
<div class="row"></div>
</div>

Copy after login

2. Columns (.column) can be added to rows (.row), but the sum of the number of columns cannot exceed the total number of equally divided columns (such as: 12)

<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-8"></div>
</div>
</div>

Copy after login

3. The specific content should be placed within the column container (.column), and only the column (.column) can be used as a direct child element of the row container (.row)

4. Create spacing between columns by setting padding, and then offset the effect of padding by setting negative margins for the first column and the last stack.

With responsive effects in bootstrap grid system, it comes with four types of browsers, (extra small screen, small screen, medium screen and large screen), and its breakpoints are 768px, 992px, 1220px

Container (.container) has different widths for different browser resolutions: automatic, 760px, 970px, 1170px;

.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
@media (min-width: 768px) {
.container {
width: 750px;
}
@media (min-width: 992px) {
.container {
width: 970px;
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}

Copy after login

Row container (.row) divides the row of the container into 12 equal parts, that is, columns. Each column has padding-left:15px and padding-right:15px; this also causes the padding-left of the first column and the padding-right of the last column to occupy 30px of the middle width

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}

Copy after login

The row container (.row) defines margin-left and margin-right values of -15px, which are used to offset the left padding of the first column and the right padding of the last column, so that the first and last columns are in line with the container (.container) There is no space between them

.row {
margin-right: -15px;
margin-left: -15px;
}

Copy after login

Basic usage

Since the bootstrap framework uses different grid styles for different screen sizes, the following takes the medium screen (970px) as an example.

1. Column combination

Column combination is to change the number to combine columns (the total number of columns cannot exceed 12), which is somewhat similar to the colspan attribute of the table; the column combination method only involves two characteristics: floating in the width percentage

<div class="container">
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-8">col-md-8</div>
</div>
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
</div>
<div class="row">
<div class="col-md-3">col-md-3</div>
<div class="col-md-6">col-md-6</div>
<div class="col-md-3">col-md-3</div>
</div>
</div>

Copy after login

The effect is as follows:

Make sure all columns float left

.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
float: left;
}

Copy after login

Define the width of each column combination

.col-md-12 {
width: 100%;
}
.col-md-11 {
width: 91.66666667%;
}
.col-md-10 {
width: 83.33333333%;
}
.col-md-9 {
width: 75%;
}
.col-md-8 {
width: 66.66666667%;
}
.col-md-7 {
width: 58.33333333%;
}
.col-md-6 {
width: 50%;
}
.col-md-5 {
width: 41.66666667%;
}
.col-md-4 {
width: 33.33333333%;
}
.col-md-3 {
width: 25%;
}
.col-md-2 {
width: 16.66666667%;
}
.col-md-1 {
width: 8.33333333%;
}

Copy after login

Column Offset

Sometimes, we don’t want two adjacent columns to be close together, but we don’t want to use margin or other technical means. This can be achieved by using column offset (offset). To use column offset, just add the class name .col-md-offset-* (the asterisk represents the number of column combinations to be offset) on the column element, and the column with this class name will be offset, such as: in the column element Add .col-md-offset-4 to indicate that the column is offset to the right by the width of 4 columns

<div class="container">
<div class="row">
<div class="col-md-4">1111</div>
<div class="col-md-4 col-md-offset-2">111</div>
<div class="col-md-2">333</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-4">列偏移</div>
<div class="col-md-2">col-md-2</div>
<div class="col-md-2">col-md-2</div>
</div>
</div>

Copy after login

The effect is as follows:

Implementation principle:

Using one-twelfth of margin-left, there are as many margin-lefts as there are offsets

.col-md-offset-12 {
margin-left: 100%;
}
.col-md-offset-11 {
margin-left: 91.66666667%;
}
.col-md-offset-10 {
margin-left: 83.33333333%;
}
.col-md-offset-9 {
margin-left: 75%;
}
.col-md-offset-8 {
margin-left: 66.66666667%;
}
.col-md-offset-7 {
margin-left: 58.33333333%;
}
.col-md-offset-6 {
margin-left: 50%;
}
.col-md-offset-5 {
margin-left: 41.66666667%;
}
.col-md-offset-4 {
margin-left: 33.33333333%;
}
.col-md-offset-3 {
margin-left: 25%;
}
.col-md-offset-2 {
margin-left: 16.66666667%;
}
.col-md-offset-1 {
margin-left: 8.33333333%;
}
.col-md-offset-0 {
margin-left: 0;
}

Copy after login

It should be noted that when using col-md-offset-* to right-offset a column, make sure that the total number of columns and offset columns does not exceed 12, otherwise the columns will be displayed with broken lines

Column sort

Column sorting is to change the direction of the column and set the floating distance. In the bootstrap grid system it is done by adding the class name. col-md-push-* and col-md-pull-*

<div class="container">
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-8">col-md-8</div>
</div>
</div>

Copy after login

The effect is as follows:

col-md-4 is on the left and col-md-8 is on the right. If you want to swap positions, you need to move col-md-4 to the right by 8 columns, that is, add the class name.col-md -push-8; At the same time, you need to move col-md-8 4 columns to the left, that is, add the class name.col-md-pull-4

Bootstrap only achieves positioning effects by setting left and right.

.col-md-pull-12 {
right: 100%;
}
.col-md-pull-11 {
right: 91.66666667%;
}
.col-md-pull-10 {
right: 83.33333333%;
}
.col-md-pull-9 {
right: 75%;
}
.col-md-pull-8 {
right: 66.66666667%;
}
.col-md-pull-7 {
right: 58.33333333%;
}
.col-md-pull-6 {
right: 50%;
}
.col-md-pull-5 {
right: 41.66666667%;
}
.col-md-pull-4 {
right: 33.33333333%;
}
.col-md-pull-3 {
right: 25%;
}
.col-md-pull-2 {
right: 16.66666667%;
}
.col-md-pull-1 {
right: 8.33333333%;
}
.col-md-pull-0 {
right: 0;
}
.col-md-push-12 {
left: 100%;
}
.col-md-push-11 {
left: 91.66666667%;
}
.col-md-push-10 {
left: 83.33333333%;
}
.col-md-push-9 {
left: 75%;
}
.col-md-push-8 {
left: 66.66666667%;
}
.col-md-push-7 {
left: 58.33333333%;
}
.col-md-push-6 {
left: 50%;
}
.col-md-push-5 {
left: 41.66666667%;
}
.col-md-push-4 {
left: 33.33333333%;
}
.col-md-push-3 {
left: 25%;
}
.col-md-push-2 {
left: 16.66666667%;
}
.col-md-push-1 {
left: 8.33333333%;
}
.col-md-push-0 {
left: 0;
}

Copy after login

Column nesting

Column nesting can add or make a row (row) container in a column, and then insert columns in this row container. When the width of the row container (row) in the column container is 100%, it is the current Width of outer column

<div class="container">
<div class="row">
<div class="col-md-8">

Copy after login

我在里面嵌套了一个网格

<div class="row">
<div class="col-md-6">col-md-6</div>
<div class="col-md-6">col-md-6</div>
</div>
</div>
<div class="col-md-4">col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-8">

Copy after login

我在里面嵌套了一个网格

<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
</div>
</div>
</div>
</div>

Copy after login