学习 Bootstrap 打通任督二脉（八）

程序员也要学好英语2024-07-11 17:22

本文旨在根据官方文档全面学习 Bootstrap. 学习其目标在于为之后使用其他更加高级的组件库打下坚实的基础。同时由于 Bootstrap 在移动端的亮眼表现，到目前为止，已经是不可逾越的技术点，因此在本文中，让我们下定决心一起突破，拿下 Bootstrap, 打通任督二脉。

进度条组件

进度条的基本结构

html 复制代码 
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

如上面所示，进度条的基本结构为：div.progress>div.progress-bar 然后在 .progress-bar 上面设置 style 中的 width. 这里需要使用百分比来设置。当然你也可以使用 w-75 如果刚好是 75% 的话。

直接在 .progress-bar 的 innerHTML 中放置文字即可居中显示出来！

html 复制代码 
<div class="progress">
  <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

设置进度条的高度

在最外层的 .progress 标签上通过设置 style 的 height 就可以得到不同粗细的进度条。

html 复制代码 
<div class="progress" style="height: 1px;">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress" style="height: 20px;">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

进度条的颜色

使用 bg-* 来设置进度条的颜色。

html 复制代码 
<div class="progress">
  <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

分段的进度条

一个 .progress 中可以放置多个 .progress-bar 这会让其显示出不同的色彩。

html 复制代码 
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

条纹进度条

我们给 .progress-bar 上面添加名为 progress-bar-striped 的类名就可以解锁背景条纹了，非常的好看。

html 复制代码 
<div class="progress">
  <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

其原理为：

sass 复制代码 
background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);

使条纹具有动画的效果： 在 .progress-bar-striped 添加 progress-bar-animated 类名，即可得到动画效果的进度条。

offcanvas 组件

offcanvas 组件的基本结构

html 复制代码 
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
  </div>
</div>
  • 不难看出来上述代码的结构组成使用 Emmett 语法表示为：div.offcanvas.offcanvas-start>div.offcanvas-header>(h5.offcanvas-title+button.btn-close)+div.offcanvas-body
  • 点击关闭按钮关闭的逻辑相关：data-bs-dismiss="offcanvas" id="offcanvas"

使用按钮打开侧边栏

分为使用 button 和使用 a 锚点标签。

html 复制代码 
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
  Button with data-bs-target
</button>

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
    </div>
    <div class="dropdown mt-3">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
        Dropdown button
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
      </ul>
    </div>
  </div>
</div>
  • 使用 a 标签的时候用：data-bs-toggle="offcanvas" href="#offcanvasExample"
  • 使用 button 标签的时候用：data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample"

侧边栏的位置

  • 顶部：offcanvas-top
  • 右部：offcanvas-end
  • 底部：offcanvas-bottom
  • 左部：offcanvas-start

backdrop 和 scroll

使用 data-bs-backdrop="false" data-bs-backdrop="true" 或者使用 data-bs-scroll="true" data-bs-scroll="false" 来设置有没有遮罩层以及在侧边栏出现的时候可不可以使用滚动条。

html 复制代码 
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBackdrop" aria-controls="offcanvasWithBackdrop">Enable backdrop (default)</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">Enable both scrolling & backdrop</button>

<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasScrollingLabel">Colored with scrolling</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Try scrolling the rest of the page to see this option in action.</p>
  </div>
</div>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasWithBackdrop" aria-labelledby="offcanvasWithBackdropLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasWithBackdropLabel">Offcanvas with backdrop</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>.....</p>
  </div>
</div>
<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdrop with scrolling</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Try scrolling the rest of the page to see this option in action.</p>
  </div>
</div>

placeholder 组件

用来目标内容缺失或者还在网络中的时候的替代的视觉效果。也可以用来辅助画页面。可以想象的到是比较重要的组件，后续可能会被大量使用。

基本使用

给 a 标签或者 span 标签上直接添加名为 placeholder 的类名，可以直接让其成为 placeholder 组件。如下所示：

html 复制代码 
<p aria-hidden="true">
  <span class="placeholder col-6"></span>
</p>

<a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-4" aria-hidden="true"></a>

而 placeholder 的高度直接由宿主元素的 line-height 决定。

修改其高度： 如果你不想通过修改 style 的 line-height 来修改 placeholder 的高度，你可以使用以下类名：

  • placeholder-lg
  • 啥也不写
  • placeholder-sm
  • placeholder-xs

修改宽度

刚才说完了高度，下面说一说宽度。我们可以通过下面三种做法来修改宽度：

html 复制代码 
<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>

不同的背景色

使用不同的背景色是必要的，因为一样的颜色容易导致眼花缭乱！使用 bg-* 设置背景色。

