bootstrap grid usage

Usage of bootstrap grid: 1. Use container to wrap div; 2. Set rows inside div; 3. Set columns to quickly build this frame; 4. Change the width by dragging the browser. Can.

#The operating environment of this article: Windows7 system, bootstrap3, Dell G3 computer.

How to use bootstrap's grid?

Use container to wrap the div, and then set the rows inside. After setting the rows and then setting the columns, you can quickly build this frame.

<div class="container">
            <h1>Hello, world!</h1>
         
            <div class="row">
                <div class="col-md-1"  style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    <p>
                    第一列占1个md
                    </p>
                </div>
         
                <div class="col-md-2" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    <p>
                        这个是第二列 占 2 个md
                    </p>
                </div>
                <div class="col-md-9" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                        <p>最后一个md占9个列
                        </p>
                </div>
            </div>
        </div>

Ensure that the total number is 12, by dragging and dropping Changes can be seen by changing the width of the browser.

In addition, the screen size will also be affected. At this time, the class of the column should also use the larger col. You can see the change by dragging the browser.

<div class="container">
            <div class="row">
                <div class="col-md-6 col-lg-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    中型占6，大型占4
                </div>
                <div class="col-md-6 col-lg-8" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    中型占6，大型占8
                </div>
            </div>
        </div>

The entire grid size allocation

.col-xs- 超小屏幕 手机 (<768px)
.col-sm- 小屏幕 平板 (≥768px)
.col-md- 中等屏幕 桌面显示器 (≥992px)
.col-lg- 大屏幕 大桌面显示器 (≥1200px)

Recommended: "bootstrap tutorial"

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