Bootstrap5 提示框学习笔记

简介

Bootstrap是一个流行的开源前端框架，它提供了许多CSS、JavaScript组件和工具，帮助开发人员快速构建现代化的响应式网站。其中之一就是提示框（Tooltip），在鼠标悬停或点击触发时，提供相关的文本提示信息。

使用方法

Bootstrap5 提供了一种简单的方式来创建提示框。以下是使用步骤：

在HTML文件中引入Bootstrap CSS和JavaScript文件。

htmlCopy Code
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css">
</head>
<body>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
</body>

添加data-bs-toggle和title属性来创建提示框。

htmlCopy Code
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="这是一个提示框！">
  悬停鼠标
</button>

初始化提示框。

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

实例

下面是一个简单的示例，演示如何使用Bootstrap5创建一个提示框。

htmlCopy Code
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap5提示框示例</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css">
</head>
<body>

  <div class="container mt-5">
    <h1 class="text-center">Bootstrap5提示框示例</h1>
    <hr>

    <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="这是一个提示框！">
      悬停鼠标
    </button>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
  <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>

在悬停鼠标时，将显示“这是一个提示框！”的文本。