Bootstrap 4教程-Bootstrap 4 Grid System - 书目录

Bootstrap 4教程-Bootstrap 4 Grid System

网格系统使您能够使用行和列创建高级布局。Bootstrap网格系统最多可以有12列,您可以指定这些列如何针对不同的视口大小进行缩放。这是一个Bootstrap网格的例子:

<!-- Styles (so that we can see the grid) -->
<style>
.bs-example div[class^="col"] {
border: 1px solid white;
background: #f5f5f5;
text-align: center;
padding-top: 8px;
padding-bottom: 8px;
}
</style>

<div class="bs-example">
<!-- Bootstrap Grid -->
<div class="row">
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
</div>
<div class="row">
<div class="col-sm-2">.col-sm-2</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-7">.col-sm-7</div>
</div>
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
<div class="row">
<div class="col-sm-5">.col-sm-5</div>
<div class="col-sm-7">.col-sm-7</div>
</div>
<div class="row">
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-6">.col-sm-6</div>
</div>
<div class="row">
<div class="col-sm-12">.col-sm-12</div>
</div>
</div>

运行示例

每个班级名称末尾的数字表示该列跨越的列数。因此.col-sm-1横跨一列,.col-sm-8跨越八个。这sm意味着colspan适用于小型设备和上述所有内容。您还可以使用md,lg以及xl中型,大型和特大型。通过省略中间缩写来迎合额外的小型设备。例如.col-8跨越额外小型设备上的八列(换句话说,所有设备)。

堆叠到水平

以下示例使用相同的标记,但是这次我们使用md“中等”。这意味着,如果视口小于“中等”(即小于768像素),则网格中的单元格将堆叠在彼此之上,并且每个单元格将占据全部宽度。

如果您在宽屏幕上查看此示例,则此示例与前一个示例看起来可能没有任何区别。但是,如果您调低浏览器大小,单元格最终会转移到堆叠位置(并且前一个示例将保持不变)。

<!-- Styles (so that we can see the grid) -->
<style>
.bs-example div[class^="col"] {
border: 1px solid white;
background: #f5f5f5;
text-align: center;
padding-top: 8px;
padding-bottom: 8px;
}
</style>
<div class="bs-example">
<!-- Bootstrap Grid -->
<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-2">.col-md-2</div>
<div class="col-md-3">.col-md-3</div>
<div class="col-md-7">.col-md-7</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-5">.col-md-5</div>
<div class="col-md-7">.col-md-7</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 class="row">
<div class="col-md-12">.col-md-12</div>
</div>
</div>

运行示例

网格大小

下表显示了不同的网格选项如何处理不同的视口大小。

超小
<576px

≥576px
中等
≥768px

≥992px
超大
≥1200px
网格行为 任何时候都是水平的 开始折叠,水平位于断点之上
最大容器宽度 无(自动) 540px 720像素 960像素 1140px
类前缀 .col- .col-sm- .col-md- .col-lg- .col-xl-
列数 12
沟槽宽度 30px(每列15px)
嵌套
列排序

请注意,随着版本4的推出,Bootstrap现在使用5层网格系统(而不是Bootstrap 3中的4层网格系统)。

用网格记住的事情

集装箱

网格应放置在一个容器内(即使用任何一个.container班级或.container-fluid班级)以进行适当的填充和对齐。

行和列

行包含一列或多列。列包含内容。只有列可以是行的直接子节点。

填充

列包含填充。但是,第一列和最后一列的填充由行上的负边距抵消。这就是为什么上面的例子是缩进的 – 这是因为网格内的内容与网格外的内容对齐。

每行超过12列?

如果超过12列放置在一行中,列将换行到一个新行。也就是说,列将作为一个组包装。因此,例如,如果一行包含a col-md-10和a col-md-3,整个col-md-3将换行到新行。

每行少于12列?

你不必用完所有12栏。您可以使用任意数量的列(最多12个)(在将其包装到下一行之前)。例如,你可以有一行,总列数跨越3列。

网格类

网格类适用于屏幕宽度大于或等于断点尺寸的设备,并覆盖面向较小设备的网格类。因此,使用任何.col-sm-*类不仅会影响小的视口,而且还中型,大型和特大型(除非还有一个col-md-*和/或col-lg-*/ col-xl-*存在)。

多个类

您可以为给定的元素使用多个类的大小。例如,您可以使用class=”col-sm-10 col-md-6″为小视口指定10列,为中等和大视口指定6列。

 

133621

 

英语原文:https://www.quackit.com/bootstrap/bootstrap_4/tutorial/bootstrap_grid_system.cfm 由工具自动翻译,由书目录整理