学习 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 的展示和隐藏。

相关推荐
kjl5365662 天前
Redis配置文件(redis.conf)
redis·bootstrap·php
祈祷苍天赐我java之术3 天前
Redis 有序集合解析
java·前端·windows·redis·缓存·bootstrap·html
Dontla4 天前
Tailwind CSS介绍（现代CSS框架，与传统CSS框架Bootstrap对比）Tailwind介绍
前端·css·bootstrap
鹅是开哥4 天前
Redis的零食盒满了怎么办？详解缓存淘汰策略
java·redis·缓存·bootstrap
向上的车轮5 天前
Sass 与 Bootstrap 5的区别是什么？
bootstrap·sass
tryCbest6 天前
Python 使用 Redis 详细教程
redis·python·bootstrap
强盛小灵通专卖员9 天前
深度学习中Bootstrap详解
人工智能·深度学习·bootstrap·sci·sci期刊·小论文
island131424 天前
【Redis#10】渐进式遍历 | 数据库管理 | redis_cli | RES
数据库·redis·bootstrap
IAtlantiscsdn24 天前
Redis7底层数据结构解析
前端·数据结构·bootstrap
热门推荐
01两千字总结：Codex 国内如何安装和使用的教程，以及如何设置中文回答02GitHub 镜像站点03UV安装并设置国内源04Linux下V2Ray安装配置指南05KGG转MP3工具|非KGM文件|解密音频06jdk21下载、安装（Windows、Linux、macOS）07Claude Code & 智谱GLM-4.5 环境配置指南 (Windows/macOS/Ubuntu)08DeepSeek-VL 解析：混合视觉-语言模型如何超越传统计算机视觉方法09一文了解国产算子编程语言 TileLang，TileLang 对国产开源生态的影响与启示1046个Nano-banana 精选提示词，持续更新中