bootstrap4知识点总结

Bootstrap4 网格系统

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

我们也可以根据自己的需要，定义列数：
1 1 1 1 1 1 1 1 1 1 1 1
4 4 4
4 8
6 6
12
Bootstrap 4 的网格系统是响应式的，列会根据屏幕大小自动重新排列。

网格类

Bootstrap4 网格系统有以下 5 个类:

.col- 针对所有设备
.col-sm- 平板 - 屏幕宽度等于或大于 576px
.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)
.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)
.col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)

以上各个类可以一起使用，从而创建更灵活的页面布局。

Bootstrap4 网格系统规则:

网格每一行需要放在设置了 .container (固定宽度) 或 .container-fluid (全屏宽度) 类的容器中，这样就可以自动设置一些外边距与内边距。

使用行来创建水平的列组。
内容需要放置在列中，并且只有列可以是行的直接子节点。

预定义的类如 .row 和 .col-sm-4 可用于快速制作网格布局。

列通过填充创建列内容之间的间隙。 这个间隙是通过 .rows 类上的负边距设置第一行和最后一列的偏移。

网格列是通过跨越指定的 12 个列来创建。 例如，设置三个相等的列，需要使用用三个.col-sm-4 来设置。

Bootstrap 3 和 Bootstrap 4 最大的区别在于 Bootstrap 4 现在使用 flexbox（弹性盒子） 而不是浮动。 Flexbox 的一大优势是，没有指定宽度的网格列将自动设置为等宽与等高列 。

Bootstrap 4 网格的基本结构

以下代码为 Bootstrap 4 网格的基本结构:

<!-- 第一个例子：控制列的宽度及在不同的设备上如何显示 -->
<div class="row">
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
 
<!-- 第二个例子：或让 Bootstrap 者自动处理布局 -->
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

第一个例子：创建一行。然后， 添加是需要的列。 第一个星号表示响应的设备: sm, md, lg 或 xl, 第二个星号 表示一个数字, 同一行的数字相加为12。

第二个例子: 不在每个 col 上添加数字，让 bootstrap 自动处理布局，同一行的每个列宽度相等： 两个 “col” ，每个就为 50% 的宽度。三个 "col"每个就为 33.33% 的宽度，四个 "col"每个就为 25% 的宽度，以此类推。同样，你可以使用 .col-sm|md|lg|xl 来设置列的响应规则。

以下实例在平板、桌面、大桌面显示器、超大桌面显示器的宽度比例为分别为：25%/75%、50%/50%、33.33%/66.67%、16.67/83.33%, 在移动手机等小型设备上会堆叠显示。

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">
      <p>RUNOOB</p>
    </div>
    <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">
      <p>菜鸟教程</p>
    </div>
  </div>
</div>

偏移列

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

为了在大屏幕显示器上使用偏移，请使用 .offset-md-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。

例如：.offset-md-4 是把.col-md-4 往右移了四列格。

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

Bootstrap 4 默认设置

Bootstrap4 默认的 font-size 为 16px, line-height 为 1.5。
默认的 font-family 为 “Helvetica Neue”, Helvetica, Arial, sans-serif。
此外，所有的 < p > 元素 margin-top: 0 、 margin-bottom: 1rem (16px)。

< h1 > - < h6 >

<div class="container">
  <h1>h1 Bootstrap 标题 (2.5rem = 40px)</h1>
  <h2>h2 Bootstrap 标题 (2rem = 32px)</h2>
  <h3>h3 Bootstrap 标题 (1.75rem = 28px)</h3>
  <h4>h4 Bootstrap 标题 (1.5rem = 24px)</h4>
  <h5>h5 Bootstrap 标题 (1.25rem = 20px)</h5>
  <h6>h6 Bootstrap 标题 (1rem = 16px)</h6>
</div>

Bootstrap 还提供了四个 Display 类来控制标题的样式: .display-1, .display-2, .display-3, .display-4。

<div class="container">
  <h1>Display 标题</h1>
  <p>Display 标题可以输出更大更粗的字体样式。</p>
  <h1 class="display-1">Display 1</h1>
  <h1 class="display-2">Display 2</h1>
  <h1 class="display-3">Display 3</h1>
  <h1 class="display-4">Display 4</h1>
</div>

在 Bootstrap 4 中 HTML < small > 元素用于创建字号更小的颜色更浅的文本

Bootstrap 4 定义 < mark > 为黄色背景及有一定的内边距

Bootstrap 4 定义 HTML < abb r> 元素的样式为显示在文本底部的一条虚线边框

对于引用的内容可以在 < blockquote > 上添加 .blockquote 类

<div class="container">
  <h1>Blockquotes</h1>
  <p>The blockquote element is used to present content from another source:</p>
  <blockquote class="blockquote">
    <p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</p>
    <footer class="blockquote-footer">From WWF's website</footer>
  </blockquote>
</div>

< pre >:保留文本格式

< kbd >用于键盘按键

< code >：用于代码

更多排版类

