目录 搜索
Getting started Accessibility(无障碍) Browsers and devices(浏览器和设备) Build tools(构建工具) Contents(内容) Download(下载) JavaScript Theming Bootstrap(主题Bootstrap) Webpack Components: Alerts Alerts(警报) Components: Badges Badges(徽章) Components: Breadcrumb Breadcrumb Components: Button group Button group(按钮组) Components: Buttons Buttons(按钮) Components: Cards Components: Carousel Cards(卡) Carousel(圆盘传送带) Components: Collapse Collapse(折叠) Components: Dropdowns Dropdowns(下拉菜单) Components: Forms Forms(表单) Components: Input group Input group(输入群组) Components: Input group Jumbotron(广告大屏幕) Components: List group List group(列表组) Components: Modal Modal(互动视窗) Components: Navbar Navbar(导航栏) Components: Navs Navs(导航栏) Components: Pagination Pagination(分页) Components: Popovers Popovers(弹出框) Components: Progress Progress(进度条) Components: Scrollspy Scrollspy(滚动监听) Components: Tooltips Tooltips(提示工具) Content Code(代码) Figures(图片区) Images(图片) Reboot(重置) Tables(表格) Typography(排版) Layout Grid(网格) Layout(布局) Media object(多媒体对象) Utilities for layout(排版通用类别) Migration Migrating to v4(迁移到v4) Utilities Borders(边框) Clearfix(清除浮动) Close icon(关闭图标) Colors(颜色) Display property(显示属性) Embeds(内嵌) Flex(弹性) Float(浮动) Image replacement(图像替换) Position(位置) Screenreaders(荧幕阅读器) Sizing(尺寸) Spacing(间隔) Text(文本) Vertical alignment(垂直对齐) Visibility(能见度)
文字

向站点上的任何元素添加Bootstrap弹出的文档和示例,例如在IOS中找到的文件和示例。

概述

使用popover插件时要知道的事情:

  • 弹出式程序依赖于第三党的图书馆Popper.js用于定位。你必须包括popper.min.js在引导.js或使用bootstrap.bundle.min.js/bootstrap.bundle.js其中包含Popper.js,以便弹出程序能够工作%21。

  • 爆米花需要工具提示插件作为一种依赖。

  • 如果从源头构建我们的JS,要求util.js...

  • 弹出是出于性能原因而选择的,所以你必须自己初始化...

  • 零长titlecontent值将永远不会显示出一个弹出。

  • 指定container: 'body'为了避免在更复杂的组件(如我们的输入组、按钮组等)中呈现问题,%29。

  • 触发隐藏元素的弹出将无法工作。

  • 爆米花.disableddisabled元素必须在包装器元素上触发。

  • 当从跨越多行的锚触发时,弹出式将集中在锚的总体宽度之间。使用white-space: nowrap;你的<a>为了避免这种行为。

  • 在从DOM中删除相应的元素之前,必须隐藏弹出项。

继续阅读,看看如何使用一些例子。

示例:在任何地方启用弹出式

初始化页面上所有弹出框的一种方法是根据它们的data-toggle属性:

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

示例:使用container期权

当父元素上有一些与弹出程序有干扰的样式时,您需要指定一个自定义container这样,Popover的HTML就会出现在该元素中。

$(function () {  $('.example-popover').popover({
    container: 'body'  })})

静态爆出器

有四个选项可用:上、右、底和左对齐。

现场演示

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

四个方向

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top</button><button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right</button><button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom</button><button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left</button>

下一次点击解散

使用focus触发器,以取消用户下一次单击与切换元素不同的元素的弹出。

下一次单击“解散”所需的特定标记

对于正确的跨浏览器和跨平台行为,必须使用<a>标签,<button>标记,并且您还必须包括tabindex属性。

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
$('.popover-dismiss').popover({
  trigger: 'focus'})

使用

通过JavaScript启用弹出:

$('#example').popover(options)

备选方案

选项可以通过数据属性或JavaScript传递。对于数据属性,将选项名追加到data-,如data-animation=""...

Name

Type

Default

Description

animation

