bootstrap -- learning flow layout

What is grid?

Grid translated into Chinese is a grid system, but it is still difficult to understand. It may be easier to understand that there are 12 grids in a row. Grid can divide a line of content into up to 12 grids, and some of these 12 grids can be merged as needed. Below is a schematic diagram. What's the benefit of doing this? The biggest advantage is the ease of layout.

 

 

For example, I now want to set three elements in each row. I want these three elements to occupy the same width on the page, that is, to divide the page into three equal parts. Then, we can use the Grid system to handle, three All elements can be set to span 4.

Basic usage of Grid:

Four levels:

The Grid system has four levels, which are as follows. The original intention of the design is for different screen sizes, which can be classified and displayed.

• xs (for phones)
• sm (for tablets)
• md (for desktops)
• lg (for larger desktops)

Tip: Each class scales up, so if you wish to set the same widths for xs and sm, you only need to specify xs.

Rules of use:

• .row Must be used in .container(fixed-width fixed-width) or  .container-fluid(full-screen full-width) wrapped content. (Combined with the code example below to understand)
• And elements should be placed in columns, and columns(ie: col-sm-4) should be a .rowdirect subset directly. (Combined with the code example below to understand)
• The total number of columns cannot exceed 12, otherwise it will display confusion.
• In addition to xs, the other three levels, to a fixed screen width node, will automatically wrap. This needs attention, of course, this can also improve readability on mobile devices.
• 请注意，如果只设置了比较小的层级的的参数的话，自动套用到上一级别的属性，比如设置了 xs 的 column的，在 sm、md 和 lg 都没有设置的情况下，会自动套用 xs 的分栏 。如果sm、md 和 lg 另行单独设置了，会按照设置的参数来显示。

示例代码：

<div class="container"> # 需要在 container 或 container-fluid 下使用 <div class="row"> #用 row 来定义一行 <div class="col-*-*"></div> #col-*-*需要直接紧跟在 row 下方。 </div> <div class="row"> #用 row 来定义另外一行 <div class="col-*-*"></div> <div class="col-*-*"></div> <div class="col-*-*"></div> </div> <div class="row"> ... </div> </div> 

So, to create the layout you want, create a container (). Next, create a row (). Then, add the desired number of columns (tags with appropriate .col-*-* classes). Note that numbers in .col-*-* should always add up to 12 for each row.

Grid 的微进阶用法：

1.同一个元素可以设定多个层级

比如下面这行代码，如果是在小屏幕下，就是 3/9 比例分栏显示；如果是在中等屏幕下，就是 6/6 比例分栏显示；如果是在大屏幕下，就是 4/8 比例分栏显示。

这时候你要问了，col-xs-*没设置，如果缩小到一定程度，会怎么显示，答案是缩小到 xs 的宽度后，每个元素都是占 1 整行。这样做的好处就是可以针对不同的屏幕显示最优的效果。

同理，如果只设定了col-lg-*，那么当屏幕缩小到中屏幕宽度及以下的时候，都是每个元素占1整行。

<div class="col-sm-3 col-md-6 col-lg-4">....</div> <div class="col-sm-9 col-md-6 col-lg-8">....</div> 

请看下面三张图：

• 大屏幕 4/8 比例分栏

 

 

• 中屏幕 6/6 比例分栏

 

 

• 小屏幕 3/9 比例分栏

 

 

• 最小屏幕，1个元素1行：

 

 

2.row 内部还可以嵌套row（Nestable）

下面的例子是整个屏幕分2栏，而且第1栏下面还分了2个子栏。注意在栏目下的子栏里面也是12等分的。所以，第二个row里面的两等分用是2个col-sm-6。

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

在对应屏幕的显示效果如下：

 

 

如果屏幕宽度小于 sm 对应的宽度，则会显示成这样：先显示第1栏，再显示第1栏下面的子栏，最后再显示第2栏。

 

 

我们再来尝试改下代码，把子栏都改为col-xs-6，这时候屏幕宽度小于 sm 对应宽度会显示如下图。

 

 

总结下，嵌套 row这个方法要慎重使用，因为需要思考几层才能知道最终的显示结果。

3、当元素高度不一致的时候，防止发生不期望的换行（Clear Floats）

方法：添加.clearfix这个属性。请参考下面的代码导致的不同变化:

<div class="row"> <div class="col-xs-6 col-sm-3"> Column 1 <br> Resize the browser window to see the effect. </div> <div class="col-xs-6 col-sm-3">Column 2</div> <!-- Add clearfix for only the required viewport --> <div class="clearfix visible-xs"></div> #这里增加了 clearfix 来确保Column 3和Column 4的正确换行。 <div class="col-xs-6 col-sm-3">Column 3</div> <div class="col-xs-6 col-sm-3">Column 4</div> </div> 

显示效果如下：

sm 尺寸下，分成4栏：

 

 

xs 尺寸下，分成2栏，加了 clearfix 这个属性后，Column 3和Column 4都在Column 1的下方重新起一行，这是我们一般预期达到的效果。

 

 

假如我们不添加clearfix这个属性，xs 尺寸下会出现这样的情况，也就是说Column 3和Column 4看到Column 1后面还有空间，就直接缩到那里了。这一般不是我们期望的方式，所以要注意。注意，这些都是因为元素的高度不一致，如果元素高度一致，那么就不需要这样的设定了。

 

 

4.缩进

.col-*-offset-* 的作用相当于缩进。就是往后退几格的意思。我们来看个例子：

  <div class="row" style=""> <div class="col-sm-5 " style="">.col-sm-5</div> <div class="col-sm-5 col-sm-offset-2 " style="">.col-sm-5 .col-sm-offset-2 </div> </div> 

在 sm 宽度及以上的时候，由于设置了第2栏往后缩进2格，所以会显示如下：2栏分别占5格，栏目之间的空白为2格。

 

 

sm 宽度以下的时候，会显示成这样，也就是说退格不起作用了。

 

 

5.push and pull 可以重新调整元素的位置(Change Column Ordering)

转载自https://www.cnblogs.com/mafeng/p/7102897.html