Bootstrap - 弹出提示：初学者指南

你好，有抱负的网页开发者们！今天，我们将深入了解Bootstrap弹出提示的精彩世界。如果你是新手，不用担心；我会用我在课堂上多年来的耐心一步步引导你。在本教程结束时，你将能够像专业人士一样使用弹出提示！

Bootstrap - Popovers

弹出提示是什么？

在我们开始之前，先来了解一下弹出提示是什么。想象你正在读书，看到一个单词旁边有一个小星号。当你翻到页面底部，你会找到关于这个单词的额外信息。网页上的弹出提示基本上就是这样做的——当用户与某个元素交互时，它提供额外的信息。

启用弹出提示

首先，我们需要启用弹出提示。这就像在开始阅读之前打开灯一样——你需要先设置好才能使用它们。

要启用弹出提示，你需要在HTML文档中包含Bootstrap的JavaScript和CSS文件。以下是如何操作的：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 弹出提示</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- 你的内容在这里 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
</script>
</body>
</html>

这段代码设置了HTML文档的基本结构，并包含了Bootstrap的CSS和JavaScript文件。底部的脚本初始化页面上的所有弹出提示。

创建弹出提示

现在我们已经准备好舞台，让我们创建第一个弹出提示！只需给按钮添加一些属性即可。

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="弹出提示标题" data-bs-content="这里有很棒的内容。非常吸引人。对吧？">点击切换弹出提示</button>

让我们分解一下：

class="btn btn-lg btn-danger"：这使得我们的按钮大且为红色。
data-bs-toggle="popover"：这告诉Bootstrap这个元素应该触发一个弹出提示。
title="弹出提示标题"：这设置了我们的弹出提示标题。
data-bs-content="..."：这是我们的弹出提示的主要内容。

弹出提示的位置

就像在房间里摆放家具一样，你可以以不同的方式定位弹出提示。Bootstrap允许你将弹出提示放置在元素的顶部、右侧、底部或左侧。

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="顶部弹出提示">
顶部弹出提示
</button>

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="右侧弹出提示">
右侧弹出提示
</button>

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="底部弹出提示">
底部弹出提示
</button>

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="左侧弹出提示">
左侧弹出提示
</button>

data-bs-placement 属性决定了弹出提示相对于按钮出现的位置。

定制弹出提示

想要为你的弹出提示添加个人风格？你可以使用自己的HTML内容来自定义它们！

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-html="true" title="<h3>自定义标题</h3>" data-bs-content="<b>粗体</b>内容。包含<a href='#'>链接</a>。">
自定义HTML弹出提示
</button>

在这里，我们将 data-bs-html="true" 设置为允许在弹出提示内容中使用HTML。现在我们可以在标题和内容中使用HTML标签！

可关闭的弹出提示

有时，你希望弹出提示在用户明确关闭之前一直显示。这时，可关闭的弹出提示就派上用场了。

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="可关闭的弹出提示" data-bs-content="这里有很棒的内容。非常吸引人。对吧？">可关闭的弹出提示</a>

关键在于 data-bs-trigger="focus"。这意味着弹出提示将保持打开状态，直到用户在页面的其他地方点击。

鼠标悬停弹出提示

想要用户在悬停在元素上时显示弹出提示？轻而易举！

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-placement="top" data-bs-content="鼠标悬停我！">
悬停以触发弹出提示
</button>

data-bs-trigger="hover" 属性使得在悬停时显示弹出提示。

禁用元素的弹出提示

通常，禁用元素不会触发用户交互。但用一个小技巧，我们也可以让弹出提示在它们上面工作！

<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="禁用弹出提示">
<button class="btn btn-primary" type="button" disabled>禁用按钮</button>
</span>

我们将禁用按钮包装在 <span> 中，让 <span> 处理弹出提示的触发。

选项

Bootstrap提供了多种选项来自定义你的弹出提示。以下是一些常见选项的表格：

选项	类型	默认值	描述
animation	boolean	true	应用CSS淡入淡出过渡到弹出提示
container	string \| element \| false	false	将弹出提示附加到特定的元素
content	string \| element \| function	''	如果 `data-bs-content` 属性不存在，则使用默认内容值
delay	number \| object	0	延迟显示和隐藏弹出提示的时间（毫秒）
html	boolean	false	允许在弹出提示中使用HTML
placement	string \| function	'right'	如何定位弹出提示
selector	string \| false	false	如果提供了选择器，弹出提示对象将委派给指定的目标
template	string	`<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>`	创建弹出提示时使用的基HTML
title	string \| element \| function	''	如果 `title` 属性不存在，则使用默认标题值
trigger	string	'click'	如何触发弹出提示 - click \| hover \| focus \| manual

你可以在用JavaScript初始化弹出提示时使用这些选项：

var popover = new bootstrap.Popover(document.querySelector('#example'), {
trigger: 'hover',
placement: 'top'
})

就这样！你现在已经成为Bootstrap弹出提示的专家了。记住，掌握这个（以及任何编码概念）的关键是练习。所以，继续尝试这些例子，混合搭配，创造一些惊人的东西。快乐编码！

Credits: Image by storyset