Bootstrap框架学习(五）——Bootstrap插件设计之提示框

最新推荐文章于 2025-06-23 08:57:07 发布

转载最新推荐文章于 2025-06-23 08:57:07 发布 · 576 阅读

Web 专栏收录该内容

29 篇文章

订阅专栏

本文介绍了Bootstrap框架中的提示框功能，包括工具提示框、警告框和弹出框等组件的使用方法。通过data属性和JavaScript两种方式，展示了如何创建和定制这些提示框。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

五、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">
    &times;
</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 -->