.font-weight-bold 加粗文本
.font-weight-normal 普通文本
.font-weight-light 更细的文本
.font-italic 斜体文本
.lead 让段落更突出
.small 指定更小文本 (为父元素的 85% )
.text-left 左对齐
.text-center 居中
.text-right 右对齐
.text-justify 设定文本对齐,段落中超出屏幕部分文字自动换行
.text-nowrap 段落中超出屏幕部分不换行
.text-lowercase 设定文本小写
.text-uppercase 设定文本大写
.text-capitalize 设定单词首字母大写
.initialism 显示在 < abbr> 元素中的文本以小号字体展示，且可以将小写字母转换为大写字母
.list-unstyled 移除默认的列表样式，列表项中左对齐 ( < ul> 和 < ol> 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式)
.list-inline 将所有列表项放置同一行
.pre-scrollable 使 < pre> 元素可滚动，代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条

Bootstrap4 颜色

<div class="container">
  <h2>p、a标签使用</h2>
  <p class="text-muted">灰色文本。</p>
  <p class="text-primary">蓝色文本。</p>
  <p class="text-success">绿色文本。</p>
  <p class="text-info">蓝绿色文本。</p>
  <p class="text-warning">黄色文本。</p>
  <p class="text-danger">红色文本。</p>
  <p class="text-secondary">淡灰色文本。</p>
  <p class="text-dark">深灰色文字。</p>
  <p class="text-light">浅灰色文本（白色背景上看不清楚）。</p>
  <p class="text-white">白色文本（白色背景上看不清楚）。</p>
</div>
<div class="container">
  <h2>背景颜色</h2>
  <p class="bg-primary text-white">蓝色背景颜色。</p>
  <p class="bg-success text-white">绿色背景颜色。</p>
  <p class="bg-info text-white">蓝绿色背景颜色。</p>
  <p class="bg-warning text-white">黄色背景颜色</p>
  <p class="bg-danger text-white">红色背景颜色。</p>
  <p class="bg-secondary text-white">淡灰色背景颜色。</p>
  <p class="bg-dark text-white">深灰背景颜色。</p>
  <p class="bg-light text-dark">浅灰背景颜色。</p>
</div>

Bootstrap4 表格

Bootstrap4 通过 .table 类来设置基础表格的样式

通过添加 .table-striped 类，您将在 < tbody> 内的行上看到条纹
.table-bordered 类可以为表格添加边框

.table-hover 类可以为表格的每一行添加鼠标悬停效果（灰色背景）
.table-dark 类可以为表格添加黑色背景(dark可换)

联合使用 .table-dark 和 .table-striped 类可以创建黑色的条纹表格
.table-sm 类用于通过减少内边距来设置较小的表格

.table-responsive 类用于创建响应式表格：在屏幕宽度小于 992px 时会创建水平滚动条，如果可视区域宽度大于 992px 则显示不同效果（没有滚动条）

下表列出了表格颜色类的说明:
.table-primary 蓝色: 指定这是一个重要的操作
.table-success 绿色: 指定这是一个允许执行的操作
.table-danger 红色: 指定这是可以危险的操作
.table-info 浅蓝色: 表示内容已变更
.table-warning 橘色: 表示需要注意的操作
.table-active 灰色: 用于鼠标悬停效果
.table-secondary 灰色: 表示内容不怎么重要
.table-light 浅灰色，可以是表格行的背景
.table-dark 深灰色，可以是表格行的背景

你可以通过以下类设定在指定屏幕宽度下显示滚动条：
类名 屏幕宽度
.table-responsive-sm < 576px
.table-responsive-md < 768px
.table-responsive-lg < 992px
.table-responsive-xl < 1200px

Bootstrap4 图像形状

.rounded 类可以让图片显示圆角效果
.rounded-circle 类可以设置椭圆形图片
.img-thumbnail 类用于设置图片缩略图(图片有边框)
使用 .float-right 类来设置图片右对齐
使用 .float-left 类设置图片左对齐
我们可以通过在 < img> 标签中添加 .img-fluid 类来设置响应式图片。.img-fluid 类设置了 max-width: 100%; height: auto;

Bootstrap4 Jumbotron

Jumbotron（超大屏幕）会创建一个大的灰色背景框，里面可以设置一些特殊的内容和信息。

提示: Jumbotron 里头可以放一些 HTML标签，也可以是 Bootstrap 的元素。

如果你想创建一个没有圆角的全屏幕，可以在 .jumbotron-fluid 类里头的 div添加 .container 或 .container-fluid 类来实现

Bootstrap4 信息提示框

提示框可以使用 .alert 类, 后面加上 .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light 或 .alert-dark 类来实现

我们可以在提示框中的 div 中添加 .alert-dismissible 类，然后在关闭按钮的链接上添加 class=“close” 和 data-dismiss=“alert” 类来设置提示框的关闭操作。

.fade 和 .show 类用于设置提示框在关闭时的淡出和淡入效果

Bootstrap4 按钮

<button type="button" class="btn">基本按钮</button>
<button type="button" class="btn btn-primary">主要按钮</button>
<button type="button" class="btn btn-secondary">次要按扭</button>
<button type="button" class="btn btn-success">成功</button>
<button type="button" class="btn btn-info">信息</button>
<button type="button" class="btn btn-warning">警告</button>
<button type="button" class="btn btn-danger">危险</button>
<button type="button" class="btn btn-dark">黑色</button>
<button type="button" class="btn btn-light">浅色</button>
<button type="button" class="btn btn-link">链接</button>

按钮类可用于 < a>, < button>, 或 < input> 元素上

使用例如 .btn-outline-primary类可以设置边框

使用例如 .btn-lg类可以设置按钮大小

