[5] Learn about the preset Bootstrap raster System

Before the opening, let's talk about a class, because we will use

You can use. container to wrap the content on the page to align the center. Width is set for iner to match the grid system.

Some people may not know what the "different media query threshold range" is? Here, I will define a set of ranges (the range has several intervals). If you are using the browser width value (that is, the visible area) in a range, you can use this interval to browse the Web page. (I don't know if I can help you understand this. Khan ~□￣ |)

========================================================== ========================================================== ========================

[1] Next we will introduce the raster System (excerpt from the official Internet cafe)

Bootstrap has a built-in responsive, mobile device-first streaming raster system. With the increase in the size of screen devices or viewports, the system will be automatically divided.

1. It contains an easy-to-use pre-defined classe (this is what we want to talk about. I don't know if it's an official Chinese Mistake. Why is there an e behind the class );

2. There is also a powerful mixin used to generate a more semantic layout (this is not what we want to say, it is equivalent to customizing the grid layout we want, the default preset classe is enough for us to use, if you want to continue, you can study it on your own ).

========================================================== ========================================================== ========================

[2] The raster system is used to create a page layout by combining a series of rows and columns. Your content can be placed in the created layout.

The following describes how:

1. "row" must be included in. iner to grant it an appropriate arrangement (aligment) and inner padding (padding ).
2. Use "row" to create a group of "columns" in the horizontal direction )".
3. Your content should be placed in "column", and only "column" can be used as a direct sub-element of row.
4. You can use some predefined raster class (. row and. col-xs-4) to quickly create a raster layout. The mixin defined in Bootstrap source code can also be used to create semantic la S.
5. Set the padding to create the interval (gutter) between "columns ). Then, the effect of padding is offset by setting a negative margin for the first and last values.
6. the columns in the raster system specify a value ranging from 1 to 12 to indicate the cross range. For example, three columns of equal width can be created using three. col-xs-4.

:

For pages that need to occupy the entire browser viewport, You need to wrap the content area in a container element and assign the padding: 0 15px; to offset it. the margin set by row: 0-15px; (if this is not the case, your page will be left and right more than 15 Px in the viewport, and a horizontal scroll bar will appear at the bottom of the page ).

Ps. to be honest, I have not understood a few of the above statements, but I have probably understood them. I can only understand them through the exercises below, of course, this grid reminds me of using Excel tables.

========================================================== ========================================================== ========================

After excerpting so many official websites, we have to say "different media query threshold ranges" at the beginning, that is, let's take a look!

[3] The raster option is how the Bootstrap raster system works on multiple screen devices. Next, let's take a look at a table on the Chinese official website.

From the table, we can see that there are four intervals corresponding to your own device. We assume that the visible area is x.

The grid class works on devices whose screen width is greater than or equal to the threshold value, and overwrites the class set for small screen devices. Therefore, applying any (starting with) class to any element will not only apply to a medium screen size, but also to a large screen device (if not set (starting with) class ).