bootstrap前端框架的网格系统

admin 轻心小站 关注 LV.19 运营
发表于Bootstrap版块 教程

使用我们强大的移动优先弹性框网格来构建各种形状和大小的布局,这要归功于十二列系统、六个默认响应层、Sass 变量和混合以及数十个预定义类。示例Bootstrap的网格系统使用一系列容器、行和列来布局和

使用我们强大的移动优先弹性框网格来构建各种形状和大小的布局,这要归功于十二列系统、六个默认响应层、Sass 变量和混合以及数十个预定义类。

示例

Bootstrap的网格系统使用一系列容器、行和列来布局和对齐内容。它是用flexbox构建的,并且是完全响应的。下面是一个示例,并深入解释了网格系统是如何组合在一起的。


Image


上图代码

<div class="container text-center">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>


上面的示例使用预定义的网格类在所有设备和视口中创建三个等宽列。这些列在页面中居中,父级为.container。


工作原理

分解一下,网格系统是如何组合在一起的:

  • 我们的网格支持六个响应断点。 断点基于 min-width媒体查询,这意味着它们会影响该断点及其上方的所有断点(例如,.col-sm-4适用于sm,md,lg,xl和xxl)。这意味着您可以通过每个断点控制容器和列的大小和行为。

  • 容器居中并水平填充内容。 在所有视口和设备上使用.container表示响应式像素宽度,使用.container-fluid表示 width: 100%,或使用响应式容器(例如.container-md`)表示流体和像素宽度的组合。

  • 行是列的包装器。 每列都有水平的 padding(称为槽),用于控制它们之间的间距。然后,在具有负边距的行上抵消此 padding,以确保列中的内容在视觉上与左侧对齐。行还支持修饰符类来 统一应用列大小和 槽类来更改内容的间距。

  • 列非常灵活。 每行有 12 个模板列可用,允许您创建跨越任意列数的不同元素组合。列类指示要跨越的模板列数(例如,col-4跨越四个)。width以百分比设置,因此您始终具有相同的相对大小。

  • 槽也是响应式和可自定义的。 [槽类可用(/docs/5.3/layout/gutters/) 跨越所有断点,其大小与我们的 边距和填充间距 相同。使用 .gx-*类更改水平槽,使用.gy-*更改垂直槽,或使用.g-*类更改所有槽。 .g-0也可用于移除槽(gutters)。

  • Sass 变量、映射和混合为网格提供动力。 如果您不想在 Bootstrap 中使用预定义的网格类,您可以使用我们的 grid 的源代码 Sass 创建自己的具有更多语义标记的网格类。我们还包含一些 CSS 自定义属性来使用这些 Sass 变量,为您提供更大的灵活性。

请注意限制和围绕flexbox的错误,例如无法使用某些HTML元素作为flex容器。

网格选项

Bootstrap的网格系统可以适应所有六个默认断点,以及您自定义的任何断点。六个默认网格层如下所示:

  • 超小 (xs)

  • 小 (sm)

  • 中等 (md)

  • 大 (lg)

  • 超大 (xl)

  • 超大号(xxl)

如上所述,这些断点中的每一个都有自己的容器、唯一的类前缀和修饰符。以下是网格在这些断点之间的变化方式:

xs
<576px

sm
≥576px

md
≥768px

lg
≥992px

xl
≥1200px

xxl
≥1400px

Container max-width

None (auto)

540px

720px

960px

1140px

1320px

Class prefix

.col-

.col-sm-

.col-md-

.col-lg-

.col-xl-

.col-xxl-

# of columns

12

Gutter width

1.5rem (.75rem on left and right)

Custom gutters

Yes

Nestable

Yes

Column ordering

Yes

自动布局列

利用特定于断点的列类轻松调整列大小,而无需显式编号的类(如.col-sm-6)。

等宽

例如,下面是适用于每个设备和视口的两个网格布局,从xs到xxl。为所需的每个断点添加任意数量的无单元类,每列的宽度将相同。


<div class="container text-center">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>


文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
Bootstrap是一个前端框架,可以快速构建响应式的网站
社区管理员:

暂无管理员

发布评论

评论: bootstrap前端框架的网格系统

粉丝

0

关注

0

收藏

0

已有0次打赏