Bootstrap entry books (3) raster system, bootstrap raster

Bootstrap entry books (3) raster system, bootstrap raster

Implementation Principle

The grid system is the core of Bootstrap. It is precisely because of the existence of the grid system that Bootstrap can have such a powerful responsive layout solution. The following is an explanation in the official document:

Bootstrap has a built-in responsive, mobile device-first streaming raster system. With the increase in screen devices or viewports, the system will automatically be divided into up to 12 columns. It includes easy-to-use predefined classe and powerful mixin for generating a more semantic layout.

Let's take a look at this passage. We can find that the most important part is the priority of mobile devices. What is the priority of mobile devices?

Bootstrap's basic CSS code starts from a small screen device (such as a mobile device or tablet computer) by default, and then expands to a large screen device (such as a laptop or desktop computer) using media queries) and the grid.

There are the following policies:

Content: determines what is most important.
Layout: give priority to smaller width.
Progressive enhancement: adds elements as the screen size increases.

Working Principle

Data row (. row) must be included in the container. container (fixed width) or. container-fluid (100% width) to give it an appropriate arrangement (aligment) and inner padding (padding ). For example:

<Div class = "container"> <! -- Horizontally centered with margin on both sides. When the screen is minimal, it is filled with parent elements --> <div class = "row"> </div> <! -- Or --> <div class = "container-fluid"> <! -- The entire parent element is always filled by default --> <div class = "row"> </div>

You can add columns in the Data row (. row), but the sum of the columns cannot exceed the total number of columns that are evenly divided (when it is exceeded, the extra columns will be displayed in a line break). The default value is 12. (Use Less or Sass for custom settings) for example:

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

The specific content on the page should be placed in the column, and only the column can be used as a direct sub-element of the Data row. row container.

Predefined grid classes such as. row and. col-xs-4 can be used to quickly create grid la S.

In the raster system, a column is a cross-range of 1 to 12. For example, three columns of equal width can be created using three. col-xs-4.

Note:

As shown in the comments above, the. container (fixed width) is a fixed-width layout. By viewing the source code, we will find that the width of the. iner class is responsive: (as follows)

.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;}}/*........*/

As shown in the preceding css code, this class defaults to the width of the entire parent element (minimum screen), but it has different widths on the large screen, in addition, the left and right margin of different widths will increase or decrease at the same time (horizontally centered ).

The. container-fluid class is the same as that of. container by default, and is 100% in width. (Same CSS code)

In addition

From the source code, we can also find that in addition to left and right margin, we can also see that this class exists with left and right padding.

If we continue to view the source code, we can find that each column in the Data row. row also has a left and right padding (padding), as shown below:

.col-md-1, .col-lg-12 /*......*/{position: relative;min-height: 1px;padding-right: 15px;padding-left: 15px;}

Here, we can all think of what will happen! Because of the existence of double padding, the first and last columns have actually isolated the content by 30px. How do we eliminate the impact?

Bootstrap is through. the margin (margin) on rows is negative margin-left:-15px; margin-right:-15px;, indicating the row offset between the first column and the last column, used to offset the left inner distance of the first column and the right inner distance of the last column.

Basic usage

Bootstrap3.x uses four raster options to form a raster system. These four options are described on the official website. For example, many people do not understand them, here we will explain the differences between the four grid options. In fact, there is only one difference that is suitable for screen devices of different sizes. Let's take a look at the class prefix item. Let's just name the four raster options in the past. They are col-xs, col-sm, col-md, col-lg, lg is the abbreviation of large, md is the abbreviation of mid, sm is the abbreviation of small, and xs is the abbreviation. In this way, the screen width of these classes is different. The following describes the features of these classes.

The following table shows how the Bootstrap raster system works on multiple screen devices.

 

The source code can be found as follows:

. Col-md-1 /*...... */{float: left;}/* all columns are left by default */. col-md-1 {width: 8.33333333% ;}. col-md-2 {width: 16.66666667% ;}/*..... */. col-md-12 {width: 100% ;}

From these CSS codes, it is not difficult to find out the width of each column in Bootstrap, and why the excess part is displayed in a line break when the number of columns is set to more than 12.

In all the examples below, the background color and border effects of each column are controlled by the following CSS code:

