Bootstrap 4网格系统

Bootstrap 4网格系统用于响应式布局。

响应式布局表示元素以不同分辨率在页面中对齐的方式。在学习任何其他Bootstrap 4组件之前，了解如何使用网格非常重要，因为无论使用什么元素，都需要将其放置在屏幕上的某个位置。

让我们开始吧！

Bootstrap 4容器
Bootstrap 4行
Bootstrap 4列
进一步阅读

Bootstrap 4网格由容器，行和列组成。我们将一一介绍它们并进行解释。

Bootstrap 4容器

Bootstrap 4容器是带有class的元素.container。该容器是Bootstrap 4网格系统的根，用于控制布局的宽度。

Bootstrap 4容器包含页面中的所有元素。这意味着您的页面应具有以下结构：首先是HTML页面的主体，应在其中添加容器以及容器内的所有其他元素。

<body>

...

</div>

</body>

简单.container类根据屏幕的宽度设置布局的宽度。它将内容放置在页面中间，使其水平对齐。Bootstrap 4容器与页面的左右边缘之间有相等的空间。

在.container按比例缩小的宽度为屏幕宽度变窄和成为上移动全宽。容器的宽度是在Bootstrap 4库中为每种屏幕尺寸定义的。您可以在此处看到确切的尺寸。

全宽容器占用屏幕大小的100％，而不管屏幕宽度如何。要使用它，您需要添加class。container-fluid。

Hello! I am in a simple container.

</div>

Hello! I am in a full-width container.

</div>

您可以在此处查看CodePen 。

要查看两种类型的容器之间的区别，您可以在控制台中打开笔并在屏幕尺寸之间进行切换。

Bootstrap 4行

Bootstrap 4行是屏幕的水平切片。它们仅用作列的包装。要使用它们，您需要.row该类。

...

</div>

关于Bootstrap 4行，这是您需要记住的最重要的事情：

它们仅用于包含列。如果将其他元素与列一起放在行内，则不会获得预期的结果。
它们必须放在容器中。如果不这样做，您将在页面上获得水平滚动。发生这种情况是因为行的左边距和右边距为负15。该容器具有15px的填充，因此抵消了边距。
列必须是该行的子级。否则它们将无法对齐。创建行和列以在此严格的层次结构中一起工作。

Bootstrap 4列

现在，我们可以进入本教程的精彩部分，Bootstrap 4列。列很棒！它们可帮助您水平分割屏幕。

如果在行中放置一列，它将占用所有宽度。如果添加两列，则它们各自将占宽度的1/2。因此，它适用于任意数量的列。

...

</div>

...

</div>

...

</div>

...

</div>

...

</div>

...

</div>

...

</div>

...

</div>

您可以在CodePen上实时查看代码。

旁注：列未着色。我只是添加了颜色以提供更具视觉吸引力的描述/所以它们看起来很漂亮。

设置列的大小

使用.col该类可动态设置列的宽度。这意味着，根据行中的列数，列的宽度将是容器的宽度除以列数。

但是还有另一种定义列的方法。您可以将类用于列并定义其大小。

默认情况下，Bootstrap 4网格由12列组成。您可以为列选择1到12之间的任意大小。如果要3个相等的列，则可以.col-4每列使用3个（因为每个3 * 4列= 12）。或者，您可以为它们设置不同的大小。这里有些例子：

...

</div>

...

</div>

...

</div>

...

</div>

...

</div>

...

</div>

...

</div>

...

</div>

您可以在CodePen上实时查看代码。

如果您行中col的总和未达到12，则它们不会填充整行。如果列的总和超过12，则它将移至下一行。第一行将仅显示加起来等于或小于12的前几个元素。

设置列的断点

如果您采用上述示例，并想在移动设备上显示它，则可能会遇到一些问题。在移动设备上显示五列将使内容不可读。

这是功能最强大的Bootstrap 4组件之一发挥作用的地方。为了在不同的屏幕上具有不同的布局，您无需编写媒体查询，而是可以使用列断点。

断点是Bootstrap 4变量，代表屏幕分辨率。当您为一个类指定一个断点时，您是在告诉该类仅对于至少与该断点所容纳的数字一样大的分辨率有效。

我们将学习的最简单的类是.col-[breakpoint]该类。使用此类时，仅当列显示在分辨率至少为定义的断点的设备上时，才定义列的行为。在给定的断点之前，默认情况下您的列将垂直对齐。在断点之后，由于类的缘故，它们将水平对齐。

Bootstrap有四个断点可供您使用：

.col-sm 适用于较大型的手机（分辨率≥576px的设备）；
.col-md 对于平板电脑（≥768px）；
.col-lg 用于笔记本电脑（≥992px）；
.col-xl 适用于台式机（≥1200px）

假设您要在小屏幕上垂直显示两列，在大屏幕上同一行。您将需要指定断点，列在同一行上。

