前端学习-UI框架学习-Bootstrap5-003-网格系统

菜鸟教程链接
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列

规则

• 网格每一行需要放在设置了 .container (固定宽度) 或 .container-fluid (全屏宽度) 类的容器中，这样就可以自动设置一些外边距与内边距。
• 使用行来创建水平的列组
• 内容需要放置在列中，并且只有列可以是行的直接子节点
• 列通过填充创建列内容之间的间隙。 这个间隙是通过 .rows 类上的负边距设置第一行和最后一列的偏移。
• 网格列是通过跨越指定的 12 个列来创建。 例如，设置三个相等的列，需要使用三个 .col-sm-4 来设置。
• Bootstrap 5 和 Bootstrap 4 使用 flexbox（弹性盒子） 而不是浮动。 Flexbox 的一大优势是，没有指定宽度的网格列将自动设置为等宽与等高列

基本结构

<template>
  <div class="container-fluid mt-3">
    <h1>创建列 使用col-*-*的形式</h1>
    <p>创建三个列! 尝试在 class="row" 的 div 中添加新的 class="col" div，会显示四个列。</p>
    <div class="row">
      <div class="col-sm-6 p-3 bg-primary text-white">.col</div>
      <div class="col-sm-3 p-3 bg-success text-white">.col</div>
      <div class="col-lg-3 p-3 bg-dark text-white">.col</div>
      <div class="col-*-4 p-3 bg-info text-white">.col</div>
    </div>
  </div>
  <div class="container-fluid mt-3">
    <h1>创建列 使用col自适应的形式</h1>
    <p>创建三个列! 尝试在 class="row" 的 div 中添加新的 class="col" div，会显示四个等宽的列。</p>
    <div class="row">
      <div class="col p-3 bg-primary text-white">.col</div>
      <div class="col p-3 bg-success text-white">.col</div>
      <div class="col p-3 bg-dark text-white">.col</div>
      <div class="col p-3 bg-info text-white">.col</div>
    </div>
  </div>
</template>

不同的端下显示不同

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6 bg-success text-white">
      <p>RUNOOB</p>
    </div>
    <div class="col-sm-9 col-md-6 bg-info text-white">
      <p>菜鸟教程</p>
    </div>
  </div>
</div>

嵌套列

<template>
  <div class="container-fluid wrapper">
    <div class="row">
      <div class="col-8 bg-primary p-4">
        .col-8
        <div class="row">
          <div class="col-6 bg-secondary p-2">.col-6</div>
          <div class="col-6 bg-light p-2">.col-6</div>
        </div>
      </div>
      <div class="col-4 bg-success p-4">.col-4</div>
    </div>
  </div>
</template>

偏移列

偏移列通过 offset-- 类来设置。第一个星号( * )可以是 sm、md、lg、xl，表示屏幕设备类型，第二个星号( * )可以是 1 到 11 的数字。

<template>
  <div class="container-fluid wrapper">
    <div class="row">
      <div class="col-xl-4 bg-black text-white">.col-md-4</div>
      <div class="col-xl-4 offset-md-4 bg-success">.col-md-4 .offset-md-4</div>
    </div>
    <div class="row">
      <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
      <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    </div>
    <div class="row">
      <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
    </div>
  </div>
</template>