通过添加 .btn-block 类可以设置块级按钮

按钮可设置为激活或者禁止点击的状态。

.active 类可以设置按钮是可用的， disabled 属性可以设置按钮是不可点击的。 注意 < a> 元素不支持 disabled 属性，你可以通过添加 .disabled 类来禁止链接的点击。

Bootstrap 4 中允许我们将按钮放在同一行上。可以在 < div> 元素上添加 .btn-group 类来创建按钮组。
提示: 我们可以使用 .btn-group-lg|sm 类来设置按钮组的大小。

可以使用 .btn-group-vertical 类来创建垂直的按钮组

我们可以在按钮组内设置下拉菜单：

<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
       Sony
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Tablet</a>
      <a class="dropdown-item" href="#">Smartphone</a>
    </div>
  </div>
</div>

拆分按钮下拉菜单：

<div class="btn-group">
  <button type="button" class="btn btn-primary">Sony</button>
  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Tablet</a>
    <a class="dropdown-item" href="#">Smartphone</a>
  </div>
</div>

垂直按钮组及下拉菜单：

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
       Sony
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Tablet</a>
      <a class="dropdown-item" href="#">Smartphone</a>
    </div>
  </div>
</div>

Bootstrap4 徽章（Badges）

徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要将 .badge 类加上带有指定意义的颜色类 (如 .badge-secondary) 添加到 < span> 元素上即可。 徽章可以根据父元素的大小的变化而变化。

使用 .badge-pill 类来设置药丸形状徽章

徽章嵌入到其他元素中：

<button type="button" class="btn btn-primary">
  Messages <span class="badge badge-light">4</span>
</button>

Bootstrap4 进度条

进度条可以显示用户任务的完成过程。
创建一个基本的进度条的步骤如下：
添加一个带有 .progress 类的 < div>。
接着，在上面的 < div> 内，添加一个带有 class .progress-bar 的空的 < div>。
添加一个带有百分比表示的宽度的 style 属性，例如 style=“width:70%” 表示进度条在 70% 的位置。

进度条高度默认为 16px。可以使用 CSS 的 height 属性来修改

可以在进度条内添加文本，如进度的百分比

默认情况下进度条为蓝色，例如添加bg-info可以修改

可以使用 .progress-bar-striped 类来设置条纹进度条

使用 .progress-bar-animated 类可以为进度条添加动画

可以设置多种颜色：

<div class="progress">
  <div class="progress-bar bg-success" style="width:40%">
    Free Space
  </div>
  <div class="progress-bar bg-warning" style="width:10%">
    Warning
  </div>
  <div class="progress-bar bg-danger" style="width:20%">
    Danger
  </div>
</div>

Bootstrap4 分页

网页开发过程，如果碰到内容过多，一般都会做分页处理。
Bootstrap 4 可以很简单的实现分页效果。
要创建一个基本的分页可以在 < ul> 元素上添加 .pagination 类。然后在 < li> 元素上添加 .page-item 类

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">Previous</a></li>
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item"><a class="page-link" href="#">2</a></li>
  <li class="page-item"><a class="page-link" href="#">3</a></li>
  <li cl

当前页可以使用 .active 类来高亮显示

.disabled 类可以设置分页链接不可点击

可以将分页条目设置为不同的大小。
.pagination-lg 类设置大字体的分页条目
.pagination-sm 类设置小字体的分页条目

.breadcrumb 和 .breadcrumb-item 类用于设置面包屑导航

Bootstrap4 列表组

要创建列表组，可以在 < ul> 元素上添加 .list-group 类, 在 < li> 元素上添加 .list-group-item 类

通过添加 .active 类来设置激活状态的列表项

.disabled 类用于设置禁用的列表项

要创建一个链接的列表项，可以将 < ul> 替换为 < div> ， < a> 替换 < li>。如果你想鼠标悬停显示灰色背景就添加.list-group-item-action 类

列表项目的颜色可以通过以下列来设置： .list-group-item-success, list-group-item-secondary, list-group-item-info, list-group-item-warning, .list-group-item-danger, list-group-item-dark 和 list-group-item-light

Bootstrap4 卡片

我们可以通过 Bootstrap4 的 .card 与 .card-body 类来创建一个简单的卡片，实例如下:

<div class="card">
  <div class="card-body">简单的卡片</div>
</div>

Bootstrap4 的卡片类似 Bootstrap 3 中的面板、图片缩略图、well。

.card-header类用于创建卡片的头部样式
.card-body类用于卡片的内容
.card-footer 类用于创建卡片的底部样式

Bootstrap 4 提供了多种卡片的背景颜色类： .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light。

我们可以在头部元素上使用 .card-title 类来设置卡片的标题 。 .card-text 类用于设置卡片正文的内容。 .card-link 类用于给链接设置颜色。

<div class="card">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Some example text. Some example text.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

我们可以给 添加 .card-img-top（图片在文字上方） 或 .card-img-bottom（图片在文字下方 来设置图片卡片

如果图片要设置为背景，可以使用 .card-img-overlay 类

Bootstrap4 下拉菜单

Bootstrap4 下拉菜单依赖于 popper.min.js。
下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    Dropdown button
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Link 1</a>
    <a class="dropdown-item" href="#">Link 2</a>
    <a class="dropdown-item" href="#">Link 3</a>
  </div>
</div>