html 复制代码 
<span class="placeholder col-12"></span>
<span class="placeholder col-12 bg-primary"></span>
<span class="placeholder col-12 bg-secondary"></span>
<span class="placeholder col-12 bg-success"></span>
<span class="placeholder col-12 bg-danger"></span>
<span class="placeholder col-12 bg-warning"></span>
<span class="placeholder col-12 bg-info"></span>
<span class="placeholder col-12 bg-light"></span>
<span class="placeholder col-12 bg-dark"></span>

添加动画

最后，我们给 placeholder 加上动画，有两种动画效果可以选择，使用类名 placeholder-glow 和 placeholder-wave 即可获得。但是需要注意的是：这两个类名需要添加在包裹 .placeholder 的外层组件上。

html 复制代码 
<p class="placeholder-glow">
  <span class="placeholder col-12"></span>
</p>

<p class="placeholder-wave">
  <span class="placeholder col-12"></span>
</p>

Popover 组件

所谓 Popover 组件就是在点击、悬浮、聚焦某些标签的时候弹出来的具有说明性内容的标签。这些内容可以在有限的页面位置上做出更多的说明，起辅助作用；并且这些打开的标签的关闭也有讲究。

基本结构

注意下面文件中 js style 文件的引入，以及在 body 最后执行的 script 脚本，如果此脚本不被执行则无法创建 popover 实例，则无法顺利弹出。

html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
    <script
      src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
      integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
      integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
      crossorigin="anonymous"
    ></script>

    <title>Hello, world!</title>
  </head>
  <body>
    <a
      tabindex="0"
      class="btn btn-lg btn-danger"
      role="button"
      data-bs-toggle="popover"
      data-bs-trigger="focus"
      title="Dismissible popover"
      data-bs-content="And here's some amazing content. It's very engaging. Right?"
      >
      Dismissible popover
    </a>

    <script>
      [...document.querySelectorAll('[data-bs-toggle="popover"]')].map(
        function (popoverTriggerEl) {
          return new bootstrap.Popover(popoverTriggerEl);
        }
      );
    </script>
  </body>
</html>

下面分析一下这个 a 标签是什么情况。

  • data-bs-toggle="popover": 表明这个元素上面可以弹出 popover 标签。
  • data-bs-trigger="focus": 表明触发 popover 标签的时机为 focus 也就是鼠标聚焦的时候。
  • title="Dismissible popover": 见下图的标题。
  • data-bs-content="And here's some amazing content. It's very engaging. Right?": 见下图的内容。

脚本原理：

以 data-bs-toggle="popover" 作为锚点，找到这些元素，然后将这些元素本身（实际上应该是元素的信息）作为 popover 的初始化数据将对应的 popover 添加到 document 中去。

指定 popover 的父容器

通过属性 data-bs-container="body" 可以设置实例化的 bootstrap.Popover 的父容器，默认应该是 body.

指定 popover 的弹出方向

通过属性 data-bs-placement="top" 设置弹出的 popover 的方向为上方，当然也可以是 right bottom left.

触发方式及不同

通过修改属性 data-bs-trigger 的值，我们的 popover 会获得不同的行为：

  • 此属性没有值：点击按钮触发，只有再次点击按钮才能取消触发。
  • data-bs-trigger="focus": 点击按钮触发，点击除此按钮之外的任何地方都可以取消触发，但是需要注意的是需要设置按钮中 tabindex="0"
  • data-bs-trigger="hover focus": 两种触发方式，通常如果按钮被 disabled 了就设置成这样。
html 复制代码 
<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

加载器组件 -- Spin

友好的加载器组件

加载器的基本结构是：div.spinner-border>span.visually-hidden 其中 .visually-hidden 保证了此内部元素不可见，这主要是对屏幕阅读器比较友好。而 .spinner-border 本身就可以在此 div 中渲染出加载组件。

我们可以使用 text-* 改变颜色。注意我们改变的是文字颜色而不是背景颜色！

html 复制代码 
<div class="spinner-border text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

换一种动画效果：

html 复制代码 
<div class="spinner-grow" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

改变其大小和外边距

html 复制代码 
<div class="spinner-border spinner-border-sm" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
html 复制代码 
<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
ini 复制代码 
<div class="spinner-border m-5" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

作为 button 的 innerHTML

html 复制代码 
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  <span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>

常见的排布方式

居中：

ini 复制代码 
<div class="d-flex justify-content-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

左右：

xml 复制代码 
<div class="d-flex align-items-center">
  <strong>Loading...</strong>
  <div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>

居左：

ini 复制代码 
<div class="clearfix">
  <div class="spinner-border float-end" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

另一种居中：

