bootstrap why 12 raster

Grid system introduction

Bootstrap provides a responsive, mobile-first fluid grid The system, as the screen or viewport size increases, will automatically be divided into up to 12 columns. It contains easy-to-use predefined classes, as well as powerful mixins for generating more semantic layouts.

The grid system creates the layout of the page through a series of combinations of rows and columns. The set content can be placed in the created layout.

The implementation principle of the grid system

The implementation principle of the grid system is very simple, just by defining the size of the container and dividing it equally into 12 Then adjust the inner and outer margins, and finally combine it with media queries to create a powerful responsive grid system.

The main working principle of the grid system:

➣ A row of data (row) must be contained in .container (fixed width) or .container -fluid (100% width) to give it proper alignment and padding.

➣ Create a group of "columns" in the horizontal direction through "rows".

➣ Your specific content should be placed within "column", and only "column" can be a direct child element of row.

➣ There are a lot of built-in styles. You can use styles (i.e. predefined classes) such as .row and .col-xs-4 (four columns wide) to quickly create a grid layout. In the Bootstrap source code The defined mixin can also be used to create semantic layouts.

➣ By setting the padding attribute for "column", the gap between columns (gutter) is created. By setting the padding attribute for "column". The .row element sets a negative margin to offset the padding set for the .container element, which indirectly offsets the padding for the "column" contained in the "row".

➣ Columns in a raster system represent 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.

➣ If the "column" contained in a "row" is greater than 12, the elements where the extra "column" is located will be arranged as a whole in another row.

➣ Grid classes apply to devices with screen widths greater than or equal to the breakpoint size, and grid classes are overridden for small screen devices. Therefore, applying any .col-md-* raster classes on an element will apply with devices whose screen width is greater than or equal to the breakpoint size, and the grid class is overridden for small screen devices. Therefore, any .col-lg-* applied on an element does not exist and also affects large screen devices.

Grid system layout container

Bootstrap needs to wrap a .container container for page content and grid system. We provide two classes for this purpose. Note , due to attributes such as padding, these two container classes cannot be nested in each other.

.container class is used for containers with fixed width and supporting responsive layout

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

.container The -fluid class is used for containers with 100% width and occupying the entire viewport

<div class="container-fluid">
  ...
</div>

Using the grid system

The use of the grid system is actually Various combinations of columns. There are four features in basic usage, namely column combination, column offset, column nesting and column sorting. Since different screen sizes use different styles, we take the medium screen (md) as an example Introduction, the usage of other screens is similar.

1. Column combination

Column combination is to merge columns by changing the numbers, similar to colspan in the table. The implementation of column combination is simple and only involves two CSS properties: left float and percentage.

Note: When using the grid system, just remember that the total number of cells in each row is 12, and you can combine them freely according to the actual project.

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

Related recommendations: "bootstrap Getting Started Tutorial"

2. Column offset

Sometimes we don't want two adjacent columns to be next to each other. In this case, we can use the column offset function of the grid system to achieve this without having to define a margin value. For medium screens, you can use styles of the form .col-md-offset-* to offset columns to the right.

For example, .col-md-offset-2 means moving the element to the right by two column widths.

　　　 <!--列偏移-->
　　　　<div class="container">
            <div class="row">
                <div class="col-md-4">.col-md-4</div>
                <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
            </div>
            <div class="row">
                <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
                <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
            </div>
            <div class="row">
                <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
            </div>
　　　　</div>

3. Column nesting

栅格系统也支持列嵌套，即在一个列里再声明一个或多个行（row），但是要注意，内部所嵌套的 row 的宽度为 100% 时，就是当前外部列的宽度。被嵌套的行（row）所包含的列（column）的个数不能超过12。

        <!--列嵌套-->
        <div class="container">
            <div class="row">
                <div class="col-md-8">
                    Level 1：col-md-8
                    <!--在第一行里又添加一行-->
                    <div class="row">
                        <div class="col-md-6">Level 2：col-md-6</div>
                        <div class="col-md-6">Level 2：col-md-6</div>
                    </div>
                    <!--在第一行里又添加一行-->
                    <div class="row">
                        <div class="col-md-3"> Level 3：col-md-3 </div>
                        <div class="col-md-6"> Level 3：col-md-6 </div>
                    </div>
                </div>
                <div class="col-md-4">Level 1：col-md-4</div>
            </div>
        </div>

说明：可以看到，在第一个列(col-md-8)里面，嵌套了一个新行(row)，然后在新行里，又放置了两个等宽的(col-md-6)列，并且两个 col-md-6 加起来是12，但是总宽度和外面的 col-md-8 列的宽度一样，也就是说在 row 里的列宽度是按照百分比分配的。在任何一个嵌套列里，不管宽度是多少，都可以再进行 12 等分，并可以进一步组合。

4、列排序

列排序就是改变列的方向，也就是改变左右浮动，并设置浮动的距离。在栅格系统里，可以通过 .col-md-push-* 和 .col-md-pull-* 来实现这一目的。

　　　　　<!--列排序-->
        <div class="container">
            <div class="row">
            　　<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
            　　<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
        　　</div>
        </div>

说明：默认情况下，col-md-9 在左边，col-md-3 在右边，如果要互换位置，需要将 col-md-9 列向右移动三个列的距离，也就是推三个列的 offset，样式用 col-md-push-3；而 col-md-3 需要向左移动，也就是拉九个 offset，样式用 col-md-pull-9。

响应式栅格

我们都知道，Bootstrap 可以制作响应式页面。它能为不同屏幕尺寸提供不同栅格样式。在前面的例子中，我们一直都在使用中等屏幕(md)，既然是响应式页面，当然还应该包括超小屏幕(xs)、小型屏幕(sm)、大屏幕(lg)等。

Bootstrap 栅格参数

说明：通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

The above is the detailed content of bootstrap why 12 raster. For more information, please follow other related articles on the PHP Chinese website!