学习 Bootstrap 5 之 Breakpoints Containers Grid

Posted _DiMinisH

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了学习 Bootstrap 5 之 Breakpoints Containers Grid相关的知识，希望对你有一定的参考价值。

学习 Bootstrap 5 之 断点 容器 栅格

Bootstrap

1. 什么是Bootstrap?

  Bootstrap 是一个前端框架，用于构建响应式、移动设备优先的网站

2. 使用Bootstrap

(1). 直接下载

官网下载地址:下载地址

(2). 使用CND

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-LY6QZQpYtqgQLJeUeh2disXkUUa+fRYfq/3dxdpkU5PQZUCqg/BK4wrhQ9idOojx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-3JyvMmfSMpWbSPyCjNwU5lHJFeswLerSwlOGCGjyuhQ+HKQNQKCbIzEgGTP1MfyY" crossorigin="anonymous"></script>

(3). 在Vue CLI中安装

  1. 进入项目的根目录, 即进入到与package.json所在的目录

  2. 使用如下命令

npm install bootstrap

或者

npm i bootstrap

安装中:

  1. 安装完成
  • 安装完成后, 如下node_modules目录下会有bootstrap的目录

Breakpoints (断点)

Bootstrap 5 官方文档

(1). 什么是断点

官方给出的解释:
  Breakpoints are customizable widths that determine how your responsive layout behaves across device or viewport sizes in Bootstrap.

大概就是:
  断点是一种可定制的 决定你的响应式布局如何表现在设备或者bootstrap视口大小的 宽度

所以, 断点是宽度, 官方把特定的宽度的范围起了一个名字叫断点

(2). 默认的六种断点

官方指定的6种宽度的范围, 单位:像素(px)

断点类中缀大小
极小 (X-Small)None< 576 px
小 (Small)sm≥ 576 px
中 (Medium)md≥ 768 px
大 (Large)lg≥ 992 px
极大 (Extra large)xl≥ 1200 px
超大 (Extra extra large)xxl≥ 1400 px

例如, 500像素的宽度就属于极小这个范围

(3). 断点的作用

  响应式布局, 简单的说, 就是当视口的大小改变的时候, 浏览器显示的内容会发生变化, 即对视口的大小进行响应, 例如, 有一个区域, 我想让这个区在电脑上看的时候是一种样式, 在手机上看的时候是另一种样式, 这个就是响应式布局。

下面这个例子是, 当视口大小在指定的范围时, 可以看到黑色的区域

  <div align = "center" >
    <div class = "d-block d-sm-none d-md-none d-lg-none d-xl-none d-xxl-none">
      <h1 class = "d text-primary">当前视口宽度小于 576px</h1>
    </div>
    <div class = "d-none d-sm-block d-md-none d-lg-none d-xl-none d-xxl-none">
      <h1 class = "d text-primary">当前视口宽度大于 576px 小于 768px</h1>
    </div>
    <div class = "d-none d-sm-none d-md-block d-lg-none d-xl-none d-xxl-none">
      <h1 class = "d text-primary">当前视口宽度大于 768px 小于 992px</h1>
    </div>
    <div class = "d-none d-sm-none d-md-none d-lg-block d-xl-none d-xxl-none">
      <h1 class = "d text-primary">当前视口宽度大于 992px 小于 1200px</h1>
    </div>
    <div class = "d-none d-sm-none d-md-none d-lg-none d-xl-block d-xxl-none d-xxl-none">
      <h1 class = "d text-primary">当前视口宽度大于 1200px 小于 1400px</h1>
    </div>
    <div class = "d-none d-sm-none d-md-none d-lg-none d-xl-none d-xxl-block">
      <h1 class = "d text-primary">当前视口宽度大于 1400px</h1>
    </div>
  </div>
  • css
.d 
  background-color: black;
  height: 200px;
  width: 600px;
  line-height: 200px;

容器 (Containers)

Bootstrap 5 官方文档

