Bootstrap - 漲泡提示：初學者指南
你好，有抱負的網頁開發者們！今天，我們將進入Bootstrap漲泡提示的精彩世界。別擔心你對此感到陌生；我將用我在教室多年的耐心指導你走過每一步。在本教程結束時，你將能像專家一樣使用漲泡提示！
漲泡提示是什麼？
在我們深入之前，讓我們了解一下什麼是漲泡提示。想像你正在讀一本書，並且在一個單詞旁邊看到一個小星號。當你查看頁面底部時，你會找到關於那個單詞的額外信息。這就是網頁上的漲泡提示所做的——當用戶與某個元素交互時，提供額外的信息。
啟用漲泡提示
首先，我們需要啟用漲泡提示。這就像在開始閱讀之前打開燈光一樣——你需要在使用之前設置好一切。
要啟用漲泡提示，你需要在你的HTML文件中包含Bootstrap的JavaScript和CSS文件。下面是如何操作的：
<!DOCTYPE html>
<html lang="zh-tw">
<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>中，讓它處理漲泡提示的觸發。
選項
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