bootstrap中popover的使用方法记录

在bootstrap中的网站UI还是相当不错的，有时候需要使用点击后的状态返回弹出窗口。popover弹出窗口简单，方框不大；整理一下使用popover的记录。

1，在html中直接使用popover的效果，不需要交互的时候，可以这样。

<a tabindex="0" class="btn" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">可消失的弹出框</a>

注意：官方有备注信息

可消失的弹出框效果时，为了更好的跨浏览器和跨平台效果，你必须使用 <a> 标签，不能使用 <button> 标签，并且，还必须包含 role="button" 和 tabindex 属性。

上面的参数挺多的，下面整理一下：

tabindex="0" 

class="btn" 

role="button"

上面这三个不多解释。

 data-toggle="popover" 

这个参数一般照写。

data-trigger="focus"

这个参数是指触发些效果的动作。

参数可以有click,hover,focus,manual

manual是指人工控制。

 title="Dismissible popover" 

是指弹出方框中的标题问题，可以为空。

data-content="And here's some amazing content. It's very engaging. Right?"

是指弹出方框中的内容部分。

备注：如果标题和内容都为空，不会产生效果。

在jquery中控制popover的触发与隐藏方法：

$(".class").popover('show')

$(".class").popover('hide')

还有几个监听popover的事件的方法：

$(".class").on('hidden.bs.popover',function(){

//code

})

五个事件分别是：

show.bs.popover

shown.bs.popover

hide.bs.popover

hidden.bs.popover

inserted.bs.popover

大概就这么多重点记录。