Bootstrap 弹出框(Popover)插件.pdfVIP

Bootstrap 弹出框 （Popover ）插件 Bootstrap 弹出框 （Popover ）插件 弹出框 （Popover ）与⼯具提⽰ （Tooltip ）类似，提供了⼀个扩展的视图。如需激活弹 出框，⽤户只需把 标悬停在元素上即可。弹出框的内容完全可使⽤ Bootstrap 数据 API （Bootstrap Data API ）来填充。该⽅法依赖于⼯具提⽰ （tooltip ）。 如果您想要单独引⽤该插件的功能，那么您需要引⽤ popover.j s ，它依赖于 ⼯具提⽰ （Tooltip ）插件。或者，正如 Bootstrap 插件概览 ⼀章中所提到，您可以引⽤ bootstrap.js 或压缩版的 bootstrap.min.js。 ⽤法 弹出框 （Popover ）插件根据需求⽣成内容和标记，默认情况下是把弹出框 （popover ）放在它们的触发元素后⾯。您可以有以下两种⽅式添加弹出框 （popover ）： 通过 data 属性：如需添加⼀个弹出框 （popover ），只需向⼀个锚/按钮标签添 加 data-toggle= popover 即可。锚的 title 即为弹出框 （popover ）的⽂本。默 认情况下，插件把弹出框 （popover ）设置在顶部。 a href=# data-toggle=popover title=Example popover 请悬停在我的上⾯ /a 通过 JavaScript ：通过 JavaScript 启⽤弹出框 （popover ）： $(#identifier).popover(options) 弹出框 （Popover ）插件不像之前所讨论的下拉菜单及其他插件那样，它不是纯 CSS 插件。如需使⽤该插件，您必须使⽤ jquery 激活它 （读取 j avascript ）。使⽤下⾯的脚 本来启⽤页⾯中的所有的弹出框 （popover ）： $(f nction () { $([data-toggle=popover]).popover(); }); 实例 下⾯的实例演⽰了通过 data 属性使⽤弹出框 （Popover ）插件的⽤法。 !DOCTYPE html html head titleBootstrap 实例 - 弹出框 （Popover）插件/title link href=/bootstrap/css/bootstrap.min.css rel=stylesheet script src=/scripts/jq ery .min.js/script script src=/bootstrap/js/bootstrap.min.js/script /head body div class=container style=padding: 100px 50px 10px; b tton type=b tton class=btn btn-defa lt title=Popover ti 左侧的 Popover /b tton b tton type=b tton class=btn btn-primary title=Popover ti 顶部的 Popover /b tton b tton type=b tton class=btn btn-s ccess title=Popover ti 底部的 Popover /b tton b tton type=b tton class=btn btn-warning title=Popover ti 右侧的 Popover /b tton /div script$(f nction () { $([data-toggle=popover]).popover(); }); /script /div /body /html 尝试⼀下 » 结果如下所⽰： 选项 有⼀些选项是通过 Bootstrap 数据 API （Bootstrap Data API ）添加或通过 JavaScript 调 ⽤的。下表列出了这些选项： Data 属 选项名称 类型/默认值