实例解析
我们也可以在 < a> 标签中使用
.dropdown 类用来指定一个下拉菜单。

我们可以使用一个按钮或链接来打开下拉菜单， 按钮或链接需要添加 .dropdown-toggle 和 data-toggle=“dropdown” 属性。

< div> 元素上添加 .dropdown-menu 类来设置实际下拉菜单，然后在下拉菜单的选项中添加 .dropdown-item 类。

.dropdown-divider 类用于在下拉菜单中创建一个水平的分割线

.dropdown-header 类用于在下拉菜单中添加标题

.active 类会让下拉菜单的选项高亮显示 (添加蓝色背景)。

如果要禁用下拉菜单的选项，可以使用.disabled 类。

如果我们想让下拉菜单右对齐，可以在元素上的 .dropdown-menu 类后添加 .dropdown-menu-right 类。

下拉菜单弹出方向默认为向下，当然我们也可以设置不同的方向。

下拉菜单向右弹出，可以在 div 元素上添加 “dropright” 类
上拉菜单向上弹出，可以在 div 元素上添加 “dropup” 类
下拉菜单向下弹出，可以在 div 元素上添加 “dropleft” 类

Bootstrap4 折叠

Bootstrap4 折叠可以很容易的实现内容的显示与隐藏。

<button data-toggle="collapse" data-target="#demo">折叠</button>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>

实例解析
.collapse 类用于指定一个折叠元素 (实例中的 < div>); 点击按钮后会在隐藏与显示之间切换。

控制内容的隐藏与显示，需要在 < a> 或 < button> 元素上添加 data-toggle=“collapse” 属性。 data-target="#id" 属性是对应折叠的内容 (< div id=“demo”>)。

注意: < a> 元素上你可以使用 href 属性来代替 data-target 属性

默认情况下折叠的内容是隐藏的，你可以添加 .show 类让内容默认显示

以下实例通过扩展卡片组件来显示简单的手风琴。
注意: 使用 data-parent 属性来确保所有的折叠元素在指定的父元素下，这样就能实现在一个折叠选项显示时其他选项就隐藏。

<div id="accordion">
<div class="card">
  <div class="card-header">
    <a class="card-link" data-toggle="collapse" href="#collapseOne">
      选项一
    </a>
  </div>
  <div id="collapseOne" class="collapse show" data-parent="#accordion">
    <div class="card-body">
      #1 内容
    </div>
  </div>
</div>
<div class="card">
  <div class="card-header">
    <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
    选项二
  </a>
  </div>
  <div id="collapseTwo" class="collapse" data-parent="#accordion">
    <div class="card-body">
      #2 内容
    </div>
  </div>
</div>
<div class="card">
  <div class="card-header">
    <a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
      选项三
    </a>
  </div>
  <div id="collapseThree" class="collapse" data-parent="#accordion">
    <div class="card-body">
      #3 内容
    </div>
  </div>
</div>
</div>

Bootstrap4 导航

如果你想创建一个简单的水平导航栏，可以在 < ul> 元素上添加 .nav类，在每个 li> 选项上添加 .nav-item 类，在每个链接上添加 .nav-link 类

.justify-content-center 类设置导航居中显示， .justify-content-end 类设置导航右对齐。

.flex-column 类用于创建垂直导航

使用 .nav-tabs 类可以将导航转化为选项卡。然后对于选中的选项使用 .active 类来标记。

.nav-pills 类可以将导航项设置成胶囊形状。

.nav-justified 类可以设置导航项齐行等宽显示。

如果你要设置选项卡是动态可切换的，可以在每个链接上添加 data-toggle=“tab” 属性。 然后在每个选项对应的内容的上添加 .tab-pane 类。
如果你希望有淡入效果可以在 .tab-pane 后添加 .fade类:

<!-- Nav tabs -->
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
  </li>
</ul>
 
<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active container" id="home">...</div>
  <div class="tab-pane container" id="menu1">...</div>
  <div class="tab-pane container" id="menu2">...</div>
</div>

Bootstrap4 导航栏

导航栏一般放在页面的顶部。

我们可以使用 .navbar 类来创建一个标准的导航栏，后面紧跟: .navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。

导航栏上的选项可以使用 < ul> 元素并添加 class=“navbar-nav” 类。 然后在 < li> 元素上添加 .nav-item 类， < a> 元素上使用 .nav-link 类

<!-- 小屏幕上水平导航栏会切换为垂直的 -->
<nav class="navbar navbar-expand-sm bg-light">
 
  <!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 3</a>
    </li>
  </ul>
 
</nav>

通过删除 .navbar-expand-xl|lg|md|sm 类来创建垂直导航栏

可以使用以下类来创建不同颜色导航栏：.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light)。

提示: 对于暗色背景需要设置文本颜色为浅色的，对于浅色背景需要设置文本颜色为深色的。

激活和禁用状态: 可以在 < a> 元素上添加 .active 类来高亮显示选中的选项。 .disabled 类用于设置该链接是不可点击的。

.navbar-brand 类用于高亮显示品牌/Logo

如果使用图片，可以使用 .navbar-brand 类来设置图片自适应导航栏。

通常，小屏幕上我们都会折叠导航栏，通过点击来显示导航选项。

