五、Bootstrap插件设计
5、Bootstrap提示框
Bootstrap提示框包括工具提示框、警告框和弹出框三大类。
工具提示框(Tooltip)插件
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)插件
用法
有以下两种方式启用警告框的可取消(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 -->