做出來(lái)的效果是這樣的。

當(dāng)鼠標(biāo)點(diǎn)擊驗(yàn)證碼的Input框時(shí)。

點(diǎn)擊里面的img可以進(jìn)行刷新

對(duì)應(yīng)的代碼如下：

<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>

關(guān)鍵的js文件為：

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

對(duì)應(yīng)的input框?yàn)?#xff1a;

<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">用戶(hù)名</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="點(diǎn)擊刷新" data-html="true" data-bs-content='<img src="" />' id="captcha" placeholder="text" /><label name="password" for="captcha" >驗(yàn)證碼</label></div><button class="w-100 mb-2 btn btn-lg rounded-4 btn-outline-light" type="submit">登錄</button> </form>

在html結(jié)尾后填寫(xiě)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>

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。