要创建折叠导航栏，可以在按钮上添加 class=“navbar-toggler”, data-toggle=“collapse” 与 data-target="#thetarget" 类。然后在设置了 class=“collapse navbar-collapse” 类的 div 上包裹导航内容（链接）, div 元素上的 id 匹配按钮 data-target 的上指定的 id

导航栏的表单 元素使用 class=“form-inline” 类来排版输入框与按钮

你也可以使用其他的输入框类，如 .input-group-addon 类用于在输入框前添加小标签。

使用 .navbar-text 类来设置导航栏上非链接文本，可以保证水平对齐，颜色与内边距一样。

导航栏可以固定在头部或者底部。
我们使用 .fixed-top 类来实现导航栏的固定
.fixed-bottom 类用于设置导航栏固定在底部

Bootstrap4 面包屑导航（Breadcrumb）

Bootstrap 中的面包屑导航是一个简单的带有 .breadcrumb class 的无序列表。分隔符会通过 CSS（bootstrap.min.css）中的 ::before 和 content 来添加

<ol class="breadcrumb">
  <li class="breadcrumb-item active">Home</li>
</ol>
<ol class="breadcrumb">
  <li class="breadcrumb-item"><a href="#">Home</a></li>
  <li class="breadcrumb-item active">Library</li>
</ol>
<ol class="breadcrumb">
  <li class="breadcrumb-item"><a href="#">Home</a></li>
  <li class="breadcrumb-item"><a href="#">Library</a></li>
  <li class="breadcrumb-item active">Data</li>
</ol>

我们也可以不用列表形式：

<nav class="breadcrumb">
  <a class="breadcrumb-item" href="#">Home</a>
  <a class="breadcrumb-item" href="#">Library</a>
  <a class="breadcrumb-item" href="#">Data</a>
  <span class="breadcrumb-item active">Bootstrap</span>
</nav>

Bootstrap4 表单

在本章中，我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。

表单元素 , , 和 elements 在使用 .form-control 类的情况下，宽度都是设置为 100%。

以下实例使用两个输入框，一个复选框，一个提交按钮来创建堆叠表单：

<form>
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="form-check">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

所有内联表单中的元素都是左对齐的。

注意：在屏幕宽度小于 576px 时为垂直堆叠，如果屏幕宽度大于等于576px时表单元素才会显示在同一个水平线上。

内联表单需要在 元素上添加 .form-inline类。

以下实例使用两个输入框，一个复选框，一个提交按钮来创建内联表单：

<form class="form-inline">
  <label for="email">Email address:</label>
  <input type="email" class="form-control" id="email">
  <label for="pwd">Password:</label>
  <input type="password" class="form-control" id="pwd">
  <div class="form-check">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Bootstrap4 支持以下表单控件：
input
textarea
checkbox
radio
select

Bootstrap Input
Bootstrap 支持所有的 HTML5 输入类型: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, 以及 color。

注意：如果 input 的 type 属性未正确声明，输入框的样式将不会显示。

<div class="form-group">
  <label for="usr">用户名:</label>
  <input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
  <label for="pwd">密码:</label>
  <input type="password" class="form-control" id="pwd">
</div>

Bootstrap textarea

<div class="form-group">
  <label for="comment">评论:</label>
  <textarea class="form-control" rows="5" id="comment"></textarea>
</div>

Bootstrap 复选框(checkbox)

复选框用于让用户从一系列预设置的选项中进行选择，可以选一个或多个。

以下实例包含了三个选项。最后一个是禁用的：

<div class="form-check">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="">Option 1
  </label>
</div>
<div class="form-check">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="">Option 2
  </label>
</div>
<div class="form-check disabled">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="" disabled>Option 3
  </label>
</div>

使用 .form-check-inline 类可以让选项显示在同一行上

Bootstrap 单选框(Radio)

单选框用于让用户从一系列预设置的选项中进行选择，只能选一个。

以下实例包含了三个选项。最后一个是禁用的：

<div class="radio">
  <label><input type="radio" name="optradio">Option 1</label>
</div>
<div class="radio">
  <label><input type="radio" name="optradio">Option 2</label>
</div>
<div class="radio disabled">
  <label><input type="radio" name="optradio" disabled>Option 3</label>
</div>

使用 .radio-inline 类可以让选项显示在同一行上

Bootstrap select 下拉菜单

当您想让用户从多个选项中进行选择，但是默认情况下只能选择一个选项时，则使用选择框。

以下实例包含了两个下拉菜单：

<div class="form-group">
  <label for="sel1">下拉菜单:</label>
  <select class="form-control" id="sel1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
</div>

Bootstrap4 输入框组

我们可以使用 .input-group 类来向表单输入框中添加更多的样式，如图标、文本或者按钮。

使用 .input-group-prepend 类可以在输入框的的前面添加文本信息， .input-group-append 类添加在输入框的后面。

最后，我们还需要使用 .input-group-text 类来设置文本的样式。

<form>
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text">@</span>
    </div>
    <input type="text" class="form-control" placeholder="Username">
  </div>
 
  <div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="Your Email">
    <div class="input-group-append">
      <span class="input-group-text">@runoob.com</span>
    </div>
  </div>
</form>

使用 .input-group-sm 类来设置小的输入框， .input-group-lg 类设置大的输入框

输入框添加按钮组

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button">Basic Button</button> 
  </div>
  <input type="text" class="form-control" placeholder="Some text">