1. 什么是容器?

  容器是Bootstrap一个基本的构建块, 它包含、填充和对齐给定设备或视口中的内容。

  可以简单理解为人家写好的样式, 只需要我们在class种加入这些容器对应的名字, 就可以使用这些已经写好的样式了, 但是, 要想使用他们, 需要先了解他们

2. 三种容器

  Bootstrap有三种容器

(1). .container

  这种容器在每一个响应式的断点中都设置了一个最大宽度值, 即当视口宽度达到这些指定的值, 则使用了这个容器的标签显示出来的东西宽度会发生改变

(2). .container-fluid

  这种容器的宽度是父元素宽度的100%, 即无论视口宽度是多少, 这种容器中的标签显示出来的宽度都是父元素宽度的100%

(3). .container-断点

  这种容器的宽度取决于设置的断点的值, 如果大于断点的宽度, 则按照断点宽度的值, 否则就是父元素宽度的100%

(4). 容器宽度表格

类名Extra small
< 576px		Small
≥ 576px		Medium
≥ 768px		Large
≥ 992px		Extra Large
≥ 1200px		Extra extra Large
≥ 1400px
.container100%540px720px960px1140px1320px
.container-sm100%540px720px960px1140px1320px
.container-md100%100%720px960px1140px1320px
.container-lg100%100%100%960px1140px1320px
.container-xl100%100%100%100%1140px1320px
.container-xxl100%100%100%100%100%1320px
.container-fluid100%100%100%100%100%100%

例如 ≥ 1400px的意思是, 当视口宽度大于1400像素时, 如果容器使用了container, 则宽度1320像素, 如果容器使用了container-fluid, 则宽度是父元素宽度的100%

栅格布局系统 (Grid system)

Bootstrap 5 官方文档

1. 什么是栅格布局系统?

  布局系统基于12列6个响应断点的, 采用div标签, 它可以创造出各种形状和大小的布局

2. 特点

(1). 支持六种响应式布局

(2). 容器会居中和水平填充内容

(3). 每一列都有水平填充器(称为gutter)，用于控制列与列之间的间距

(4). 每行有12个模板列，允许创建跨任意数量列的元素的不同组合

  布局系统基于12列, 即把每一行划分为12列, 可以自行分配, 创造出不用的布局, 通过col-N来指定当前列占了几个列的位置, N是介于1-12的, 如果超过12则多出来的会换行

(5). Gutter也是响应式和可自定义的

(6). 修改sass文件中的值, 可以改变这些默认的设置

3. 栅格布局选项

Extra small
< 576px		Small
≥ 576px		Medium
≥ 768px		Large
≥ 992px		Extra Large
≥ 1200px		Extra extra Large
≥ 1400px
.container 宽度None (auto)540px720px960px1140px1320px
类前缀.col-.col-sm-.col-md-.col-lg-.col-xl-.col-xxl-
总列数121212121212
Gutter 宽度1.5rem (.75rem on left and right)1.5rem (.75rem on left and right)1.5rem (.75rem on left and right)1.5rem (.75rem on left and right)1.5rem (.75rem on left and right)1.5rem (.75rem on left and right)
是否可以自定义Gutter是是是是是是
是否可以嵌套是是是是是是
列是否可以排序是是是是是是

4. 使用

.col 表示 这个区域是一列

.row 表示 这个区域是一行

使用的时候, 先用行, 再用列

(1). 简单的例子

  设置div标签使用了container的样式, row是设置该区域是一行, col设置该区域是一列, 这种布局满足的是

Extra small
< 576px		Small
≥ 576px		Medium
≥ 768px		Large
≥ 992px		Extra Large
≥ 1200px		Extra extra Large
≥ 1400px
.container 宽度None (auto)540px720px960px1140px1320px

  下面这个图是视口宽度大于1400像素的情况, 该情况下, 区域的宽度是1320像素
如果缩小视口宽度, 例如到了1300像素, 则该区域的宽度是1140像素, 具体每个视口宽度对应的区域宽度, 都总结在上表中

  <div class = "container">
    <div class = "row" style = "border:3px solid black">
      <div class = "col" style = "border:1px solid red">
        Column
      </div>
      <div class = "col" style = "border:1px solid red">
        Column
      </div>
      <div class = "col" style = "border:1px solid red">
        Column
      </div>
    </div>

