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. Socket深度探索 4 PHP（转）

    [连载] Socket 深度探索 4 PHP (一) [连载] Socket 深度探究 4 PHP (二) [连载] Socket 深度探究 4 PHP (三)

  2. mysql建数据库的字符集与排序规则

    1.字符集说明: 一般选择utf8.下面介绍一下utf8与utfmb4的区别. utf8mb4兼容utf8,且比utf8能表示更多的字符.至于什么时候用,看你的做什么项目了,到http://blog. ...

  3. 阿里巴巴excel工具easyexcel 助你快速简单避免OOM

    Java解析.生成Excel比较有名的框架有Apache poi.jxl.但他们都存在一个严重的问题就是非常的耗内存,poi有一套SAX模式的API可以一定程度的解决一些内存溢出的问题,但POI还是有 ...

  4. MySQL性能优化总结___本文乃《MySQL性能调优与架构设计》读书笔记！

    一.MySQL的主要适用场景 1.Web网站系统 2.日志记录系统 3.数据仓库系统 4.嵌入式系统 二.MySQL架构图: 三.MySQL存储引擎概述 1)MyISAM存储引擎 MyISAM存储引擎 ...

  5. Ubuntu 安装yii2 advanced版 遇到的坑

    1.安装 Composer https://www.yiichina.com/doc/guide/2.0/start-installation通过 Composer 安装 curl -sS https ...

  6. 《深入理解Java虚拟机》-----第5章 jvm调优案例分析与实战

    案例分析 高性能硬件上的程序部署策略 例 如 ,一个15万PV/天左右的在线文档类型网站最近更换了硬件系统,新的硬件为4个CPU.16GB物理内存,操作系统为64位CentOS 5.4 , Resin ...

  7. FloatingActionButtonDemo【悬浮按钮的使用，顺带snackBar的使用】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 FloatingActionButton简称FAB. 一. 对于App或某个页面中是否要使用FloatingActionButton ...

  8. [macOS开发.NET Core] 开篇 & 抉择 & 先利其器

    一直以来MacBook是大多数开发者的首选,无论是macOS的便利性,还是MBP的外观,更或者是为了装13,我一直认为一个开发者必须得拥有一部MBP.虽然最后的因素是大多数的. 终于在我的努力下说服下 ...

  9. 一套代码小程序&Web&Native运行的探索04——数据更新

    接上文:一套代码小程序&Web&Native运行的探索03 对应Git代码地址请见:https://github.com/yexiaochai/wxdemo/tree/master/m ...

  10. 关于获取资源文件，Class.getResource和ClassLoader.getResource的区别

    原文同步发表至个人博客[夜月归途] 原文链接:http://www.guitu18.com/se/java/2019-02-22/29.html 作者:夜月归途 出处:http://www.guitu ...