</div>
 
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Search">
  <div class="input-group-append">
    <button class="btn btn-success" type="submit">Go</button> 
  </div>
</div>
 
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Something clever..">
  <div class="input-group-append">
    <button class="btn btn-primary" type="button">OK</button> 
    <button class="btn btn-danger" type="button">Cancel</button> 
  </div>
</div>

设置下拉菜单
输入框中添加下拉菜单不需要使用 .dropdown 类。

<div class="input-group mt-3 mb-3">
  <div class="input-group-prepend">
    <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown">
      选择网站
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="https://www.google.com">GOOGLE</a>
      <a class="dropdown-item" href="https://www.runoob.com">RUNOOB</a>
      <a class="dropdown-item" href="https://www.taobao.com">TAOBAO</a>
    </div>
  </div>
  <input type="text" class="form-control" placeholder="网站地址">
</div>

输入框组标签
在输入框组通过在输入框组外围的 label 来设置标签，标签的 for 属性需要与输入框组的 id 对应，点击标签后可以聚焦输入框：

<label for="demo">Write your email here:</label>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Email" id="demo" name="email">
  <div class="input-group-append">
    <span class="input-group-text">@runoob.com</span>
  </div>
</div>

如果要自定义一个复选框，可以设置

为父元素，类为 .custom-control 和 .custom-checkbox，复选框作为子元素放在该

里头，然后复选框设置为 type=“checkbox”，类为 .custom-control-input。

复选框的文本使用 label 标签，标签使用 .custom-control-label 类，label 的 for 属性值需要匹配复选框的 id。

如果要自定义一个单选框，可以设置

为父元素，类为 .custom-control 和 .custom-radio，单选框作为子元素放在该

里头，然后单选框设置为 type=“radio”，类为 .custom-control-input。

单选框的文本使用 label 标签，标签使用 .custom-control-label 类，label 的 for 属性值需要匹配单选框的 id。

我们可以在外部元素上使用 .custom-control-inline 类来包裹自定义表单控件，这样自定义表单控件就能显示在同一行

创建自定义选择菜单可以在 元素上添加 .custom-select 类

如果我们要设置自定义选择菜单大小，可以使用 .custom-select-sm、.custom-select-lg 来设置它们的大小

我们可以在 input 为 type=“range” 的输入框中添加 .custom-range 类来设置自定义滑块控件

我们可以在父元素添加 .custom-file 类，然后在 input 设置为 type=“file” 并添加 .custom-file-input:

上传控件的文本使用 label 标签，标签使用 .custom-file-label 类，label 的 for 属性值需要匹配复选框的 id。

Bootstrap4 轮播

以下实例创建了一个简单的图片轮播效果 ：

<div id="demo" class="carousel slide" data-ride="carousel">
 
  <!-- 指示符 -->
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>
 
  <!-- 轮播图片 -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="1.jpg">
    </div>
    <div class="carousel-item">
      <img src="2.jpg">
    </div>
    <div class="carousel-item">
      <img src="3.jpg">
    </div>
  </div>
 
  <!-- 左右切换按钮 -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
 
</div>

在每个 < div class=“carousel-item”> 内添加 < div class=“carousel-caption”> 来设置轮播图片的描述文本

.carousel 创建一个轮播

.carousel-indicators 为轮播添加一个指示符，就是轮播图底下的一个个小点，轮播的过程可以显示目前是第几张图。

.carousel-inner 添加要切换的图片

.carousel-item 指定每个图片的内容

.carousel-control-prev 添加左侧的按钮，点击会返回上一张。

.carousel-control-next 添加右侧按钮，点击会切换到下一张。

.carousel-control-prev-icon 与 .carousel-control-prev 一起使用，设置左侧的按钮

.carousel-control-next-icon 与 .carousel-control-next 一起使用，设置右侧的按钮

.slide 切换图片的过渡和动画效果，如果你不需要这样的效果，可以删除这个类。

Bootstrap4 模态框

模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息交互等。
以下实例创建了一个简单的模态框效果 ：

<!-- 按钮：用于打开模态框 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  打开模态框
</button>
<!-- 模态框 -->
<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- 模态框头部 -->
      <div class="modal-header">
        <h4 class="modal-title">模态框头部</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <!-- 模态框主体 -->
      <div class="modal-body">
        模态框内容..
      </div>
      <!-- 模态框底部 -->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

我们可以通过添加 .modal-sm 类来创建一个小模态框，.modal-lg 类可以创建一个大模态框。尺寸类放在 < div>元素的 .modal-dialog 类后

Bootstrap4 提示框

提示框是一个小小的弹窗，在鼠标移动到元素上显示，鼠标移到元素外就消失。

通过向元素添加 data-toggle=“tooltip” 来来创建提示框。

title 属性的内容为提示框显示的内容

<a href="#" data-toggle="tooltip" title="我是提示内容!">鼠标移动到我这</a>

注意: 提示框要写在 jQuery 的初始化代码里: 然后在指定的元素上调用 tooltip() 方法。

以下实例可以在文档的任何地方使用提示框：

<div class="container">
  <h3>提示框实例</h3><br>
  <a href="#" data-toggle="tooltip" title="我是提示内容!">鼠标移动到我这</a>
</div>

<script>
$(document).ready(function(){
     
    $('[data-toggle="tooltip"]').tooltip();   
});
</script>

默认情况下提示框显示在元素上方。

