Bootstrap 5 练习 - 显示工具提示

news2024/10/10 19:50:16

文章目录

引言
准备工作
创建HTML文件
导入Bootstrap 5框架
编写页面代码
编写JavaScript脚本
浏览网页
注意事项
结束语

引言

大家好，今天我们将一起学习如何在Bootstrap 5中创建一个简单的工具提示（Tooltip）。工具提示是一个非常实用的用户界面元素，它可以为用户提供额外的信息，而不会干扰到页面的主要内容。在本教程中，我们将创建一个带有工具提示的按钮，并确保当用户将鼠标悬停在按钮上时，工具提示能够正确显示。

准备工作

在开始之前，请确保你的工作环境已经设置好。你需要一个文本编辑器来编写HTML代码，以及一个现代浏览器来查看你的成果。此外，我们将使用Bootstrap 5，所以请确保你的网络连接正常，以便能够加载Bootstrap的CSS和JavaScript文件。

创建HTML文件

首先，我们将在D:\bootstrap5_work\目录下创建一个新的HTML文件，命名为tooltip_demo.html。

导入Bootstrap 5框架

在HTML文件的<head>部分，我们需要导入Bootstrap 5的CSS和JavaScript文件。这将使我们能够使用Bootstrap的样式和组件。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 5 Tooltip Demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  <!-- 页面内容将在这里 -->
</body>
</html>

编写页面代码

接下来，我们将在<body>标签内添加一个容器，其中包含一个按钮。这个按钮将显示我们的工具提示。

<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>探索 Bootstrap 5 世界~</h1>     
  <button id="btnWelcome" type="button" class="btn btn-warning mt-5" 
  data-bs-toggle="tooltip" data-bs-placement="right" title="欢迎访问泸州职业技术学院">欢迎</button>
</div>

编写JavaScript脚本

现在，我们将添加JavaScript代码来初始化工具提示。请注意，Bootstrap 5的工具提示是自动初始化的，所以我们不需要手动创建工具提示实例。我们将使用Bootstrap提供的API来显示工具提示。

<script>
  // 获取按钮对象
  var btnWelcome = document.getElementById('btnWelcome');
  // 给按钮创建工具提示
  var tooltip = new bootstrap.Tooltip(btnWelcome);
  // 显示工具提示
  tooltip.show();
</script>