(2). 默认情况下, 会均分每一行的12列

  <div class="container">
    <div class="row" style = "border:3px solid black">
      <div class="col" style = "border:1px solid red">
        1 of 2
      </div>
      <div class="col" style = "border:1px solid red">
        2 of 2
      </div>
    </div>
    <div class="row" style = "border:3px solid black">
      <div class="col" style = "border:1px solid red">
        1 of 3
      </div>
      <div class="col" style = "border:1px solid red"> 
        2 of 3
      </div>
      <div class="col" style = "border:1px solid red">
        3 of 3
      </div>
    </div>

(3). 设置指定宽度

1). 正常指定宽度

col-N N介于1 - 12之间

col-断点-N N介于1 - 12之间

  一行列数不够12, 会空出来, 如果不指定列宽, 默认就是剩下未被指定列的宽度

  <div class="container">
    <div class="row" style = "border:3px solid black">
      <div class="col-1" style = "border:1px solid red">
        占 1 列
      </div>
      <div class="col-5" style = "border:1px solid red">
        占 5 列
      </div>
    </div>
    <div class="row" style = "border:3px solid black">
      <div class="col-2" style = "border:1px solid red">
        占 2 列
      </div>
      <div class="col-2" style = "border:1px solid red">
        占 2 列
      </div>
      <div class="col" style = "border:1px solid red">
        使用默认
      </div>
    </div>
  </div>

2). 指定宽度超出12

  超出12列, 最后一个列会被换到下一行

  <div class="container">
    <div class="row" style = "border:3px solid black">
      <div class="col-6" style = "border:1px solid red">
        占 6 列
      </div>
      <div class="col-9" style = "border:1px solid red">
        占 9 列
      </div>
    </div>
  </div>

(4). 设置变宽 (列宽根据内容自动变化)

col-断点-auto 或 col-auto

  <div class="container">
    <div class="row" style = "border:3px solid black">
      <div class="col col-auto" style = "border:1px solid red">
        1 of 3 (col-auto)
      </div>
      <div class="col col-auto" style = "border:1px solid red">
        2 of 3 (col-auto)
      </div>
      <div class="col" style = "border:1px solid red">
        3 of 3
      </div>
    </div>
    <div class = "row" style = "border:3px solid black">
      <div class="col" style = "border:1px solid red">
        1 of 3
      </div>
      <div class="col" style = "border:1px solid red">
        2 of 3
      </div>
      <div class="col" style = "border:1px solid red">
        3 of 3
      </div>
    </div>
  </div>

(5). 在行中设置该行的列数

1). 指定固定值

row-cols-N N介于1 - 12之间

使用row-cols-2 指定每行2列, 多余的到下一行

  <div class="container">
    <div class="row row-cols-2" style = "border:3px solid black">
      <div class="col" style = "border:1px solid red">Column</div>
      <div class="col" style = "border:1px solid red">Column</div>
      <div class="col" style = "border:1px solid red">Column</div>
      <div class="col" style = "border:1px solid red">Column</div>
      <div class="col" style = "border:1px solid red">Column</div>
    </div>
  </div>

2). 根据每一列中内容变化列的宽度

row-cols-auto

列宽根据内容宽度自动改变

  <div class="container">
    <div class="row row-cols-auto" style = "border:3px solid black">
      <div class="col" style = "border:1px solid red"<
以上是关于学习 Bootstrap 5 之 Breakpoints Containers Grid的主要内容，如果未能解决你的问题，请参考以下文章
 

 学习 Bootstrap 5 之 Background


 学习 Bootstrap 5 之 Containers


 学习 Bootstrap 5 之 Tables


 学习 Bootstrap 5 之 Forms


 学习 Bootstrap 5 之 Breakpoints Containers Grid


 学习 Bootstrap 5 之 Interactions