ini 复制代码 
<div class="text-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

上下：

html 复制代码 
<div class="d-flex flex-column align-items-center justify-content-center">
  <div class="spinner-border me-2 mb-2" role="status" aria-hidden="true"></div>
<strong>Loading...</strong></div>

桌面提示组件 -- Toast

Toast 的基本结构

html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
    <script
      src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
      integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
      integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
      crossorigin="anonymous"
    ></script>
    <title>Hello, world!</title>
  </head>
  <body>
    <div
      class="toast fade show"
      role="alert"
      aria-live="assertive"
      aria-atomic="true"
    >
      <div class="toast-header">
        <svg
          class="bd-placeholder-img rounded me-2"
          width="20"
          height="20"
          xmlns="http://www.w3.org/2000/svg"
          aria-hidden="true"
          preserveAspectRatio="xMidYMid slice"
          focusable="false"
        >
          <rect width="100%" height="100%" fill="#007aff"></rect>
        </svg>

        <strong class="me-auto">Bootstrap</strong>
        <small>11 mins ago</small>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="toast"
          aria-label="Close"
        ></button>
      </div>
      <div class="toast-body">Hello, world! This is a toast message.</div>
    </div>
  </body>
</html>

一个基本的 Toast 组件的基本结构为：div.toast.fade.show>div.toast-header>img+strong.me-auto+small+button.btn-close + div.toast-body

其中，.toast-header 是使用 flex 进行布局的！最外层的类必须有 toast fade show!

使用按钮弹出 Toast

原理：.toast 组件本身可以作为实例化的参数传递给 new bootstrap.Toast 然后使用 toast.show() 将其显示出来。

html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
    <script
      src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
      integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
      integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
      crossorigin="anonymous"
    ></script>
    <title>Hello, world!</title>
  </head>
  <body>
    <button type="button" class="btn btn-primary" id="liveToastBtn">
      Show live toast
    </button>

    <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
      <div
        id="liveToast"
        class="toast"
        role="alert"
        aria-live="assertive"
        aria-atomic="true"
      >
        <div class="toast-header">
          <img src="..." class="rounded me-2" alt="..." />
          <strong class="me-auto">Bootstrap</strong>
          <small>11 mins ago</small>
          <button
            type="button"
            class="btn-close"
            data-bs-dismiss="toast"
            aria-label="Close"
          ></button>
        </div>
        <div class="toast-body">Hello, world! This is a toast message.</div>
      </div>
    </div>

    <script>
      var toast;
      var toastTrigger = document.getElementById("liveToastBtn");
      var toastLiveExample = document.getElementById("liveToast");
      if (toastTrigger) {
        toastTrigger.addEventListener("click", function () {
          toast = new bootstrap.Toast(toastLiveExample);

          toast.show();
        });
      }
    </script>
  </body>
</html>

你可以直接调用 toast.hide() 使其消失。

toast-body 是半透明的，这样可以更好的和背景融为一体！

自动堆叠的特性

Toast 是自动堆叠的，多个实例不会重叠：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
    <script
      src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
      integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
      integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
      crossorigin="anonymous"
    ></script>
    <title>Hello, world!</title>
  </head>
  <body>
    <button type="button" class="btn btn-primary" id="liveToastBtn">
      Show live toast
    </button>

    <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
      <div
        id="liveToast"
        class="toast"
        role="alert"
        aria-live="assertive"
        aria-atomic="true"
      >
        <div class="toast-header">
          <img src="..." class="rounded me-2" alt="..." />
          <strong class="me-auto">Bootstrap</strong>
          <small>11 mins ago</small>
          <button
            type="button"
            class="btn-close"
            data-bs-dismiss="toast"
            aria-label="Close"
          ></button>
        </div>
        <div class="toast-body">Hello, world! This is a toast message.</div>
      </div>
      <div
        id="liveToast2"
        class="toast"
        role="alert"
        aria-live="assertive"
        aria-atomic="true"
      >
        <div class="toast-header">
          <img src="..." class="rounded me-2" alt="..." />
          <strong class="me-auto">Bootstrap</strong>
          <small>11 mins ago</small>
          <button
            type="button"
            class="btn-close"
            data-bs-dismiss="toast"
            aria-label="Close"
          ></button>
        </div>
        <div class="toast-body">Hello, world! This is a toast message.</div>
      </div>
    </div>

    <script>
      // var toast;
      var toastTrigger = document.getElementById("liveToastBtn");
      var toastLiveExample = document.getElementById("liveToast");
      var toastLiveExample2 = document.getElementById("liveToast2");
      if (toastTrigger) {
        toastTrigger.addEventListener("click", function () {
          var toast = new bootstrap.Toast(toastLiveExample);
          var toast2 = new bootstrap.Toast(toastLiveExample2);

          toast.show();
          toast2.show();
        });
      }
    </script>
  </body>
