bootstrap 4 实用工具记录

页面

必须 HTML5 doctype 声明：<!DOCTYPE html>

移动设备优先:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

width=device-width 表示宽度是设备屏幕的宽度。
initial-scale=1 表示初始的缩放比例。
shrink-to-fit=no 自动适应手机屏幕的宽度。

Bootstrap 4 需要一个容器元素来包裹网站的内容.container与.container-fluid

网格系统

移动优先的响应式网格系统，12列的布局

Bootstrap 4 网格系统有以下 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 的一大优势是，没有指定宽度的网格列将自动设置为等宽与等高列。

.col:自动布局 .col-*：所有设备都支持，指定列占12份中多少份 .col-*-*：在指定设备中支持，占12份中多少份（sm, md, lg 或 xl）

偏移列通过 offset-*-* 类来设置

排版

Bootstrap4 默认的 font-size 为 16px, line-height 为 1.5。

默认的 font-family 为 "Helvetica Neue", Helvetica, Arial, sans-serif。

很多元素使用margin-top: 0 、 margin-bottom: 1rem (16px)

标题：h1：2.5rem 40px，h2：2rem 32px，h3：1.75rem 28px，h4：1.5rem 24px，h5：1.25em 20px，h6：1rem 16px；Display 标题类：display-1, .display-2, .display-3, .display-4。

<small>、<mark>、<abbr>、<blockquote>、<dl>、<code>、<kbd>、<pre>。

