怎么在Bootstrap弹出窗口中插入图像

本文小编为大家详细介绍“怎么在Bootstrap弹出窗口中插入图像”，内容详细，步骤清晰，细节处理妥当，希望这篇“怎么在Bootstrap弹出窗口中插入图像”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

成都创新互联一直秉承“诚信做人，踏实做事”的原则，不欺瞒客户，是我们最起码的底线！以服务为基础，以质量求生存，以技术求发展，成交一个客户多一个朋友！为您提供成都网站设计、网站建设、成都网页设计、微信小程序开发、成都网站开发、成都网站制作、成都软件开发、App定制开发是成都本地专业的网站建设和网站设计公司，等你一起来见证！

答案：使用弹出框content选项

您可以将该content选项传递给Bootstrap.popover()方法，以将图像插入到弹出窗口中。您也可以使用data-content属性设置此选项。

让我们尝试以下示例以了解其基本工作原理：

例试试这个代码»

<!DOCTYPE html>

<head>

<title>Show Images in Bootstrap Popovers</title>

$(document).ready(function(){

$('[data-toggle="popover"]').popover({

placement : 'top',

trigger : 'hover',

html : true,

content : '<div class="media"><img src="images/avatar-tiny.jpg" class="mr-3" alt="Sample Image"><div class="media-body"><h6 class="media-heading">Jhon Carter</h6><p>Excellent Bootstrap popover! I really love it.</p></div></div>'

});

</script>

<style>

.wrapper{

margin: 200px 150px 0;

}

</style>

</head>

<body>

<button type="button" class="btn btn-primary" data-toggle="popover">Popover without Title</button>

<button type="button" class="btn btn-primary" data-toggle="popover" title="User Info">Popover with Title</button>

</div>

</body>

</html>

读到这里，这篇“怎么在Bootstrap弹出窗口中插入图像”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注创新互联行业资讯频道。

上一篇：win11充电有感叹号如何解决