</html>

效果如下：

能显示在右下角的原因在于：class="position-fixed bottom-0 end-0 p-3"

轻量级定制化的 Toast

如下图所示：

html 复制代码 
<div class="toast fade show align-items-center text-white bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

使用 toast-container 这个类名控制 toast 的位置

html 复制代码 
<div
  class="toast-container d-flex justify-content-center align-items-center w-100"
>
  <!-- <div class="toast-container position-absolute top-0 end-0 p-3"> -->
  <!-- <div class="toast-container position-absolute p-3" id="toastPlacement"> -->
  <div
    class="toast fade show align-items-center text-white bg-primary border-0"
    role="alert"
    aria-live="assertive"
    aria-atomic="true"
  >
    <div class="d-flex">
      <div class="toast-body">Hello, world! This is a toast message.</div>
      <button
        type="button"
        class="btn-close btn-close-white me-2 m-auto"
        data-bs-dismiss="toast"
        aria-label="Close"
      ></button>
    </div>
  </div>
</div>

Tooltip 组件

html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
    <script
      src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
      integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
      integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
      crossorigin="anonymous"
    ></script>
    <title>Hello, world!</title>
  </head>
  <body>
    <button
      type="button"
      class="btn btn-secondary"
      data-bs-toggle="tooltip"
      data-bs-placement="top"
      title="Tooltip on top"
    >
      Tooltip on top
    </button>
    <button
      type="button"
      class="btn btn-secondary"
      data-bs-toggle="tooltip"
      data-bs-placement="right"
      title="Tooltip on right"
    >
      Tooltip on right
    </button>
    <button
      type="button"
      class="btn btn-secondary"
      data-bs-toggle="tooltip"
      data-bs-placement="bottom"
      title="Tooltip on bottom"
    >
      Tooltip on bottom
    </button>
    <button
      type="button"
      class="btn btn-secondary"
      data-bs-toggle="tooltip"
      data-bs-placement="left"
      title="Tooltip on left"
    >
      Tooltip on left
    </button>

    <script>
      var tooltipTriggerList = [].slice.call(
        document.querySelectorAll('[data-bs-toggle="tooltip"]')
      );
      var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
      });
    </script>
  </body>
</html>

用法：在任意的需要使用 tooltip 的组件上添加如下三个属性即可！

html 复制代码 
data-bs-toggle="tooltip"
data-bs-placement="right"
title="Tooltip on right"

其中，data-bs-toggle 表示需要弹出 tooltip 组件；data-bs-placement 表示弹出的 tooltip 组件的位置；title 表示弹出的的 tooltip 的内容。

然后将绑定 data-bs-toggle="tooltip" 的元素作为构造参数进行实例化即可完成功能的构建。

new bootstrap.Tooltip() 执行的返回值是操作 tooltip 的 handle 可以调用 show 或者 hide 或者 toggle 方法控制 tooltip 的展示和隐藏。

相关推荐
Violet_Stray5 天前
用bootstrap搭建侧边栏
前端·bootstrap·html
IT古董6 天前
【漫话机器学习系列】010.Bagging算法（Bootstrap Aggregating）
人工智能·算法·机器学习·bootstrap
nbplus_0077 天前
Redis Set操作
数据库·redis·bootstrap
风烟隐8 天前
Bootstrap Blazor中使用PuppeteerSharp对HTML截图
前端·c#·bootstrap·html·.net
m0_687399849 天前
用redis 实现消息队列
数据库·redis·bootstrap
珹洺10 天前
Bootstrap-HTML（五）图像基础样式
前端·javascript·css·网络·bootstrap·html·ecmascript
chengma_09090910 天前
linux离线安装部署redis
linux·redis·bootstrap
TravisBytes11 天前
Redis 发布/订阅模式与消息队列
java·linux·c++·redis·缓存·bootstrap
Bug缔造者12 天前
Jfinal项目整合Redis
数据库·redis·bootstrap
梅洪14 天前
ASP.NET Core API 前后端分离跨域
后端·bootstrap·asp.net
热门推荐
01大模型国产化适配7-华为昇腾LLM落地可选解决方案（MindFormers、ModelLink、MindIE）02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04电赛2024年H题智能小车基于MSPM0G3507主控MCU（利用8路灰度加上MPU6050的解决方式）具体项目报告05【一文读懂】NTN（非地面网络）技术介绍06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO08组基轨迹建模 GBTM的介绍与实现（Stata 或 R）09Docker 夺命连环 15 问10STM32 无法烧录