Bootstrap 4 是一个流行的前端框架，它提供了一系列的组件和工具，使得开发响应式、移动优先的网站变得更加容易。在Bootstrap 4中，提示框（popovers）和弹窗（modals）是非常实用的功能，可以帮助用户在页面上提供更多交互和信息。本文将详细介绍如何在Bootstrap 4中设计和实现提示框与弹窗。
一、提示框（Popovers）
提示框是一种小型的、基于HTML的弹出框，用于向用户展示附加信息。Bootstrap 4的提示框组件非常易于使用，以下是如何创建一个基本的提示框的步骤：
1.1 基本结构
首先，你需要为提示框创建一个触发元素（通常是按钮或链接），并为它添加一个
data-toggle=”popover”
属性，以及一个
data-placement
属性来指定提示框的位置。
1.2 CSS样式
Bootstrap 4已经内置了提示框的样式，因此你不需要额外的CSS。但是，如果你想要自定义样式，可以添加自己的CSS。
1.3 JavaScript初始化
为了使提示框工作，你需要通过JavaScript来初始化它。
$(function () {
$(‘[data-toggle=”popover”]’).popover();
});
1.4 示例
以下是一个完整的示例，展示了如何创建一个提示框：
二、弹窗（Modals）
弹窗是一种覆盖整个屏幕的对话框，用于显示重要信息或执行特定操作。以下是创建弹窗的基本步骤：
2.1 基本结构
创建一个弹窗，你需要一个触发元素（通常是按钮），一个包含弹窗内容的
data-toggle=”modal”
属性。
2.2 CSS样式
Bootstrap 4已经为弹窗提供了样式，因此你不需要额外的CSS。
2.3 JavaScript初始化
为了使弹窗工作，你需要通过JavaScript来初始化它。
$(function () {
$(‘#myModal’).modal();
});
2.4 示例
以下是一个完整的示例，展示了如何创建一个弹窗：
通过以上步骤，你可以在Bootstrap 4中轻松地设计和实现提示框与弹窗。这些组件可以帮助你提升用户体验，让网站更加互动和友好。