Bootstrap 5學習教程，從入門到精通，Bootstrap 5 彈出框(Popovers) 語法知識點及案例（22）

Bootstrap 5 彈出框(Popovers) 語法知識點及案例

一、彈出框基本概念

彈出框(Popovers)是Bootstrap提供的一個小型覆蓋層組件，用于顯示額外的信息，當用戶點擊某個元素時出現，再次點擊時消失。

二、彈出框基本語法知識點

1. 必需屬性

  • data-bs-toggle="popover" - 標識元素為彈出框觸發器
  • title - 彈出框的標題(可選)
  • data-bs-content - 彈出框的內容

2. 配置選項

可以通過data屬性或JavaScript配置：

選項類型默認值描述
animationbooleantrue應用CSS淡入淡出過渡
containerstring, element, falsefalse將彈出框附加到特定元素
contentstring, element, function‘’彈出框內容
delaynumber, object0顯示/隱藏的延遲(ms) {show: 500, hide: 100}
htmlbooleanfalse是否在彈出框中解析HTML
placementstring, function‘right’彈出框位置: auto, top, bottom, left, right
selectorstring, falsefalse如果提供選擇器，彈出框對象將委托給指定的目標
templatestring基礎HTML模板創建彈出框時使用的基本HTML
triggerstring‘click’觸發方式: click, hover, focus, manual
fallbackPlacementsarray[‘top’, ‘right’, ‘bottom’, ‘left’]提供回退位置列表
boundarystring, element‘clippingParents’彈出框的溢出約束邊界
customClassstring, function‘’向彈出框添加類
sanitizebooleantrue啟用或禁用清理
allowListobject默認值包含允許的屬性和標簽的對象
sanitizeFnnull, functionnull允許您指定自己的清理函數
offsetarray, string, function[0, 8]彈出框相對于目標的偏移量

3. 方法

通過JavaScript控制彈出框：

方法描述
show()顯示彈出框
hide()隱藏彈出框
toggle()切換彈出框
dispose()隱藏并銷毀彈出框
enable()啟用彈出框顯示
disable()禁用彈出框顯示
toggleEnabled()切換啟用或禁用狀態
update()更新彈出框位置
getInstance()靜態方法，允許獲取與DOM元素關聯的彈出框實例
getOrCreateInstance()靜態方法，獲取與DOM元素關聯的彈出框實例或創建新實例

4. 事件

彈出框提供了一系列事件：

事件描述
show.bs.popover當show方法被調用時立即觸發
shown.bs.popover當彈出框對用戶可見時觸發(等待CSS過渡完成)
hide.bs.popover當hide方法被調用時立即觸發
hidden.bs.popover當彈出框對用戶隱藏時觸發(等待CSS過渡完成)
inserted.bs.popover當彈出框模板已添加到DOM時觸發

