Bootstrap -- 插件: 提示工具、弹出框、 警告框消息

1. 提示工具（Tooltip）插件：根据需求生成内容和标记。

使用提示工具：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>My Test bootstrap</title>

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script>

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

    </script>

</head>

<body>

    <div align="center" style="margin-top:100px;">

        <a href="#" class="tooltip-test" data-toggle="tooltip" title="默认的 Tooltip">默认的 Tooltip</a><br/><br/>

        <a href="#" class="tooltip-test" data-toggle="tooltip" data-placement="left" title="左侧的 Tooltip">左侧的 Tooltip</a><br/><br/>

        <a href="#" data-toggle="tooltip" data-placement="top" title="顶部的 Tooltip">顶部的 Tooltip</a><br/><br/>

        <a href="#" data-toggle="tooltip" data-placement="bottom"title="底部的 Tooltip">底部的 Tooltip</a><br/><br/>

        <a href="#" data-toggle="tooltip" data-placement="right" title="右侧的 Tooltip">右侧的 Tooltip</a>

    </div>

</body>

</html>

样式效果：

2.弹出框（Popover）插件：根据需求生成内容和标记。

使用弹出框：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>My Test bootstrap</title>

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script>

        $(function (){

            $("[data-toggle='popover']").popover();

        });

    </script>

</head>

<body>

    <div class="container" style="padding: 200px 200px 200px;" >

        <button type="button" class="btn btn-default" title="弹出消息"

                data-container="body" data-toggle="popover" data-placement="left"

                data-content="左侧的弹出框 中的一些内容">

            左侧的弹出框

        </button>

        <button type="button" class="btn btn-primary" title="弹出消息"

                data-container="body" data-toggle="popover" data-placement="top"

                data-content="顶部的弹出框 中的一些内容">

            顶部的弹出框

        </button>

        <button type="button" class="btn btn-success" title="弹出消息"

                data-container="body" data-toggle="popover" data-placement="bottom"

                data-content="底部的弹出框 中的一些内容">

            底部的弹出框

        </button>

        <button type="button" class="btn btn-warning" title="弹出消息"

                data-container="body" data-toggle="popover" data-placement="right"

                data-content="右侧的弹出框 中的一些内容">

            右侧的弹出框

        </button>

    </div>

</body>

</html>

样式效果：

3. 警告框（Alert）消息：大多是用来向终端用户显示诸如警告或确认消息的信息。

使用警告框消息：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>My Test bootstrap</title>

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script>

        $(function(){

            $(".close").click(function(){

                $("#myAlert1").alert('close');

                $("#myAlert2").alert('close');

            });

        });

    </script>

</head>

<body>

    <h3>警告框</h3>

    <div id="myAlert1" class="alert alert-success">

        <a href="#" class="close" data-dismiss="alert">成功消息</a>

        <strong>成功！</strong>程序运行正常。

    </div>

    <div id="myAlert2" class="alert alert-warning">

        <a href="#" class="close" data-dismiss="alert">警告消息</a>

        <strong>警告！</strong>程序运行异常。

    </div>

</body>

</html>

样式效果：

