网格系统

Bootstrap 5网格系统-示例和教程

Bootstrap网格是用于构建移动优先布局的强大系统。非常广泛 有很多选择的工具。下面我们向您介绍核心知识。它是 最常用示例的简化概述。


基本例子

Bootstrap的网格系统使用一系列容器,行和列来布局和对齐 内容。它是使用flexbox构建的,具有完全的响应能力。以下是一个示例和深入的 网格系统如何组合在一起的说明。

One of three columns
One of three columns
One of three columns

          <div class="container">
            <div class="row">
              <div class="col-md">
                One of three columns
              </div>
              <div class="col-md">
                One of three columns
              </div>
              <div class="col-md">
                One of three columns
              </div>
            </div>
          </div>
        

上面的示例使用以下命令在所有设备和视口中创建了三个等宽列 预定义的网格类。这些列位于父页面的中心 .container

逐步进行:

容器

Bootstrap需要一个包含元素来包装站点内容并容纳我们的网格系统。 没有容器,网格将无法正常工作。

行创建水平的列组。因此,如果要拆分布局 水平使用 .row

Bootstrap的网格系统最多可在页面上显示12列。

grid

我们使用 .col-md-* 创建一列,其中 * 指定 介于1到12之间的列数。

md 指定列更改其宽度的断点。

md 的意思是“屏幕≥768px”,所以我在下面的示例中将这些列扩展为 屏幕上100%的宽度小于或等于768px。


这个怎么运作

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

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

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

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

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

  • 装订线还具有响应能力和可定制性。 可在所有断点处使用装订线类,尺寸大小与边距相同 和填充间距。使用 .gx-* 类(垂直)更改水平装订线 具有 .gy-* 的装订线,或具有 .g-* 类的所有装订线。 .g-0 也可用于删除装订线。

  • Sass变量,地图和Mixins为网格供电。如果您不想使用 在Bootstrap中预定义的网格类,您可以使用网格的源Sass来创建 您自己的带有更多语义标记。我们还包括一些CSS自定义属性以供使用 这些Sass变量可为您提供更大的灵活性。


最常见的例子

一些最常见的网格布局示例,可让您熟悉在 引导网格系统。

五个网格层

Bootstrap网格系统分为五层,对于我们支持的每种设备,一层。 每层均以最小视口大小开始,并自动应用于较大的设备 除非被覆盖。

.col-4
.col-4
.col-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-4
.col-lg-4
.col-lg-4
.col-xl-4
.col-xl-4
.col-xl-4

            <div class="row">
              <div class="col-4">.col-4</div>
              <div class="col-4">.col-4</div>
              <div class="col-4">.col-4</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-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-lg-4">.col-lg-4</div>
              <div class="col-lg-4">.col-lg-4</div>
              <div class="col-lg-4">.col-lg-4</div>
            </div>

            <div class="row">
              <div class="col-xl-4">.col-xl-4</div>
              <div class="col-xl-4">.col-xl-4</div>
              <div class="col-xl-4">.col-xl-4</div>
            </div>
          

三个相等的列

获取三个等宽列 从台式机开始,然后扩展到大型台式机。在移动设备上, 平板电脑及以下版本,列将自动堆叠。

.col-md-4
.col-md-4
.col-md-4

            <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>
          

三个不相等的列

获得三列 从台式机开始,然后扩展到各种宽度的大型台式机。 请记住,对于一个水平块,网格列最多应增加十二个。多于 这样,无论视口如何,列都会开始堆叠。

.col-md-3
.col-md-6
.col-md-3

            <div class="row">
              <div class="col-md-3">.col-md-3</div>
              <div class="col-md-6">.col-md-6</div>
              <div class="col-md-3">.col-md-3</div>
            </div>
          

两列

得到两列 从台式机开始,然后扩展到大型台式机.

.col-md-8
.col-md-4

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

两列与两个嵌套列

根据文档,嵌套很容易-只需在现有列中放置一行列即可。 这给你两列 从台式机开始,然后扩展到大型台式机,另外两个(等于 宽度)。

在移动设备大小(平板电脑及以下)下,这些列及其嵌套的列会堆叠在一起。

.col-md-8
.col-md-6
.col-md-6
.col-md-4

            <div class="row">
              <div class="col-md-8">
                <div class="pb-3">
                  .col-md-8
                </div>
                <div class="row">
                  <div class="col-md-6">.col-md-6</div>
                  <div class="col-md-6">.col-md-6</div>
                </div>
              </div>
              <div class="col-md-4">.col-md-4</div>
            </div>
          

混合:移动和台式机

Bootstrap v5网格系统具有五层类:xs(非常小,此类内缀为 不使用),sm(小),md(中),lg(大)和xl(超大)。您几乎可以使用 这些类的组合可创建更加动态和灵活的布局。

每层的类都按比例增加,这意味着如果您计划为md,lg设置相同的宽度 和xl,则只需指定md。

.col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6

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

混合:移动设备,平板电脑和台式机

.col-sm-6 .col-lg-8
.col-6 .col-lg-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4

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

货柜

Bootstrap v5中添加的其他类允许容器宽度为100%,直到 特定的断点。

.container (100% width below 540px)
.container-sm (100% width below 540px)
.container-md (100% width below 720px)
.container-lg (100% width below 960px)
.container-xl (100% width below 1140px)
.container-xxl (100% width below 1320px)
.container-fluid (always 100% width)

          <div class="container">.container</div>
          <div class="container-sm">.container-sm</div>
          <div class="container-md">.container-md</div>
          <div class="container-lg">.container-lg</div>
          <div class="container-xl">.container-xl</div>
          <div class="container-xxl">.container-xxl</div>
          <div class="container-fluid">.container-fluid</div>