三、完整案例代碼

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Bootstrap 5 彈出框示例</title><!-- Bootstrap 5 CSS --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body><div class="container py-5"><h1 class="text-center mb-5">Bootstrap 5 彈出框示例</h1><!-- 基本示例 --><div class="row mb-5"><div class="col-md-6"><h3>基本彈出框</h3><button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="彈出框標題" data-bs-content="這是一個基本的彈出框內容">點擊顯示彈出框</button></div><div class="col-md-6"><h3>不同位置</h3><button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="頂部彈出框">頂部</button><button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="右側彈出框">右側</button><button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="底部彈出框">底部</button><button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="左側彈出框">左側</button></div></div><!-- 觸發方式示例 --><div class="row mb-5"><div class="col-12"><h3>不同觸發方式</h3><button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-trigger="focus" title="Focus觸發" data-bs-content="通過focus事件觸發彈出框">Focus觸發</button><button type="button" class="btn btn-info" data-bs-toggle="popover" data-bs-trigger="hover" title="Hover觸發" data-bs-content="通過hover事件觸發彈出框">Hover觸發</button><button type="button" class="btn btn-warning" id="manualTrigger" title="手動觸發" data-bs-content="通過JavaScript手動觸發彈出框">手動觸發</button></div></div><!-- HTML內容示例 --><div class="row mb-5"><div class="col-12"><h3>HTML內容</h3><button type="button" class="btn btn-success" data-bs-toggle="popover" data-bs-html="true" title="<em>HTML內容</em>" data-bs-content="<b>加粗文本</b>和<a href='#'>鏈接</a>">包含HTML的彈出框</button></div></div><!-- 延遲示例 --><div class="row mb-5"><div class="col-12"><h3>延遲顯示/隱藏</h3><button type="button" class="btn btn-dark" data-bs-toggle="popover" data-bs-delay='{"show":500,"hide":100}' title="延遲示例" data-bs-content="顯示延遲500ms，隱藏延遲100ms">延遲效果</button></div></div><!-- 自定義模板 --><div class="row"><div class="col-12"><h3>自定義模板</h3><button type="button" class="btn btn-outline-primary" id="customPopover" title="自定義標題" data-bs-content="自定義內容">自定義模板彈出框</button></div></div></div><!-- Bootstrap 5 JS 包（包含Popper） --><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script><script>// 文檔加載完成后初始化所有彈出框document.addEventListener('DOMContentLoaded', function() {// 初始化頁面中所有帶有data-bs-toggle="popover"的元素const popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));const popoverList = popoverTriggerList.map(function (popoverTriggerEl) {return new bootstrap.Popover(popoverTriggerEl);});// 手動觸發示例const manualTriggerBtn = document.getElementById('manualTrigger');const manualPopover = new bootstrap.Popover(manualTriggerBtn);manualTriggerBtn.addEventListener('click', function() {manualPopover.toggle();});// 自定義模板示例const customPopoverBtn = document.getElementById('customPopover');const customPopover = new bootstrap.Popover(customPopoverBtn, {template: '<div class="popover" role="tooltip">' +'<div class="popover-arrow"></div>' +'<h3 class="popover-header bg-primary text-white"></h3>' +'<div class="popover-body bg-light"></div>' +'</div>'});// 事件監聽示例customPopoverBtn.addEventListener('show.bs.popover', function () {console.log('彈出框即將顯示');});customPopoverBtn.addEventListener('shown.bs.popover', function () {console.log('彈出框已完全顯示');});customPopoverBtn.addEventListener('hide.bs.popover', function () {console.log('彈出框即將隱藏');});customPopoverBtn.addEventListener('hidden.bs.popover', function () {console.log('彈出框已完全隱藏');});// 動態內容示例const dynamicContentBtn = document.createElement('button');dynamicContentBtn.className = 'btn btn-outline-secondary ms-2';dynamicContentBtn.textContent = '動態內容';document.querySelector('.row:last-child .col-12').appendChild(dynamicContentBtn);const dynamicPopover = new bootstrap.Popover(dynamicContentBtn, {title: '動態內容',content: '初始內容'});dynamicContentBtn.addEventListener('click', function() {// 更新內容dynamicPopover.setContent({'.popover-body': '當前時間: ' + new Date().toLocaleTimeString()});});});</script>
</body>
</html>

四、代碼說明

  1. 基本結構：

    • 引入了Bootstrap 5的CSS和JS文件
    • 使用data-bs-toggle="popover"屬性標識彈出框觸發器

  2. 基本示例：

    • 展示了最簡單的彈出框實現
    • 演示了不同位置的彈出框(top, right, bottom, left)

  3. 觸發方式：

    • focus: 元素獲得焦點時顯示
    • hover: 鼠標懸停時顯示
    • 手動觸發: 通過JavaScript控制

  4. HTML內容：

    • 設置data-bs-html="true"允許在彈出框中解析HTML

  5. 延遲效果：

    • 使用data-bs-delay屬性設置顯示和隱藏的延遲時間

  6. 自定義模板：

    • 通過JavaScript配置自定義的彈出框HTML結構

  7. 事件處理：

    • 監聽彈出框的各種事件(show, shown, hide, hidden)

  8. 動態內容：

    • 演示如何通過JavaScript動態更新彈出框內容

五、注意事項

  1. 彈出框依賴于Popper.js，確保使用bootstrap.bundle.min.js(包含Popper)或單獨引入Popper
  2. 彈出框需要手動初始化(通過data屬性或JavaScript)
  3. 在移動設備上，建議使用點擊觸發而非懸停觸發
  4. 包含HTML內容時要注意XSS安全問題
  5. 對于復雜的交互，考慮使用模態框(Modal)而非彈出框

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/diannao/88412.shtml
繁體地址，請注明出處：http://hk.pswp.cn/diannao/88412.shtml
英文地址，請注明出處：http://en.pswp.cn/diannao/88412.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

輕巧靈動，智啟未來 ——Kinova Gen3 Lite 機器人輕松解鎖各行業自動化新姿勢

輕巧靈動，智啟未來 ——Kinova Gen3 Lite 機器人輕松解鎖各行業自動化新姿勢