可以使用 data-placement 属性来设定提示框显示的方向: top, bottom, left 或 right:

提示内容添加 HTML 标签，设置 data-html=“true”，内容放在 title 标签里头:

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="Tooltip with HTML">
  Tooltip with HTML
</button>

禁用按钮：

<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

Bootstrap4 弹出框

弹出框控件类似于提示框，它在鼠标点击到元素后显示，与提示框不同的是它可以显示更多的内容。

通过向元素添加 data-toggle=“popover” 来来创建弹出框。

title 属性的内容为弹出框的标题，data-content 属性显示了弹出框的文本内容

<a href="#" data-toggle="popover" title="弹出框标题" data-content="弹出框内容">多次点我</a>

弹出框要写在 jQuery 的初始化代码里: 然后在指定的元素上调用 popover() 方法。

默认情况下弹出框显示在元素右侧。

可以使用 data-placement 属性来设定弹出框显示的方向: top, bottom, left 或 right

默认情况下，弹出框在再次点击指定元素后就会关闭，你可以使用 data-trigger=“focus” 属性来设置在鼠标点击元素外部区域来关闭弹出框

提示:如果你想实现在鼠标移动到元素上显示，移除后消失的效果，可以使用 data-trigger 属性，并设置值为 “hover”

Bootstrap 滚动监听(Scrollspy)

滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动。

<body data-spy="scroll" data-target=".navbar" data-offset="50">

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">  
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#section1">Section 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#section2">Section 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#section3">Section 3</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
        Section 4
      </a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#section41">Link 1</a>
        <a class="dropdown-item" href="#section42">Link 2</a>
      </div>
    </li>
  </ul>
</nav>

<div id="section1" class="container-fluid bg-success" style="padding-top:70px;padding-bottom:70px">
  <h1>Section 1</h1>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section2" class="container-fluid bg-warning" style="padding-top:70px;padding-bottom:70px">
  <h1>Section 2</h1>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section3" class="container-fluid bg-secondary" style="padding-top:70px;padding-bottom:70px">
  <h1>Section 3</h1>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section41" class="container-fluid bg-danger" style="padding-top:70px;padding-bottom:70px">
  <h1>Section 4 Submenu 1</h1>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section42" class="container-fluid bg-info" style="padding-top:70px;padding-bottom:70px">
  <h1>Section 4 Submenu 2</h1>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>

</body>

向您想要监听的元素（通常是 body）添加 data-spy=“scroll” 。

然后添加 data-target 属性，它的值为导航栏的 id 或 class (.navbar)。这样就可以联系上可滚动区域。

注意可滚动项元素上的 id （< div id=“section1”>） 必须匹配导航栏上的链接选项 （< a href="#section1">)。

可选项data-offset 属性用于计算滚动位置时，距离顶部的偏移像素。 默认为 10 px。

设置相对定位: 使用 data-spy=“scroll” 的元素需要将其 CSS position 属性设置为 “relative” 才能起作用。

<style>
  body {
     
      position: relative; 
  }
</style>

Bootstrap4 小工具

边框

使用 border 类可以添加或移除边框:

<span class="border"></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-right-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-left-0"></span>

Bootstrap4 提供了一些类来设置边框颜色:

<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>

使用rounded 类可以添加圆角边框:

<span class="rounded"></span>
<span class="rounded-top"></span>
<span class="rounded-right"></span>
<span class="rounded-bottom"></span>
<span class="rounded-left"></span>
<span class="rounded-circle"></span>
<span class="rounded-0"></span>

浮动
.float-right 类用于设置元素右浮动， .float-left 设置元素左浮动, .clearfix 类用于清除浮动

响应式浮动
我们看可以设置浮动 (.float-*-left | right - * 为 sm, md, lg 或 xl)的方向依赖于屏幕的大小

居中对齐
使用 .mx-auto 类来设置居中对齐

元素上使用 w-* 类 (.w-25, .w-50, .w-75, .w-100, .mw-100) 来设置宽度

元素上使用 h-* 类 (.h-25, .h-50, .h-75, .h-100, .mh-100) 来设置高度

Bootstrap 4 Flex（弹性）布局

Bootstrap 3 与 Bootstrap 4 最大的区别就是 Bootstrap 4 使用弹性盒子来布局，而不是使用浮动来布局。

弹性盒子是 CSS3 的一种新的布局模式，更适合响应式的设计

注意：IE9 及其以下版本不支持弹性盒子，所以如果你需要兼容 IE8-9，请使用 Bootstrap 3。

以下实例使用 d-flex 类创建一个弹性盒子容器，并设置三个弹性子元素：

<div class="d-flex p-3 bg-secondary text-white">
  <div class="p-2 bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 bg-primary">Flex item 3</div>
</div>

创建显示在同一行上的弹性盒子容器可以使用 d-inline-flex 类

.flex-row 可以设置弹性子元素水平显示，这是默认的。

使用 .flex-row-reverse 类用于设置右对齐显示，即与 .flex-row 方向相反。

.flex-column 类用于设置弹性子元素垂直方向显示, .flex-column-reverse 用于翻转子元素

.justify-content-* 类用于修改弹性子元素的排列方式，* 号允许的值有：start (默认), end, center, between 或 around

.flex-fill 类强制设置各个弹性子元素的宽度是一样的

