Bootstrap中弹出框的示例分析

这篇文章主要介绍了Bootstrap中弹出框的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

专注于为中小企业提供网站设计制作、成都网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业沙坪坝免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了上千家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。

表面上看,弹出框其实就是一种特殊的提示框,只是多了一个标题而已。但实际上,还是有不同之处的。

基本用法

在制作提示框(tooltip)时,可以使用

Bootstrap中弹出框的示例分析

属性参数

在弹出框制作时,可以在HTML中定义下表所列的自定义属性

[注意]data-palcement默认居右显示,而不是居上显示

Bootstrap中弹出框的示例分析


上侧
下侧
无动画
有动画
hover触发
click触发
不延迟
延迟500ms

Bootstrap中弹出框的示例分析

JS触发

popover的JS用法与tooltip的用法一样,支持使用options对象的方法来向popover()方法传参

$(element).popover(options);

options对象里的参数包括amimation、html、placement、selector、original-title、title、trigger、delay、container、template

详细情况移步至此


按钮

Bootstrap中弹出框的示例分析

【关键字】

除了使用options对象,还可以使用关键字,'show'、'hide'、'toggle'、'destroy'


按钮1
按钮2
按钮3
按钮4

Bootstrap中弹出框的示例分析

【事件】

该插件支持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触发后,触发该事件

按钮

Bootstrap中弹出框的示例分析

对比提示框

1、提示框 tooltip 的默认触发事件是 hover 和 focus,而弹出框 popover 是 click

2、提示框 tooltip 只有一个内容(title),而弹出框不仅可以设置标题(title)还可以设置内容(content)

3、提示框 tooltip 默认居上显示,而弹出框 popover 默认居右显示

4、显示模板不同

提示框tooltip的模板:


    
    

弹出框popover的模板:


    
         

感谢你能够认真阅读完这篇文章,希望小编分享的“Bootstrap中弹出框的示例分析”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


当前文章:Bootstrap中弹出框的示例分析
分享路径:
http://myzitong.com/article/jieido.html

其他资讯