近年來&#xff0c;Kinova Gen3 Lite 機器人憑借其卓越的性能、靈活的應用能力以及出色的性價比&#xff0c;在全球范圍內掀起了一股熱銷狂潮。無論是科研機構、高校實驗室&#xff0c;還是工業制造企業&#xff0c;都對它青睞有加。其銷量持續攀升&#xff0c;市場占有率不斷擴…
閱讀更多...
STM32 實現PID

STM32 實現PID

&#x1f9f1; 一、PID核心模塊&#xff08;模塊化設計&#xff09; 頭文件 pid_controller.h #pragma once #include <stdint.h>typedef struct {// 可調參數float Kp, Ki, Kd; // PID系數float output_min; // 輸出下限float output_max; // 輸出上…
閱讀更多...
基于MATLAB的BP神經網絡回歸模型在空氣質量預測中的應用

基于MATLAB的BP神經網絡回歸模型在空氣質量預測中的應用

說明&#xff1a;這是一個機器學習實戰項目&#xff08;附帶數據代碼文檔&#xff09;&#xff0c;如需數據代碼文檔可以直接到文章最后關注獲取。 1.項目背景 隨著城市化進程的加快和工業化的不斷發展&#xff0c;空氣質量問題日益受到廣泛關注。空氣中污染物如PM2.5、PM10、…
閱讀更多...
Linux docker拉取鏡像報錯解決

Linux docker拉取鏡像報錯解決

1、錯誤提示&#xff1a; Error response from daemon: Get "https://registry-1.docker.io/v2/": net/http: request canceled while waiting for connection 主要原因就是docker源不正確&#xff0c;需要配置一下。 2、報錯如下&#xff1a; 3、解決辦法&#x…
閱讀更多...
stm32week17+18+19+20

stm32week17+18+19+20

stm32學習 十二.串口 5.USART的HAL庫用法 USART/UART異步通信配置步驟&#xff1a; 配置串口工作參數&#xff1a;HAL_UART_Init();串口底層初始化&#xff1a;HAL_UART_MspInit();開啟串口異步接收中斷&#xff1a;HAL_UART_Receive_IT();設置優先級&#xff0c;使能中斷&…
閱讀更多...
14.Linux Docker

14.Linux Docker

## Linux系統優化一般情況&#xff0c;我們都會使用Linux來進行MySQL的安裝和部署&#xff0c;Linux系統在使用的時候&#xff0c;也需要進行相關的配置&#xff0c;以提高MySQL的使用性能&#xff0c;這里列舉以下幾點&#xff1a;避免使用Swap交換分區&#xff0c;因為交換時…
閱讀更多...
智能體平臺的商業前景與競爭格局分析：金融與企業市場的機遇與挑戰

智能體平臺的商業前景與競爭格局分析：金融與企業市場的機遇與挑戰

一、金融機構與企業部署第三方智能體平臺&#xff0c;這條路靠譜嗎&#xff1f; 1. 需求背景 金融機構和大中小企業普遍面臨數字化轉型、降本增效、智能服務升級等需求。智能體&#xff08;Agent/AI Agent&#xff09;平臺能幫助企業快速構建客服、風控、營銷、數據分析等多種…
閱讀更多...
數據結構篇-二分圖

數據結構篇-二分圖

定義示例應用 定義 一個圖是二分圖&#xff1b;一個圖具有二著色性&#xff1b;一個圖不包含任何奇數長度的環&#xff1b; 實現 /*** Program 18.6 Two-colorability* ------------------------------------------------------------------------------------------------…
閱讀更多...
50. Pow(x, n)快速冪算法

50. Pow(x, n)快速冪算法

實現 pow(x, n) &#xff0c;即計算 x 的整數 n 次冪函數&#xff08;即&#xff0c;xn &#xff09;。此函數應將 x 作為浮點數&#xff08;意味著它可以是十進制數&#xff09;和 n 作為整數&#xff08;可以是正數、負數或零&#xff09;一起使用。 快速冪&#xff08;Expo…
閱讀更多...
打造絲滑的Android應用：LiveData完全教程

打造絲滑的Android應用：LiveData完全教程

為什么你需要LiveData&#xff1f; 在Android開發中&#xff0c;數據的動態更新一直是個讓人頭疼的問題。想象一下&#xff1a;你的界面需要實時顯示用戶的余額變化&#xff0c;或者一個聊天應用的未讀消息數得隨時刷新。過去&#xff0c;我們可能會用Handler、手動監聽器&…
閱讀更多...
vue3 el-table 根據字段值 改變整行字體顏色

vue3 el-table 根據字段值 改變整行字體顏色