.flex-grow-1 用于设置子元素使用剩下的空间。以下实例中前面两个子元素只设置了它们所需要的空间，最后一个获取剩余空间。

提示: 使用 .flex-shrink-1 用于设置子元素的收缩规则。

.order 类可以设置弹性子元素的排序，从 .order-1 到 .order-12，数字越低权重越高( .order-1 排在 .order-2 之前)

.mr-auto 类可以设置子元素右外边距为 auto，即 margin-right: auto!important;，.ml-auto 类可以设置子元素左外边距为 auto，即 margin-left: auto!important

弹性容器中包裹子元素可以使用以下三个类： .flex-nowrap (默认), .flex-wrap 或 .flex-wrap-reverse。设置 flex 容器是单行或者多行。

我们可以使用 .align-content-* 来控制在垂直方向上如何去堆叠子元素，包含的值有：.align-content-start (默认), .align-content-end, .align-content-center, .align-content-between, .align-content-around 和 .align-content-stretch。
这些类在只有一行的弹性子元素中是无效的。

如果要设置单行的子元素对齐可以使用 .align-items-* 类来控制，包含的值有：.align-items-start, .align-items-end, .align-items-center, .align-items-baseline, 和 .align-items-stretch (默认)。

如果要设置指定子元素对齐可以使用 .align-self-* 类来控制，包含的值有：.align-self-start, .align-self-end, .align-self-center, .align-self-baseline, 和 .align-self-stretch (默认)。

我们可以根据不同的设备，设置 flex 类，从而实现页面响应式布局，以下表格中的 * 号可以的值有：sm, md, lg 或 xl, 对应的是小型设备、中型设备，大型设备，超大型设备。

弹性容器

.d- * -flex 根据不同的屏幕设备创建弹性盒子容器

.d-*-inline-flex 根据不同的屏幕设备创建行内弹性盒子容器

方向

.flex-*-row 根据不同的屏幕设备在水平方向显示弹性子元素

.flex- * -row-reverse 根据不同的屏幕设备在水平方向显示弹性子元素，且右对齐

.flex-*-column 根据不同的屏幕设备在垂直方向显示弹性子元素

.flex- * -column-reverse 根据不同的屏幕设备在垂直方向显示弹性子元素，且方向相反

内容对齐

.justify-content- * -start 根据不同屏幕设备在开始位置显示弹性子元素 (左对齐)
.justify-content- * -end 根据不同屏幕设备在尾部显示弹性子元素 (右对齐)
.justify-content- * -center 根据不同屏幕设备在 flex 容器中居中显示子元素
.justify-content- * -between 根据不同屏幕设备使用 “between” 显示弹性子元素
.justify-content- * -around 根据不同屏幕设备使用 “around” 显示弹性子元素

等宽

.flex-*-fill 根据不同的屏幕设备强制等宽

扩展

.flex-*-grow-0 不同的屏幕设备不设置扩展

.flex-*-grow-1 不同的屏幕设备设置扩展

收缩

.flex-*-shrink-0 不同的屏幕设备不设置收缩

.flex-*-shrink-1 不同的屏幕设备设置收缩

包裹

.flex-*-nowrap 不同的屏幕设备不设置包裹元素

.flex-*-wrap 不同的屏幕设备设置包裹元素

.flex-*-wrap-reverse 不同的屏幕设备反转包裹元素

内容排列

.align-content-*-start 根据不同屏幕设备在起始位置堆叠元素

.align-content-*-end 根据不同屏幕设备在结束位置堆叠元素

.align-content-*-center 根据不同屏幕设备在中间位置堆叠元素

.align-content-*-around根据不同屏幕设备，使用 “around” 堆叠元素

.align-content-*-stretch 根据不同屏幕设备，通过伸展元素来堆叠

元素对齐

.align-items-*-start 根据不同屏幕设备，让元素在头部显示在同一行。

.align-items-*-end 根据不同屏幕设备，让元素在尾部显示在同一行。

.align-items-*-center 根据不同屏幕设备，让元素在中间位置显示在同一行。

.align-items-*-baseline 根据不同屏幕设备，让元素在基线上显示在同一行。

.align-items-*-stretch 根据不同屏幕设备，让元素延展高度并显示在同一行。

单独一个子元素的对齐方式

.align-self-*-start 据不同屏幕设备，让单独一个子元素显示在头部。

.align-self-*-end 据不同屏幕设备，让单独一个子元素显示在尾部

.align-self-*-center 据不同屏幕设备，让单独一个子元素显示在居中位置

.align-self-*-baseline 据不同屏幕设备，让单独一个子元素显示在基线位置

.align-self-*-stretch 据不同屏幕设备，延展一个单独子元素

Bootstrap 4 多媒体对象

Bootstrap 提供了很好的方式来处理多媒体对象（图片或视频）和内容的布局。应用场景有博客评论、微博等

要创建一个多媒体对象，可以在容器元素上添加 .media 类，然后将多媒体内容放到子容器上，子容器需要添加 .media-body 类，然后添加外边距，内边距等效果

多媒体对象可以多个嵌套（一个多媒体对象中包含另外一个多媒体对象）

要嵌套多媒体对象，可以把新的 .media 容器放到 .media-body 容器中

如果你想将头像图片显示在右侧，可以在 .media-body 容器后添加图片

我们可以使用 align-self-* 相关类来设置多媒体对象的图片显示位置