0%

8.7.3 弹出框支持的属性

8.7.3 弹出框支持的属性

当使用data-*属性定义弹出框时,Bootstrap 除了提供了data-toggledata-placenmentdata-content属性之外,Bootstrap还为弹出框提供了大量其他支持属性,下面分别介绍它们。

Bootstrap为弹出框提供的属性

属性 描述
data-animation boolean属性,用于指定是否对弹出框应用.fade过渡效果。
data-container 指定将弹出框附加到特定元素上,该属性支持各种选择器或false值,false值表示不附加。比如container:'body'表明将弹出框附加到页面<body>元素上。
data-content 指定弹出框的内容。
data-delay 指定延迟多少毫秒后显示或关闭弹出框;该属性支持简单数值或形如{'show':500,'hide':200}的对象,该对象指定延迟500毫秒显示弹出框,延迟200毫秒关闭弹出框。
data-html 指定是否将HTML代码直接转换为弹出框。该属性默认为falseBootstrap先使用text()方法处理工具提示内容,然后再添加弹出框。
data-placement 指定弹出框的出现位置。该属性的默认值是'right'
data-selector 如果指定了该属性,那么弹出框将会由该属性表示的HTML元素负责代理。
data-template 指定弹出框的HTML模板,该属性的默认值是Bootstrap提供的HTML模板。
data-title 设置默认的弹出框的标题。当title属性不存在或属性值为空时,该属性才会发挥作用。
data-trigger 设置触发弹出框的方法,可选值为clickhoverfocusmanual,该属性的默认值是click—这意味着需要通过鼠标单击来触发弹出框。该属性还支持多个属性值的组合。比如`click

popover方法参数

使用JS激活弹出框时要调用弹出框的popover()方法,调用该方法时可传入如下参数。

  1. 字符串参数:该字符串参数支持'show''hide''toggle''destroy'等字符串,分别表示显示弹出框、隐藏弹出框、切换弹出框的显示/隐藏、销毁弹出框。如果调用popover()方法时传入了'destroy'字符串,那就意味着要销毁该弹出框,因此页面以后再也不会显示该弹出框。
  2. JS对象参数:该JS对象支持上面介绍的以data-开头的各种选择,只是无须使用data-前缀。在前面示例中激活弹出框时就传入了{html:true}对象作为参数

原文链接: 8.7.3 弹出框支持的属性