二、布局系统

最新推荐文章于 2024-10-30 16:25:45 发布

a小铭同学

最新推荐文章于 2024-10-30 16:25:45 发布

阅读量368

点赞数

分类专栏： Bootstrap学习文章标签： bootstrap css 前端

本文链接：https://blog.csdn.net/a320976399/article/details/120987164

版权

Bootstrap学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本节课我们来开始学习 Bootstrap 布局知识，了解栅格系统以及如何分配列、栅格等级并且简单了解不同等级的作用。

一．布局介绍

对于容器布局，Bootstrap4.x 提供了.container 和.container-fluid 两种；
这两种样式是启用布局栅格系统最基本的要素；
.contianer 是固体自适应方式，.container-fluid 是流体 100%自适应方式；
容器布局可以嵌套，但一般来说，不推荐且很少使用到：
自适应对应的响应式方式如下 media：

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

从响应式的 media 可以看出，Bootstrap4 是以移动端为优先的。

二．栅格系统

Bootstrap4.x 的栅格系统是一个以移动为优先的网格系统；
基于 12 列的布局、5 种响应尺寸（面向不同屏幕设备）；
完全使用 flexbox 流式布局构建的，完全支持响应式标准；
具体采用 div 容器的行、列和对齐内容来构建响应式布局；
首先，实现一个一行三列的布局，通过浏览器切换屏幕测试；

      <div class="container">
          <div class="row">
              <div class="col-sm">第一列</div>
              <div class="col-sm">第二列</div>
              <div class="col-sm">第三列</div>
          </div>
      </div>

为了显示的更加清楚，可以给行列加对比鲜明的 CSS 来观察；
.row 表示一行，.col-*来表示一列，实现了智能三列；
sm 表示屏幕类型，本节先不去详细了解，后面的课会探讨；
如果我们采用的是.container-fluid，那么会 100%占用屏幕宽度；

      <div class="container-fluid">
          <div class="row">
              <div class="col-sm">第一列</div>
              <div class="col-sm">第二列</div>
              <div class="col-sm">第三列</div>
          </div>
      </div>

在.col-sm-*的星号位置，还可以强制设定每列所占有的栅格列；

      <div class="container-fluid">
          <div class="row">
              <div class="col-sm-3">第一列</div>
              <div class="col-sm-3">第二列</div>
              <div class="col-sm-3">第三列</div>
          </div>
      </div>

所占的栅格位正好是 12 列，超过 12 列则会换行，小于 12 列则不能 100%；
以上智能计算和强制设置栅格位都是等宽的，我们也可以设置不对称的；

      <div class="container-fluid">
          <div class="row">
              <div class="col-sm-8">第一列</div>
              <div class="col-sm-4">第二列</div>
          </div>
      </div>

三．栅格等级

栅格系统中有五个栅格等级，具体如下表：

如果同时是使用两个或以上的级别，并且比例相同，则遵循移动端优先的原则；

      <div class="container">
          <div class="row">
              <div class="c col-sm-4 col-lg-6 col-xl-12">第一列</div>
              <div class="c col-sm-4 col-lg-6 col-xl-12">第二列</div>
              <div class="c col-sm-4 col-lg-12 col-xl-12">第三列</div>
          </div>
      </div>

栅格系统支持只指定其中一种或几种，其它随机的方式，指定数字奇偶均可；

      <div class="container">
          <div class="row">
              <div class="c col-sm">第一列</div>
              <div class="c col-sm-7">第二列</div>
              <div class="c col-sm">第三列</div>
          </div>
      </div>

可以通过两个或以上来实现不同设备不同比例的混合布局；

      <div class="container">
          <div class="row">
              <div class="c col-sm-8 col-xl-12">第一列</div>
              <div class="c col-sm-4 col-xl-12">第二列</div>
          </div>
      </div>

使用.w-100 可以切割栅格栏位，进行分行操作；

      <div class="container">
          <div class="row">
              <div class="c col">第一列</div>
              <div class="c col">第二列</div>
              <div class="w-100"></div>
              <div class="c col">第三列</div>
              <div class="c col">第四列</div>
          </div>
      </div>

如果强制设置了 col-3 数值，那切割后，将不会自动填充；

      <div class="container">
          <div class="row">
              <div class="c col-3">第一列</div>
              <div class="c col-3">第二列</div>
              <div class="w-100"></div>
              <div class="c col-3">第三列</div>
              <div class="c col-3">第四列</div>
          </div>
      </div>