五、Bootstrap插件设计
5、Bootstrap提示框
Bootstrap提示框包括工具提示框、警告框和弹出框三大类。
工具提示框(Tooltip)插件
Tooltip插件是受 Jason Frame 写的 jQuery.tipsy 的启发。Tooltip)插件做了很多改进,例如不需要依赖图像,而是改用 CSS 实现动画效果,用 data 属性存储标题信息。
Tooltip插件根据需求生成内容和标记,默认情况下是把tooltip放在它们的触发元素后面。您可以有以下两种方式添加tooltip:
- 通过 data 属性:如需添加一个提tooltip,只需向一个锚标签添加 data-toggle="tooltip" 即可。锚的 title 即为tooltip的文本。默认情况下,插件把tooltip设置在顶部。
<a href="#" data-toggle="tooltip" title="Example tooltip">请悬停在我的上面</a>
- 通过 JavaScript:通过 JavaScript 触发tooltip:
$('#identifier').tooltip(options)
Tooltip插件不像之前所讨论的下拉菜单及其他插件那样,它不是纯 CSS 插件。如需使用该插件,您必须使用 jquery 激活它(读取 javascript)。使用下面的脚本来启用页面中的所有的tooltip:$(function () { $("[data-toggle='tooltip']").tooltip(); });
<div class="bs-example bs-example-tooltip"> <div class="tooltip left" role="tooltip"> <div class="tooltip-arrow"></div> <div class="tooltip-inner"> 左侧工具提示框 </div> </div> <div class="tooltip top" role="tooltip"> <div class="tooltip-arrow"></div> <div class="tooltip-inner"> 上侧工具提示框 </div> </div> <div class="tooltip right" role="tooltip"> <div class="tooltip-arrow"></div> <div class="tooltip-inner"> 右侧工具提示框 </div> </div> <div class="tooltip bottom" role="tooltip"> <div class="tooltip-arrow"></div> <div class="tooltip-inner"> 下侧工具提示框 </div> </div> </div>
<div class="bs-example tooltip-demo"> <div class="bs-example-tooltips"> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="左侧工具提示框">左侧工具提示框</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="上侧工具提示框">上侧工具提示框</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="右侧工具提示框">右侧工具提示框</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="下侧工具提示框">下侧工具提示框</button> </div> </div><!-- /example -->
弹出框(Popover)插件
弹出框(Popover)与工具提示(Tooltip)类似,提供了一个扩展的视图。如需激活弹出框,用户只需把鼠标悬停在元素上即可。弹出框的内容完全可使用 Bootstrap 数据 API(Bootstrap Data API)来填充。该方法依赖于工具提示(tooltip)。
如果您想要单独引用该插件的功能,那么您需要引用 popover.js,它依赖于工具提示(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 激活它(读取 javascript)。使用下面的脚本来启用页面中的所有的弹出框(popover):
$(function () { $("[data-toggle='popover']").popover(); });
<div class="bs-example bs-example-popover"> <div class="popover left"> <div class="arrow"></div> <h3 class="popover-title">向左弹出框(静态)</h3> <div class="popover-content"> <p>这是一个向左弹出框(静态).</p> </div> </div> <div class="popover top"> <div class="arrow"></div> <h3 class="popover-title">向上弹出框(静态)</h3> <div class="popover-content"> <p>这是一个向上弹出框(静态).</p> </div> </div> <div class="popover right"> <div class="arrow"></div> <h3 class="popover-title">向右弹出框(静态)</h3> <div class="popover-content"> <p>这是一个向右弹出框(静态).</p> </div> </div> <div class="popover bottom"> <div class="arrow"></div> <h3 class="popover-title">向下弹出框(静态)</h3> <div class="popover-content"> <p>这是一个向下弹出框(静态).</p> </div> </div> <div class="clearfix"></div> </div>
<div class="bs-example popover-demo"> <div class="bs-example-popovers"> <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="这是一个向右弹出框(动态)."> 向右弹出框(动态) </button> <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="这是一个向上弹出框(动态)."> 向上弹出框(动态) </button> <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="这是一个向下弹出框(动态)."> 向下弹出框(动态) </button> <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="这是一个向左弹出框(动态)."> 向左弹出框(动态) </button> </div> </div><!-- /example -->
警告框(Alert)插件
警告框(Alert)消息大多是用来向终端用户显示诸如警告或确认消息的信息。使用警告框(Alert)插件,您可以向所有的警告框消息添加可取消(dismiss)功能。
用法
有以下两种方式启用警告框的可取消(dismissal)功能:
- 通过 data 属性:通过数据 API(Data API)添加可取消功能,只需要向关闭按钮添加 data-dismiss="alert",就会自动为警告框添加关闭功能。
<a class="close" data-dismiss="alert" href="#" aria-hidden="true"> × </a>
- 通过 JavaScript:通过 JavaScript 添加可取消功能:
$(".alert").alert()
<div class="bs-example bs-example-standalone"> <div class="alert alert-warning alert-dismissible fade in" role="alert"> <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <strong>Alert!</strong> 这是一个警告框. </div> <div class="alert alert-danger alert-dismissible fade in" role="alert"> <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4>Danger!</h4> <p>系统提示该操作具有危险性.</p> <p> <button type="button" class="btn btn-danger">确定</button> <button type="button" class="btn btn-default">取消</button> </p> </div> </div><!-- /example -->