在我们的示例中，我们将使用.col-lg断点并查看列在不同屏幕上的外观。对于低于给定断点（<992px）的分辨率，列将垂直显示。这意味着在移动设备和平板电脑上，这些列将如下所示：

分辨率<992px（移动设备）的显示。

对于分辨率高于或等于断点（≥992px）的设备，列将位于同一行。这意味着在笔记本电脑和台式机上，您将得到以下结果：

分辨率> = 992px的显示屏（笔记本电脑和更大的屏幕）。

...

</div>

...

</div>

您可以在CodePen上实时查看代码。如果在另一个窗口中打开Codepen，并以不同的分辨率查看页面，您将看到各列的位置改变。

如果您希望2列从较大的手机开始在同一行上使用.col-sm，则适用于平板电脑.col-md和超大屏幕.col-xl。

设置列的大小和断点

您可以组合大小和断点，并使用具有格式的单个类.col-[breakpoint]-[size]。

例如，如果您希望以笔记本电脑分辨率开头的三行不同大小的列对齐，那么您需要这样做：

...

</div>

...

</div>

...

</div>

您将在分辨率低于992px的情况下获得此结果：

对于≥992px的屏幕：

同样，您可以在CodePen上看到代码。

但是，如果要在较小的移动分辨率下每行显示一列，在平板电脑上每行显示两列，在分辨率更高的笔记本电脑或设备上显示四行呢？

然后，为单个列添加多个类以描述每种解决方案的行为。使用多个类，您可以指定内容在平板电脑上占用六个插槽，在笔记本电脑上占用三个插槽。

...

</div>

...

</div>

...

</div>

...

</div>

结果将在平板电脑上显示如下：

像这样在笔记本电脑和更高的分辨率下：

此示例也位于CodePen上。

作为练习，您可以尝试根据屏幕大小创建具有不同列数的行，并在浏览器控制台中验证行为。

抵消列

如果您不希望各列彼此相邻，则可以将该类.offset-[breakpoint]-[size]与一起使用.col-[breakpoint]-[size]。

使用此类与在列之前添加一个空列相同。这是一个简单的示例：

...

</div>

...

</div>

您可以在CodePen上实时查看代码。

您可以在该行的任何列上使用该类。这里还有更多示例：

...

</div>

...

</div>

...

</div>

...

</div>

...

</div>

嵌套列

这可能令人惊讶，但是您可以在列中添加一行！

然后将所讨论的行（具有其父列的宽度）划分为12个（较小的）列，您可以通过这些.col-* 类进行引用。

让我们看一下在列中插入新行时会发生什么：

...

...

</div>

...

</div>

...

</div>

您可以在CodePen上实时查看代码。

知道了这一点，您可以深入多个层次来组织信息。这些列将为您提供管理空间的简单方法。

总结了有关Bootstrap 4响应网格系统的基本知识。

Bootstrap 4网格系统相关推荐

Bootstrap 的网格系统（Grid System）
本章节我们将讲解 Bootstrap 的网格系统(Grid System). Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动 ...
bootstrap布局网格系统
Bootstrap 网格系统本章节我们将讲解 Bootstrap 的网格系统(Grid System). Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewp ...
Bootstrap(三) 网格系统
本文转自:http://www.imooc.com/learn/141 实现原理网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整 ...
bootstrap的网格系统
1.bootstrap的栅格系统 bootstrap包含了一个响应式的,移动设备优先,不固定的网格系统,可以随着屏幕的伸缩,改变列的大小和数量,同行最多12列. 代码使用@media根据屏幕的大小控制 ...
Bootstrap框架网格系统工作原理
Bootstrap 框架的网格系统工作原理如下: 1 .数据行 (.row) 必须包含在容器( .container )中,以便为其赋予合适的对齐方式和内距 (padding) . 如: &l ...
前端学习之Bootstrap入门网格系统
vscode前端常用插件推荐 https://www.cnblogs.com/karthuslorin/p/8577224.html VS code Debug for Chrome项目文件 http ...
bootstrap网格系统，下拉菜单
网格系统实现原理把网页大小分为12份,仅仅通过定义容器大小,平分12份,再调整内外边距,最后结合媒体查询,就可以制作出响应式栅格系统栅格系统用于一系列的含(row)和列(column)的组合来创建 ...
Bootstrap布局之网格系统
一.Bootstrap网格系统工作原理 Bootstrap的网格系统是指将页面布局划分为等宽的列. 随着屏幕或视口尺寸的增加,系统会自动分为1~12列. 网格系统用于通过一系列的行(row)与列(co ...
玩转Bootstrap（基础）（4.网格系统实现原理）
代码 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title& ...

Bootstrap 4网格系统

Bootstrap 4网格系统相关推荐

最新文章

热门文章