我已經學習 Web 開發一個月了。根據我的閱讀，這data-bs-toggle是 Bootstrap 5 的較新名稱。
Bootstrap data-toggle 與 data-bs-toggle 屬性有什么區別？
我的代碼很簡單。在頭部，我已經將 CSS、jQuery 和 JavaScript Bundle 與 Popper 一起包含在內。在正文中，我有兩個帶有彈出框的鏈接。在腳本中，我啟動了 popover。
通過更改data-toggle為data-bs-toggle我的彈出框將無法正常作業。
data-bs-content另一方面，如果我將其更改為data-content
為什么會發生這種情況？
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-0evHe/X R7YkIZDRvuzKMRqM OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"></script>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</head>
<body>
<a href="#" title="Header" data-bs-toggle="popover" data-placement="top" data-bs-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="top" data-bs-content="Content">Click</a>
</body>
<script>
$(function () {
$('[data-toggle="popover"]').popover()
console.log('activated')
})
</script>
</html>
uj5u.com熱心網友回復：
您需要決定啟動哪個資料切換。
如果您使用$('[data-toggle="popover"]').popover()它會啟動具有指定資料切換的彈出視窗
如果您使用$('[data-bs-toggle="popover"]').popover()它會啟動已指定 data-bs-toggle 的彈出視窗
堅持一個版本 - data-toggle 或 data-bs-toggle
我建議使用 data-bs-toggle。如果您要從檔案中復制代碼，請記住 DOC 描述了 Bootstrap 4。因此，如果您使用的是 Bootstrap 5，則某些實用程式將無法與資料切換一起使用。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/482662.html
標籤：javascript html 推特引导 网络
上一篇：與Js/React陣列相關的問題
下一篇：如何在投票中顯示總票數？