所以我真的被難住了，因為我實際上是在使用檔案的例子，它只是拒絕作業。我有
- 進口助推器
- 進口爆米花
- 初始化工具提示
- 初始化彈出框
一切都按照檔案。
然后我添加了以下代碼來試用彈出框：
<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
這與檔案中的代碼相同，彈出視窗顯示，但不正確的是，它只顯示標題而不顯示內容。一旦第一個 Toggle 完成，即，一旦您顯示然后隱藏彈出框，它就不會再次顯示。
發生了什么的截圖
順便說一下，這是我的代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link href="styles.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho j7jyWK8fNQe A12Hb8AhRq26LrZ/JpcUGGOn Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="./assets/scripts/init-tooltips.js" defer></script>
<script src="./assets/scripts/init-popover.js" defer></script>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">About me</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="./index.html">Introduction</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./life.html">Life</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="./life.html">Education</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Projects</a>
</li>
</div>
</nav>
</head>
<body>
<h1 class="center">Education</h1>
<figure class="center">
<img src=./assets/images/1.jpeg>
<img src=./assets/images/2.jpeg>
<img src=./assets/images/3.jpeg>
<img src=./assets/images/4.jpeg>
<img src=./assets/images/5.jpeg>
</figure>
<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
<p>test</p>
</body>uj5u.com熱心網友回復：
這是因為您在按鈕上使用data-bs-popover和data-bs-content，這是 Bootstrap 5 格式。
您正在呼叫 Bootstrap 4
<script src="https://cdn.jsdelivr.net/npm/[email protected]...........</script>
使用data-popover和data-content用于 Bootstrap 4。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/375587.html
標籤：推特引导 bootstrap-5