[class *= col-]{background-color: #eee;border: 1px solid #ccc;}

Basic

Let's take a look at some examples. The following method is the most basic usage:

<div class="container"><div class="row"><div class="col-md-6">.col-md-6</div><div class="col-md-6">.col-md-6</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-2">.col-md-2</div><div class="col-md-6">.col-md-6</div><div class="col-md-4">.col-md-4</div></div></div>

The implementation result is as follows:

 

As a responsive framework, Bootstrap certainly does not have such simple functions. Let's continue!

Column offset

In some cases, we do not want adjacent columns to join together. If you want to achieve this without using additional margin or other means, the built-in Bootstrap provides us with column offset, which helps us achieve the desired effect.

You only need to add the class name col-md-offset-* to the column element to be offset (asterisks represent the number of column combinations to be offset ), the column with this class name will be offset to the right.

These classes actually add the left margin (margin) for the current element by using the * selector ). For example, adding a. col-md-offset-6 class to a column element offsets the. col-md-6 element to the right of the width of 6 columns.

Our code is as follows:

<div class="container"><div class="row"><div class="col-md-2 ">col-md-8 </div><div class="col-md-3 col-md-offset-2">col-md-4 col-md-offset-2</div><div class="col-md-4 col-md-offset-1">col-md-4 col-md-offset-1</div></div><p><br></p><div class="row"><div class="col-md-4 ">col-md-4 </div><div class="col-md-3 col-md-offset-4">col-md-3 col-md-offset-4</div><div class="col-md-4 col-md-offset-4">col-md-4 col-md-offset-4</div></div></div>

You can achieve the following results:

 

From the implementation effect, we can find something. Pay attention to the display effect and code in the second paragraph. From there we can find: when you use col-md-offset-* to offset the column to the right, make sure that the total number of columns and offset columns does not exceed 12. Otherwise, the column is displayed as a broken row.

In fact, the reason is also very simple: because this class sets margin-left for the column, and we can also see that each column has the float: left attribute in the source code Display above, from these points, it is not difficult to find out why the line feed is displayed when the (Offset + column width) exceeds 12.

Column sorting

Column sorting actually changes the column direction (sequence), that is, changes the Left and Right floating, and sets the floating distance. In the mesh system of the Bootstrap framework, the class name col-md-push-* and col-md-pull-* are added (same as above, asterisk (*) indicates the number of columns to be moved ).

Bootstrap only sets left and right to achieve the positioning effect. By viewing the source code, we can see that the basic settings are relatively simple, as shown below:

.col-md-pull-12 {right: 100%;}/*...*/.col-md-push-1 {left: 8.33333333%;}.col-md-push-0 {left: auto;}

Let's continue to look at our actual results! The Code is as follows:

<Div class = "container"> <div class = "row"> <div class = "col-md-4 col-md-push-8">. col-md-4 col-md-push-8 </div> <div class = "col-md-8 col-md-pull-4">. col-md-8 col-md-pull-4 </div> <div class = "row"> <div class = "col-md-4">. col-md-4 default </div> <div class = "col-md-8">. col-md-8 default </div>

 

We can see that the column position has changed.

Column nesting

The grid system of the Bootstrap framework also supports column nesting. You can add one or more rows (. row) containers in a column, and insert columns in this row container (Use columns as described earlier ). However, when the row container (. row) in the column container is 100% in width, It is the width of the current external column. (In fact, multiple columns are nested in the column, which will be displayed in the following code)

Note: The number of columns contained in the nested row (. row) cannot exceed 12 (in fact, it is not required that you have to fill 12 columns -_-).

We have the following requirement:

Create a grid with 8 to 4 columns. (Note: The md (970px) is used as an example ).
Insert 8-4 grid columns into the first eight-column grid.
Insert a 9-3 grid in the second 4-column grid.

The effect is as follows:

 

How can this problem be achieved?

<Div class = "container"> <div class = "row"> <div class = "col-md-8"> I nested a grid inside <div class = "row"> <div class = "row"> div class = "col-md-8"> col-md-8 </div> <div class = "col-md-4"> col-md-4 </div> <div class = "col-md-4"> inside me is nested with a grid <div class = "row"> <div class = "col-md-9"> col-md-9 </div> <div class = "col-md-3"> col-md-3 </ div> </div>

Is it easy? Of course, to fully implement the same display, we also need to add some CSS:

[class *= col-] [class *= col-] {background-color: #f36;border:1px dashed #fff;color: #fff;}

The above is the Bootstrap getting started book (3) raster system shared by xiaobian. I hope it will help you!

Articles you may be interested in:

• Every day, Bootstrap is a simple entry
• Navigation bar required by Bootstrap every day
• Introduction to Bootstrap (zero) Bootstrap
• Bootstrap getting started book (I) typographical
• Bootstrap getting started book (4) menus, buttons and navigation
• Bootstrap entry books (5) navigation bar and paging navigation