类名	描述
`.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轴出现滚动条

颜色设置

颜色类:

text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark and .text-light

背景颜色类:

.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light

背景颜色不会设置文本的颜色，在一些实例中你需要与 .text-* 类一起使用

表格设置

使用.table类来设置最简单的表格

条纹表格.table-striped

.table-bordered类可以为表格添加边框。

.table-hover 类可以为表格的每一行添加鼠标悬停效果

.table-dark 类可以为表格添加黑色背景

.table-sm 类用于通过减少内边距来设置较小的表格

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

类名	屏幕宽度
.table-responsive-sm	< 576px
.table-responsive-md	< 768px
.table-responsive-lg	< 992px
.table-responsive-xl	< 1200px

联合使用 .table-dark 和 .table-striped 类可以创建黑色的条纹

指定颜色类可以为表格的行或者单元格设置颜色:

table-primar、table-success、table-danger、table-info、table-warning、table-active、table-secondary、table-light、当然也可以联合使用，如<tr class="table-dark text-dark">

图片设置

img-rounded：让图片显示圆角效果

img-circle：设置椭圆形图片

img-thumbnail：用于设置图片缩略图(图片有边框)

.float-right 类来设置图片右对齐

.float-left 类设置图片左对齐:

.img-fluid 类来设置响应式图片max-width: 100%; height: auto;

超大屏幕Jumbotron

Bootstrap4支持的一个Jumbotron（超大屏幕）特性，以增加标题的大小，并为页面内容添加更多的外边距<div class="jumbotron">

.jumbotron-fluid 类创建一个没有圆角的全屏幕。

信息提示框

提示框使用 .alert 类, 后面加上 .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light , .alert-dark 类来实现颜色的变化

提示框中在链接的标签上添加 .alert-link 类来设置匹配提示框颜色的链接

提示框中的 div 中添加 .alert-dismissable 类，然后在关闭按钮的链接上添加 class="close" 和 data-dismiss="alert" 类来设置提示框的关闭操作。

可以在提示框元素上加上.fade 和 .show类用于设置提示框在关闭时的淡出和淡入效果。

//_alert.scss
.alert {}
.alert-heading {}
.alert-link {}
.alert-dismissible {
  .close {}
}
@each $color, $value in $theme-colors {
  .alert-#{$color} {}
}

按钮与按钮组

Bootstrap4上提供了不同样式的按钮，.btn按钮类可用于 <a>, <button>, 或 <input> 元素上， .btn-primary、.btn-secondary、.btn-success、.btn-info、.btn-warning、.btn-danger、.btn-dark、.btn-light、.btn-link。

.btn-outline-*设置一个按钮:active时的边框,，btn-outline-primary,btn-outline-success等等。

.btn-lg类可以设置大号按钮，.btn-sm类可以设置小号按钮

.btn-block 类可以设置块级按钮

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

在 <div> 元素上添加 .btn-group 类来创建按钮组。

可以使用 .btn-group-lg、btn-group-sm、btn-group-xs 类来设置按钮组的大小

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

按钮组里实现下拉菜单：按钮上添加.dropdown-toggle类，并添加data-toggle="dropdown"，然后按钮后紧跟.dropdown-menu元素以及下面的.dropdown-item下拉列表。

<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>

在下接按钮里添加.dropdown-toggle-split实现按钮后单独拆分的下拉效果。

按钮

.btn {
  &:focus,
  &.focus {}
  &.disabled,
  &:disabled {}
  &:not(:disabled):not(.disabled) {}
  &:not(:disabled):not(.disabled):active,
  &:not(:disabled):not(.disabled).active {
    &:focus {}
  }
}
a.btn.disabled,fieldset:disabled a.btn {}
@each $color, $value in $theme-colors {
  .btn-#{$color} {}
}

@each $color, $value in $theme-colors {
  .btn-outline-#{$color} {}
}
.btn-link {
  &:focus,
  &.focus {}
  &:disabled,  &.disabled {}
}
.btn-lg {}
.btn-sm {}
.btn-block {
  + .btn-block {}
}
input[type="submit"],input[type="reset"],input[type="button"] {
  &.btn-block {}
}

按钮组

.btn-group,.btn-group-vertical {
  > .btn {
    &:focus,
    &:active,
    &.active {}
  }
  .btn + .btn,
  .btn + .btn-group,
  .btn-group + .btn,
  .btn-group + .btn-group {}
}
.btn-toolbar {
  .input-group {}
}
.btn-group {
  > .btn:first-child {}
  > .btn:not(:last-child):not(.dropdown-toggle),
  > .btn-group:not(:last-child) > .btn {}
  > .btn:not(:first-child),  > .btn-group:not(:first-child) > .btn {}
}

.btn-group-sm > .btn {}
.btn-group-lg > .btn {}

.dropdown-toggle-split {
  &::after,
  .dropup &::after,
  .dropright &::after {}
  .dropleft &::before {}
}
.btn-sm + .dropdown-toggle-split {}
.btn-lg + .dropdown-toggle-split {}
.btn-group.show .dropdown-toggle {
  &.btn-link {}
}

.btn-group-vertical {
  .btn,
  .btn-group { }
  > .btn + .btn,
  > .btn + .btn-group,
  > .btn-group + .btn,
  > .btn-group + .btn-group { }
  > .btn:not(:last-child):not(.dropdown-toggle),
  > .btn-group:not(:last-child) > .btn {}
  > .btn:not(:first-child),
  > .btn-group:not(:first-child) > .btn {}
}

.btn-group-toggle {
  > .btn,
  > .btn-group > .btn {
    input[type="radio"],
    input[type="checkbox"] {}
  }
}

徽章

.badge 类加上带有指定意义的颜色类 (如 .badge-secondary) 添加到 <span> 元素上即可。

.badge-primary、badge-secondary、badge-success、badge-danger、badge-warning、badge-info、badge-light、badge-dark

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

//_badge.scss
.badge {
  &:empty {}
}
.btn .badge {}
.badge-pill {}
@each $color, $value in $theme-colors {
  .badge-#{$color} {}
}

进度条

添加一个带有 .progress 类的 <div>。
接着，在上面的 <div> 内，添加一个带有 .progress-bar 的空的 <div>。
添加一个带有百分比表示的宽度的 style 属性，例如 style="width:70%"表示进度条在 70% 的位置，高度默认为 16px，可以在style里指定。

进度条默认是蓝色,可以通过bg-*设置。bg-success、bg-info、bg-warning、bg-danger等。

.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>

分页

通过.pagination类和.page-item来实现分页功能。

可以在<ul> 元素上添加 .pagination 类。然后在 <li> 元素上添加 .page-item 类，在<li>里添加<a>的类为.page-link。当前分页的<li>使用.active类高亮。

当前分页的<li>使用.disabled 类可以设置分页链接不可点击

.pagination-lg 类设置大字体的分页条目，.pagination-sm 类设置小字体的分页条目

面包屑

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

.breadcrumb {}
.breadcrumb-item {
  + .breadcrumb-item {
    &::before {}
  }
  + .breadcrumb-item:hover::before {}
  + .breadcrumb-item:hover::before {}
  &.active {}
}

列表组

要创建列表组，可以在 <ul> 元素上添加 .list-group 类, 在 <li> 元素上添加 .list-group-item 类。在 <li> 元素上添加 .active 类来设置激活状态的列表项，添加.disabled 类用于设置禁用的列表项。

创建一个链接的列表项，可以将<div> 替换 <ul> ， <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 的 .card 与 .card-body 类来创建一个简单的卡片

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

卡片的背景颜色类： .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light

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

<img> 添加 .card-img-top（图片在文字上方）或 .card-img-bottom（图片在文字下方来设置图片卡片：

图片要在文字的下面，可以使用 .card-img-overlay 类来设置文字层。

.card {
  > hr {}
  > .list-group:first-child {
    .list-group-item:first-child {}
  }

  > .list-group:last-child {
    .list-group-item:last-child {}
  }
}

.card-body {}
.card-title {}
.card-subtitle {}
.card-text:last-child {}
.card-link {
  + .card-link {}
}
.card-header {
  &:first-child {}
  + .list-group {}
  }
}
.card-footer {
  &:last-child {}
}
.card-header-tabs {}
.card-header-pills {}
.card-img-overlay {}
.card-img {}
.card-img-top {}
.card-img-bottom {}

.card-deck {
  .card {}
  @include media-breakpoint-up(sm) {
    .card { }
  }
}

.card-group {
  > .card {}
  @include media-breakpoint-up(sm) {
    > .card {
      + .card {}
      @if $enable-rounded {
        &:first-child {
          .card-img-top,
          .card-header {}
          .card-img-bottom,
          .card-footer {}
        }
        &:last-child {
          .card-img-top,
          .card-header {}
          .card-img-bottom,
          .card-footer {}
        }
        &:only-child {
          .card-img-top,
          .card-header {}
          .card-img-bottom,
          .card-footer {}
        }

        &:not(:first-child):not(:last-child):not(:only-child) {
          .card-img-top,
          .card-img-bottom,
          .card-header,
          .card-footer {}
        }
      }
    }
  }
}
.card-columns {
  .card {}

  @include media-breakpoint-up(sm) {
    .card {}
  }
}
.accordion {
  .card:not(:first-of-type):not(:last-of-type) { }
  .card:not(:first-of-type) {
    .card-header:first-child {}
  }
  .card:first-of-type { }
  .card:last-of-type {}
}

下拉菜单

.dropdown 类用来指定一个下拉菜单。

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

.dropdown-menu置实际下拉菜单内容，然后在下拉菜单的选项中添加 .dropdown-item 类。

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

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

.active 类会让下拉菜单的选项高亮显示

.disabled 类禁用下拉菜单的选项

在元素上的 .dropdown-menu 类后添加 .dropdown-menu-right 类让下拉菜单右对齐

向上弹出的下拉菜单将 <div> 元素的 class="dropdown" 替换为 "dropup"

按钮中设计下拉菜单用.btn-group类

折叠板

.collapse 类用于指定一个折叠元素

<a> 或 <button> 元素上添加 data-toggle="collapse" 属性来实现。data-target="#id" 属性是对应折叠的内容 (<div id="demo">)，<a> 元素上你可以使用 href 属性来代替 data-target 属性(href="#demo")

<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">简单的折叠</button>
  <div id="demo" class="collapse">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>

可以通过添加 .show 类来让内容默认显示

手风琴实例：data-parent确保所有的折叠元素在指定的父元素下，这样就能实现在一个折叠选项显示时其他选项就隐藏。

导航与导航栏

.nav类来创建导航

可以在 <ul> 元素上添加 .nav类，在每个 <li> 选项上添加 .nav-item 类，每个链接上添加 .nav-link 类，在<a>上添加disabled类可禁用

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

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

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

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

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

可以在每个导航的链接上添加 data-toggle="tab" 属性动态可切换的，然后在在每个选项对应的内容的上添加 .tab-pane 类，希望有淡入效果可以在 .tab-pane 后添加 .fade类

<ul class="nav nav-tabs" role="tablist">
    <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 id="home" class="container tab-pane active"><br>
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="container tab-pane fade"><br>
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu2" class="container tab-pane fade"><br>
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
  </div>

胶囊状动态选项卡只需要将以上实例的代码中 data-toggle 属性设置为 data-toggle="pill":

导航栏是一个将商标、导航以及别的元素简单放置到一个简洁导航页头的的集合

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

可以使用 <ul> 元素并添加 class="navbar-nav" 类。然后在 <li> 元素上添加 .nav-item 类， <a> 元素上使用 .nav-link 类，删除 .navbar-expand-xl|lg|md|sm 类来创建垂直导航栏

不同颜色导航栏：.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark, .bg-light

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

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

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>    
    </ul>
  </div>  
</nav>

导航栏的表单 <form> 元素使用 class="form-inline" 类来排版输入框与按钮，也可以使用其他的输入框类，如 .input-group-addon 类用于在输入框前添加小标签

使用 .navbar-text 类来设置导航栏上非链接文本

使用 .fixed-top 类来实现导航栏的顶部固定，.fixed-bottom 类用于设置导航栏固定在底部

表单及表单控件

.form-group

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

堆叠表单 (全屏宽度)：垂直方向
内联表单：水平方向

内联表单在<form>上添加 .form-inline类，在屏幕宽度小于 576px 时为垂直堆叠，如果屏幕宽度大于等于576px时元素都是左对齐的

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

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

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

轮播

<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="https://7n.w3cschool.cn/attachments/knowledge/201803/24575.png">
    </div>
    <div class="carousel-item">
      <img src="https://7n.w3cschool.cn/attachments/knowledge/201801/31740.png">
    </div>
    <div class="carousel-item">
      <img src="https://7n.w3cschool.cn/attachments/knowledge/201804/30601.png">
    </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>


.carousel {}
.carousel-inner {}
.carousel-item {}
.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {}
.carousel-item-next,
.carousel-item-prev {}
.carousel-item-next.carousel-item-left,
.carousel-item-prev.carousel-item-right {}
.carousel-item-next,
.active.carousel-item-right {}
.carousel-item-prev,
.active.carousel-item-left {}

.carousel-fade {
  .carousel-item {}
  .carousel-item.active,
  .carousel-item-next.carousel-item-left,
  .carousel-item-prev.carousel-item-right {}
  .active.carousel-item-left,
  .active.carousel-item-right {}

  .carousel-item-next,
  .carousel-item-prev,
  .carousel-item.active,
  .active.carousel-item-left,
  .active.carousel-item-prev {}
}

.carousel-control-prev,
.carousel-control-next {}
.carousel-control-prev {}
.carousel-control-next {}

.carousel-control-prev-icon,
.carousel-control-next-icon {}
.carousel-control-prev-icon {}
.carousel-control-next-icon {}

.carousel-indicators {
  li {
    &::before {}
    &::after {}
  }
  .active {}
}

.carousel-caption {}

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

模态框

指定模态框用.modal,添加.fade实现淡入淡出效果。指定一个id，在其内部用.modal-dialog指定模态框内容，也可以用.modal-sm之类指定其大小。

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    打开模态框
  </button>
  <!-- 模态框 -->
  <div class="modal fade" id="myModal">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <!-- 模态框头部 -->
        <div class="modal-header">
          <h4 class="modal-title">模态框头部</h4>
          <button type="button" class="close" data-dismiss="modal">×</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>

提示框

向元素添加 data-toggle="tooltip" ,title 属性的内容为提示框显示的内容

提示框要写在 jQuery 的初始化代码里

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

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

弹出框

向元素添加 data-toggle="popover" 来来创建弹出框

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

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

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

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

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

滚动监听

滚动监听（Scrollspy）组件，会根据滚动的位置，自动更新导航条的目标。

监听滚动的元素（通常是 body）添加 data-spy="scroll" ，然后添加 data-targe 属性，它的值为导航栏的 id 或 class (.navbar)。

注意可滚动项元素上的 id （<div id="section1">）必须匹配导航栏上的链接选项（<a href="#section1">)。可选项data-offset 属性用于计算滚动位置时，距离顶部的偏移像素。默认为 10 px。

<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>学编程，从W3Cschool开始！</p>
</div>
<div id="section2" class="container-fluid bg-warning" style="padding-top:70px;padding-bottom:70px">
  <h1>Section 2</h1>
  <p>学编程，从W3Cschool开始！</p>
</div>
<div id="section3" class="container-fluid bg-secondary" style="padding-top:70px;padding-bottom:70px">
  <h1>Section 3</h1>
  <p>学编程，从W3Cschool开始！</p>
</div>
<div id="section41" class="container-fluid bg-danger" style="padding-top:70px;padding-bottom:70px">
  <h1>Section 4 Submenu 1</h1>
  <p>学编程，从W3Cschool开始！</p>
</div>
<div id="section42" class="container-fluid bg-info" style="padding-top:70px;padding-bottom:70px">
  <h1>Section 4 Submenu 2</h1>
  <p>学编程，从W3Cschool开始！</p>
</div>

使用 data-spy="scroll" 的元素需要将其 CSS position 属性设置为 "relative" 才能起作用。