在 Vue 3 中使用 Element Plus 的 el-table 組件時&#xff0c;如果你想根據某一列的字段值來改變整行的字體顏色&#xff0c;你可以通過使用自定義的 row-class-name 屬性或者通過插槽&#xff08;slot&#xff09;的方式來達到目的。以下是兩種常見的方法&#xff1a; 方法一…
閱讀更多...
Linux的全新網絡管理命令行工具——nmcli

Linux的全新網絡管理命令行工具——nmcli

一、nmcli簡介 1.1、NetworkManager簡介 1.1.1、NetworkManager介紹 在紅帽系的Linux中&#xff0c;默認的網絡服務是由NetworkManager提供的&#xff08;其主要是一個可以進行動態網絡配置和控制的守護進程&#xff09;。 使用NetworkManager的優點 序號使用NetworkManager的優…
閱讀更多...
C++基礎之智能指針

C++基礎之智能指針

一、概念 堆內存對象需要手動使用delete銷毀&#xff0c;如果沒有使用delete銷毀就會造成內存泄漏。 所以C在ISO98標準中引入了智能指針的概念&#xff0c;并在ISO11中趨于完善。 使用智能指針可以讓堆內存對象具有棧內存對象的特點&#xff0c;原理是給需要手動回收的內內存對…
閱讀更多...
python3虛擬機線程切換過程

python3虛擬機線程切換過程

python實現了自己的多線程&#xff0c;為了保證線程安全&#xff0c;引入了全局解釋器鎖GIL&#xff0c;只有拿到GIL的線程才能執行&#xff0c;所以在python中同一時刻只能有一個線程在運行&#xff0c;python多線程無法發揮多核處理器的威力&#xff0c;《python源碼剖析》中…
閱讀更多...
PYTHON從入門到實踐5-列表操作

PYTHON從入門到實踐5-列表操作

# 【1】列表是可變的&#xff0c;可以修改、追加、刪除 import randomclass Friend(object):def __init__(self, name, age):self.name nameself.age ageif __name__ __main__:friendList []for i in range(0, 9):randomNumber random.randint(0, 100)friend Friend(f&qu…
閱讀更多...
【linux】network服務啟動網卡流程

【linux】network服務啟動網卡流程

目錄 1、介紹2、ifup流程【1】與NetworkManager兼容【2】ifup-eth設置ip【3】ifup-routes設置路由 1、介紹 network服務的核心由/etc/sysconfig/network-scripts/下一堆腳本配置來生效&#xff0c;其中啟動網卡就是通過ifup腳本來實現的&#xff0c;下面就講一下ifup如何恢復i…
閱讀更多...
如何防止自己的電腦被控制？開啟二次驗證保護教程

如何防止自己的電腦被控制？開啟二次驗證保護教程

遠程操作什么最重要&#xff1f;安全&#xff0c;安全&#xff0c;和安全&#xff01;答案永遠是安全&#xff01;那么究竟如何能讓遠程連接安全性更上一層臺階吶&#xff1f;又是哪家遠控安全策略方面最給力吶&#xff1f;這可不是王婆賣瓜&#xff0c;自賣自夸&#xff0c;確…
閱讀更多...
微信小程序節點相關總結

微信小程序節點相關總結

微信小程序節點事件總結 bindtap、catchtap、bindclick的區別&#xff1f;bindclick 和 bindtap 的區別在于&#xff1a; e.target和e.currentTargete.typee.timeStamp觸摸事件屬性&#xff08;針對觸摸類事件&#xff09;坐標信息事件綁定數據冒泡與捕獲相關其他特殊屬性**常見…
閱讀更多...
XSD是什么，與XML關系

XSD是什么，與XML關系

XSD&#xff08;XML Schema Definition&#xff09;是用于描述XML文檔結構和內容的一種規范。它定義了XML文檔中元素、屬性、數據類型、數據格式以及它們之間的關系和約束。XSD是W3C&#xff08;萬維網聯盟&#xff09;推薦的標準之一&#xff0c;它比早期的DTD&#xff08;Doc…
閱讀更多...
Ubuntu服務器中MySQL如何進行主從復制

Ubuntu服務器中MySQL如何進行主從復制

一、MySQL 主從復制基本原理 MySQL 主從復制是指&#xff1a;一臺數據庫服務器負責寫入操作&#xff0c;并將數據變更以二進制日志形式記錄下來;一臺或多臺從庫通過讀取主庫的二進制日志&#xff0c;實時或半實時地將主庫的寫入操作同步到自身數據庫&#xff0c;實現數據一致性…
閱讀更多...
最新文章

Copyright @ 2022~2023