boolean

true

Apply a CSS fade transition to the popover

container

string | element | false

false

Appends the popover to a specific element. Example: container: 'body'. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize.

content

string | element | function

''

Default content value if data-content attribute isn't present. If a function is given, it will be called with its this reference set to the element that the popover is attached to.

delay

number | object

0

Delay showing and hiding the popover (ms) - does not apply to manual trigger type If a number is supplied, delay is applied to both hide/show Object structure is: delay: { "show": 500, "hide": 100 }

html

boolean

false

Insert HTML into the popover. If false, jQuery's text method will be used to insert content into the DOM. Use text if you're worried about XSS attacks.

placement

string | function

'right'

How to position the popover - auto | top | bottom | left | right.When auto is specified, it will dynamically reorient the popover. When a function is used to determine the placement, it is called with the popover DOM node as its first argument and the triggering element DOM node as its second. The this context is set to the popover instance.

selector

string | false

false

If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See this and an informative example.

template

string

'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Base HTML to use when creating the popover. The popover's title will be injected into the .popover-header. The popover's content will be injected into the .popover-body. .arrow will become the popover's arrow. The outermost wrapper element should have the .popover class.

title

string | element | function

''

Default title value if title attribute isn't present. If a function is given, it will be called with its this reference set to the element that the popover is attached to.

trigger

string

'click'

How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. manual cannot be combined with any other trigger.

offset

number | string

0

Offset of the popover relative to its target. For more information refer to Popper.js's offset docs.

fallbackPlacement

string | array

'flip'

Allow to specify which position Popper will use on fallback. For more information refer to Popper.js's behavior docs

单个弹出式的数据属性

如上文所述,可以通过使用数据属性来指定单个弹出选项。

方法

异步方法和转换

所有API方法都是异步然后开始过渡.他们会在过渡开始后立即返回给呼叫者,但是在它结束之前此外,方法调用转换组件将被忽略。...

有关更多信息,请参阅我们的JavaScript文档。

$().popover(options)

初始化元素集合的弹出。

.popover('show')

显示元素的弹出。返回给调用方,然后才能实际显示该弹出。%28i.e.。在shown.bs.popover事件发生%29。这被认为是“手动”触发弹出。标题和内容都为零长度的弹出式永远不会显示。

$('#element').popover('show')

.popover('hide')

隐藏元素的弹出。返回给调用方,然后才会隐藏该弹出。%28i.e.。在hidden.bs.popover事件发生%29。这被认为是“手动”触发弹出。

$('#element').popover('hide')

.popover('toggle')

切换元素的弹出。返回给调用方,然后才能实际显示或隐藏该弹出。%28i.e.。在shown.bs.popoverhidden.bs.popover事件发生%29。这被认为是“手动”触发弹出。

$('#element').popover('toggle')

.popover('dispose')

隐藏并破坏元素的弹出。使用委托%28创建的弹出程序,使用大selector期权%29不能在子代触发器元素上单独销毁。

$('#element').popover('dispose')

.popover('enable')

提供元素的弹出显示能力。默认情况下会启用弹出。

$('#element').popover('enable')

.popover('disable')

移除显示元素的弹出功能。只有在重新启用时,才能显示弹出器。

$('#element').popover('disable')

.popover('toggleEnabled')

切换显示或隐藏元素弹出的能力。

$('#element').popover('toggleEnabled')

.popover('update')

更新元素的弹出位置。

$('#element').popover('update')

事件

Event Type

Description

show.bs.popover

This event fires immediately when the show instance method is called.

shown.bs.popover

This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete).

hide.bs.popover

This event is fired immediately when the hide instance method has been called.

hidden.bs.popover

This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete).

inserted.bs.popover

This event is fired after the show.bs.popover event when the popover template has been added to the DOM.

$('#myPopover').on('hidden.bs.popover', function () {  // do something…})
 © 2011–2017 Twitter, Inc.

©2011-2017自带作者

根据麻省理工学院的许可授权的代码。

根据CreativeCommonsAttributionLicense v3.0授权的文档。

上一篇: 下一篇: