Bootstrap 5 data-bs-toggle 与 data-toggle。添加 bs 破坏了我的整个 Popper

Question

我学习 Web 开发已经一个月了。根据我的阅读，data-bs-toggle 是 Bootstrap 5 的新名称。

我的代码很简单。在头部，我包含了 CSS、jQuery 和 JavaScript Bundle with Popper。在正文中，我有两个带有弹出窗口的链接。在脚本中，我启动弹出窗口。

通过将 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/bootstrap@5.2.0-beta1/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/bootstrap@5.2.0-beta1/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>

Answer 1

您需要决定启动哪个data-toggle。

如果您使用 $('[data-toggle="popover"]').popover()，它会启动已指定 data-toggle

的弹出框

如果您使用 $('[data-bs-toggle="popover"]').popover()，它会启动指定了 data-bs-toggle

的弹出框

坚持一个版本 - data-toggle 或 data-bs-toggle

我建议使用 data-bs-toggle。如果您将从文档中复制代码，请记住 DOC 描述了 Bootstrap 4。因此，如果您使用的是 Bootstrap 5，某些实用程序将无法与 data-toggle.

一起使用

Bootstrap 5 data-bs-toggle 与 data-toggle。添加 bs 破坏了我的整个 Popper

Bootstrap 5 data-bs-toggle vs data-toggle. Adding the bs breaks my whole Popper

html

javascript

web

twitter-bootstrap