二、布局系统

在这里插入图片描述
本节课我们来开始学习 Bootstrap 布局知识,了解栅格系统以及如何分配列、栅格等级并且简单了解不同等级的作用。

一.布局介绍

  1. 对于容器布局,Bootstrap4.x 提供了.container 和.container-fluid 两种;
  2. 这两种样式是启用布局栅格系统最基本的要素;
  3. .contianer 是固体自适应方式,.container-fluid 是流体 100%自适应方式;
  4. 容器布局可以嵌套,但一般来说,不推荐且很少使用到:
  5. 自适应对应的响应式方式如下 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) { ... }
  1. 从响应式的 media 可以看出,Bootstrap4 是以移动端为优先的。

二.栅格系统

  1. Bootstrap4.x 的栅格系统是一个以移动为优先的网格系统;
  2. 基于 12 列的布局、5 种响应尺寸(面向不同屏幕设备);
  3. 完全使用 flexbox 流式布局构建的,完全支持响应式标准;
  4. 具体采用 div 容器的行、列和对齐内容来构建响应式布局;
  5. 首先,实现一个一行三列的布局,通过浏览器切换屏幕测试;
      <div class="container">
          <div class="row">
              <div class="col-sm">第一列</div>
              <div class="col-sm">第二列</div>
              <div class="col-sm">第三列</div>
          </div>
      </div>
  1. 为了显示的更加清楚,可以给行列加对比鲜明的 CSS 来观察;
  2. .row 表示一行,.col-*来表示一列,实现了智能三列;
  3. sm 表示屏幕类型,本节先不去详细了解,后面的课会探讨;
  4. 如果我们采用的是.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>
  1. 在.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>
  1. 所占的栅格位正好是 12 列,超过 12 列则会换行,小于 12 列则不能 100%;
  2. 以上智能计算和强制设置栅格位都是等宽的,我们也可以设置不对称的;
      <div class="container-fluid">
          <div class="row">
              <div class="col-sm-8">第一列</div>
              <div class="col-sm-4">第二列</div>
          </div>
      </div>

三.栅格等级

  1. 栅格系统中有五个栅格等级,具体如下表:
    在这里插入图片描述
  2. 如果同时是使用两个或以上的级别,并且比例相同,则遵循移动端优先的原则;
      <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>
  1. 栅格系统支持只指定其中一种或几种,其它随机的方式,指定数字奇偶均可;
      <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>
  1. 可以通过两个或以上来实现不同设备不同比例的混合布局;
      <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>
  1. 使用.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>
  1. 如果强制设置了 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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值