Bootstrap -- 插件: 提示工具、弹出框、 警告框消息的更多相关文章

  1. Bootstrap入门（二十九）JS插件6：弹出框

    Bootstrap入门(二十九)JS插件6:弹出框 加入小覆盖的内容,像在iPad上,用于存放非主要信息 弹出框是依赖于工具提示插件的,那它也和工具提示是一样的,是需要初始化才能够使用的 首先我们引入 ...

  2. Bootstrap历练实例：弹出框(popover)事件

    事件 下表列出了弹出框(Popover)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 show.bs.popover 当调用 show 实例方法时立即触发该事件. $('#my ...

  3. bootstrap中popover.js(弹出框)使用总结+案例

    bootstrap中popover.js(弹出框)使用总结+案例 *转载请注明出处: 作者:willingtolove: http://www.cnblogs.com/willingtolove/p/ ...

  4. bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题

    答案来自老外http://stackoverflow.com/questions/14795035/twitter-bootstrap-modal-blocks-text-input-field $( ...

  5. iOS：提示框(警告框)控件UIActionSheet的详解

    提示框(警告框)控件2:UIActionSheet 功能:当点击按钮或标签等时,弹出一个提示框,显示必要的提示,然后通过添加的按钮完成需要的功能.它与导航栏类似,它继承自UIView.   风格类型: ...

  6. iOS:提示框(警告框)控件UIAlertView的详解

    提示框(警告框)控件:UIAlertView   功能:当点击按钮或标签等时,弹出一个提示框,显示必要的提示,然后通过添加的按钮完成需要的功能.   类型:typedef NS_ENUM(NSInte ...

  7. Bootstrap Modal多个弹出层顺序

    Bootstrap Modal多个弹出层顺序与div的顺序关联.后来者居上:即div靠后的modal层弹出的时候会在上层. 比如上图所示,模态框2弹出的时候会在模态框1上面.

  8. PropertyGrid—为复杂属性提供下拉式编辑框和弹出式编辑框

    零.引言 PropertyGrid中我们经常看到一些下拉式的编辑方式(Color属性)和弹出式编辑框(字体),这些都是为一些复杂的属性提供的编辑方式,本文主要说明如何实现这样的编辑方式. 一.为属性提 ...

  9. java 弹出选择目录框（选择文件夹），获取选择的文件夹路径

    java 弹出选择目录框(选择文件夹),获取选择的文件夹路径 java 弹出选择目录框(选择文件夹),获取选择的文件夹路径:int result = 0;File file = null;String ...

随机推荐

  1. Oracle AWR报告详细分析--比较详细

    https://blog.csdn.net/demonson/article/details/79474133

  2. iOS 好文源码收藏

    bireme 大佬的 iOS 保持界面流畅的技巧 https://blog.ibireme.com/2015/11/12/smooth_user_interfaces_for_ios/ 深入理解Run ...

  3. IconFont的iOS使用

    IconFont的使用 Iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载.在线存储.格式转换等功能.阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具. https:// ...

  4. 和我一起学习爬虫之HTTP/HTTPS抓包工具--Fiddler

    HTTP/HTTPS抓包工具--Fiddler Fiddler[ˈfɪdlə(r)] 1. HTTP代理神器Fiddler Fiddler是一款强大Web调试工具,它能记录所有客户端和服务器的HTTP ...

  5. Win7 + CentOS7 双系统

    记录一下更改系统启动菜单的方法. 前提: 1. 先安装 Win7 在硬盘第一分区,其它分区在 Win7 下处于未分配状态. 2. 再安装 CentOS 到上述未分配分区.(注意:手动分区时,可以留一定 ...

  6. 聊聊分布式开发 Spring Cloud

    概述 本文章只是简单介绍了微服务开发的一些关键词,如果需要知道具体实现和可以评论留言 我会及时的增加连接写出具体实现(感觉没人看 就没写具体实现). 持续更新中...... SpringCloud和D ...

  7. PHP全栈学习笔记15

    PHP标记风格 PHP一共支持4种标记风格 <?php echo "这是XML风格的标记"; ?> 脚本风格 <script language="php ...

  8. ansible基础-优化

    简介 当管理集群达到一定规模时,ansible达到性能瓶颈是难以避免的,此时我们可以通过一定手段提高ansible的执行效率和性能. 笔者虽未管理过超大规模服务器,但也通过查找资料和咨询大神了解了一些 ...

  9. spring-boot-starter-mail技术总结

    1. spring-boot-starter-mail技术总结 1.1. 配置读取类SMTPTransport 在application中需要配置的信息,在此类中都可以看到,可以在此类打断点查看 1. ...

  10. 使用redis有序集合sorted set设计高效查询ip所在地

    1.将纯真版ip数据  xxx.data 导入至 redis(整个过程只花费了几秒) 引入nuget包 CSRedisCore,使用方法见:https://github.com/2881099/csr ...