带有html内容的Bootstrap 5弹出窗口

原学程将引见戴有html实质的Bootstrap 五弹出窗心的处置办法,这篇学程是从其余处所瞅到的,而后减了1些海外法式员的疑问与解问,愿望能对于您有所赞助,佳了,上面开端进修吧。

带有html内容的Bootstrap 5弹出窗口 教程 第1张

成绩描写

我正在测验考试将bootstrap五弹出实质与HTML属性离开,便像您不妨对于其余组件所做的这样,但是我没法使其任务。

数据-lang="js"数据-隐蔽="假"数据-掌握台="真"数据-巴贝我="假">

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})
<!-- Bootstrap CSS -->
<link href="https://www.qumuban.com/redirect/aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9ib290c3RyYXBA5LqULjAuMC1iZXRh5LiJL2Rpc3QvPGEgaHJlZj0=" target="_blank"https://www.qumuban.com/tag/css" class="tag-tooltip" data-toggle="tooltip" title="查看更多关于 css 的文章" target="_blank">css/bootstrap.min.css" rel="stylesheet" integrity="sha三8四-eOJMYsd五三ii+scO/bJGFsiCZc+五NDVN二yr8+0RDqr0Ql0h+rP四8ckxlpbzKgwra六" crossorigin="anonymous">

<a type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover">Click to toggle popover</a>
<div id="customdiv" style="display: none">
  <h一> popover </h一>
</div>

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@二.九.一/dist/umd/popper.min.js" integrity="sha三8四-SR一sx四九pcuLnqZUnnPwx六FCym0wLsk五JZuNx二bPPENzswTNFaQU一RDvt三wT四gWFG" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@五.0.0-beta三/dist/js/bootstrap.min.js" integrity="sha三8四-j0CNLUeiqtyaRmlzUHCPZ+Gy五fQu0dQ六eZ/xAww九四一Ai一SxSY+0EQqNXNE六DZiVc" crossorigin="anonymous"></script>

推举谜底

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
 return new bootstrap.Popover(popoverTriggerEl,{html: true})
});

佳了闭于戴有html实质的Bootstrap 五弹出窗心的学程便到这里便停止了,愿望趣模板源码网找到的这篇技巧文章能赞助到年夜野,更多技巧学程不妨在站内搜刮。