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. hover如何在移动浏览器上触发

    例如HTML结构如下 <div>menu<ul> <li>item1</li> <li>item2</li> </ul&g ...

  2. Kali Linux 渗透测试手册（1.1）安装虚拟机

    翻译来自:掣雷小组 成员信息: thr0cyte, Gr33k, 花花, 小丑, R1ght0us, 7089bAt, 一．配置KALI Linux和渗透测试环境 在这一章,我们将覆盖以下内容: 在W ...

  3. 百度APP移动端网络深度优化实践分享(一)：DNS优化篇

    本文由百度技术团队“蔡锐”原创发表于“百度App技术”公众号,原题为<百度App网络深度优化系列<一>DNS优化>,感谢原作者的无私分享. 一.前言 网络优化是客户端几大技术方 ...

  4. Velocity 模板引擎的应用

    springboot三层机构,还有数据映射待实体.肯定需要一套模板引擎呀.那不然还手写不成. 根据我们的实际业务需求,我添加了一套数据库反向生成实体类的模板,用的是Velocity 的引擎. 不多说直 ...

  5. 【Spark篇】---Spark中Shuffle文件的寻址

    一.前述 Spark中Shuffle文件的寻址是一个文件底层的管理机制,所以还是有必要了解一下的. 二.架构图 三.基本概念: 1) MapOutputTracker MapOutputTracker ...

  6. 简述java接口和C++虚类的相同和不同之处

    C++虚类相当于java中的抽象类,与接口的不同处是: 1.一个子类只能继承一个抽象类(虚类),但能实现多个接口 2.一个抽象类可以有构造方法,接口没有构造方法 3.一个抽象类中的方法不一定是抽象方法 ...

  7. 云HBase发布全文索引服务,轻松应对复杂查询

    云HBase发布了“全文索引服务”功能,自2019年01月25日后创建的云HBase实例,可以在控制台免费开启此“全文索引服务”功能.使用此功能可以让用户在HBase之上构建功能更丰富的搜索业务,不再 ...

  8. 4.1ASP.NET Core请求过程「深入浅出ASP.NET Core系列」

    希望给你3-5分钟的碎片化学习,可能是坐地铁.等公交,积少成多,水滴石穿,谢谢关注. HTTP请求过程 这里展示整体的HTTP请求的过程,这里化繁为简,保留了主干流程: 从浏览器输入域名开始,这里忽略 ...

  9. python ddt数据驱动（简化重复代码）

    在接口自动化测试中,往往一个接口的用例需要考虑 正确的.错误的.异常的.边界值等诸多情况,然后你需要写很多个同样代码,参数不同的用例.如果测试接口很多,不但需要写大量的代码,测试数据和代码柔合在一起, ...

  10. cocos creator主程入门教程（七）—— MVC架构

    五邑隐侠,本名关健昌,10年游戏生涯,现隐居五邑.本系列文章以TypeScript为介绍语言. 这一篇将介绍在游戏客户端常用的架构MVC架构.一个游戏的MVC如下划分: M:1)单例全局的数据中心Wo ...