当前第2页 返回上一页
【关键字】
除了使用options对象，还可以使用关键字，'show'、'hide'、'toggle'、'destroy'
1 2 3 4 5 6 7 8 9 10 11 12 13 | <body style="margin-top:100px;">
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" title="标题" data-content="内容" id="btn1">按钮1</button>
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" title="标题" data-content="内容" id="btn2">按钮2</button>
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" title="标题" data-content="内容" id="btn3">按钮3</button>
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" title="标题" data-content="内容" id="btn4">按钮4</button>
<script>
$(function(){
$('#btn1').popover('show');
$('#btn2').popover('hide');
$('#btn3').popover('toggle');
$('#btn4').popover('destroy');
});
</script>
|
【事件】
该插件支持5种类型的事件订阅
1 2 3 4 5 | show.bs.tooltip show方法调用之后立即触发该事件
shown.bs.tooltip 此事件在tooltip已经显示出来（并且同时在 CSS 过渡效果完成）之后被触发
hide.bs.tooltip hide方法调用之后立即触发该事件。
hidden.bs.tooltip 此事件在tooltip被隐藏（并且同时在 CSS 过渡效果完成）之后被触发
inserted.bs.tooltip 当tooltip模板加载到DOM中上时，在show.bs.tooltip触发后，触发该事件
|
1 2 3 4 5 6 7 8 9 10 11 12 13 | <body style="margin-top:50px;">
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="right" title="标题" data-content="内容" id="btn">按钮</button>
<script>
$(function(){
$('#btn').popover();
$("#btn").on("show.bs.popover",function(e){
$(this).html('关闭');
}).on("hide.bs.popover",function(e){
$(this).html('打开');
})
});
</script>
|
对比提示框
1、提示框 tooltip 的默认触发事件是 hover 和 focus，而弹出框 popover 是 click
2、提示框 tooltip 只有一个内容(title)，而弹出框不仅可以设置标题（title）还可以设置内容(content)
3、提示框 tooltip 默认居上显示，而弹出框 popover 默认居右显示
4、显示模板不同
提示框tooltip的模板：
1 2 3 4 | <div class="tooltip" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner"></div>
</div>
|
弹出框popover的模板：
1 2 3 4 5 | <div class="popover" role="tooltip">
<div class="arrow"></div>
<h3 class="popover-title"></h3>
<div class="popover-content"></div>
</div>
|
更多编程相关知识，请访问：编程教学！！
以上就是深入了解Bootstrap中的弹出框的详细内容，更多文章请关注木庄网络博客！
返回前面的内容
相关阅读 >>
浅谈bootstrap中的自适应屏幕
bootstrap和css区别
学习bootstrap需要什么基础
bootstrap属于js框架吗
easyui和bootstrap的区别
bootstrap cdn是什么
浅谈查看bootstrap和jquery版本对应关系的方法
bootstrap怎么更改主题
bootstrap模态框是用来做什么的？
浅谈bootstrap3和bootstrap4的差异
更多相关阅读请进入《bootstrap》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » 深入了解Bootstrap中的弹出框
