做出來的效果是這樣的。

當鼠標點擊驗證碼的Input框時。

點擊里面的img可以進行刷新

對應的代碼如下：

<link href="css/bootstrap.min.css" rel="stylesheet" /><link href="css/cover.css" rel="stylesheet" /><script src="js/popper.min.js"></script><script src="js/bootstrap.bundle.js"></script><script src="js/bootstrap.min.js"></script><script src="js/jquery-3.6.0.min.js"></script>

關鍵的js文件為：

popper.min.js和bootstrap.bundle.js和bootStrap.min.js和jquery-3.6.0.min.js

對應的input框為：

<form class=""><div class="form-floating mb-3"><input type="text" class="form-control rounded-4 text-white bg-dark" id="userName" placeholder="name@example.com" /><label name="userName" for="userName">用戶名</label></div><div class="form-floating mb-3"><input type="password" class="form-control rounded-4 text-white bg-dark" id="password" placeholder="password" /><label name="password" for="password">密碼</label></div><div class="form-floating mb-3"><input type="password" class="form-control rounded-4 text-white bg-dark" data-bs-toggle="popover" title="點擊刷新" data-html="true" data-bs-content='<img src="" />' id="captcha" placeholder="text" /><label name="password" for="captcha" >驗證碼</label></div><button class="w-100 mb-2 btn btn-lg rounded-4 btn-outline-light" type="submit">登錄</button> </form>

在html結尾后填寫js腳本：

<script>$(function(){$("[data-bs-toggle='popover']").popover({html: true,placement: "left",content: "<img id='captchaImg' src='index.php?p=user&c=privilege&a=captcha' width='200' height='60px'>"});}).click(function (){$("#captchaImg").click(function (){$("#captchaImg").attr("src", "index.php?p=user&c=privilege&a=captcha&"+ Math.random());});});</script>

總結

以上是生活随笔為你收集整理的BootStrap笔记-popover的使用（popover中放验证码，点击更新）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。