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. 深入分析Java I/O 工作机制

    前言 :  I/O 问题是Web 应用中所面临的主要问题之一.而且是任何编程语言都无法回避的问题,是整个人机交互的核心. java 的I/O类操作在java.io 包下,将近80个子类, 大概可以分成 ...

  2. Golang随机数生成

    需求:10以内随机生成2个幸运数字 package main import ( "fmt" "math/rand" ) func main() { fmt.Pr ...

  3. July 01st. 2018, Week 27th. Sunday

    Empty your cup so that it may be filled. 清空杯子,方能再次装满. From Bruce Lee. We can't learn anything new if ...

  4. 【专题教程第8期】基于emWin模拟器的USB BULK上位机开发，仅需C即可，简单易实现

    说明:1.如果你会emWin话的,就可以轻松制作上位机.做些通信和控制类上位机,比使用C#之类的方便程度一点不差,而且你仅会C语言就可以.2.并且成功将emWin人性化,可以做些Windows系统上的 ...

  5. [Err] 1055 - Expression #1 of ORDER BY clause is not in GROUP BY clause 的问题 MySQL

    问题:[Err] 1055 - Expression #1 of ORDER BY clause is not in GROUP BY clause and contains nonaggregate ...

  6. PMBook - 7.项目成本管理

    7.1 规划成本管理 7.1.1 规划成本管理:输入 7.1.1.1 项目章程 7.1.1.2 项目管理计划 7.1.1.3 事业环境因素 7.1.1.4 组织过程资产 7.1.2 规划成本管理:工具 ...

  7. cassandra 堆外内存管理

    为什么需要堆外内存呢 单有一些大内存对象的时候,JVM进行垃圾回收时需要收集所有的这些对象的内存也.增加了GC压力.因此需要使用堆外内存. java 分配堆外内存 org.apache.cassand ...

  8. Abp框架之执行Update-Database 命令系列错误

    废话不多说,直接开门见山.首先的 第一个错误:一般都是,碰到这个问题不要慌,先不要急着去查看sql服务是否开启,首先按F5启动项目,报错之后直接终止项目,然后再执行Update-Database命令 ...

  9. 第66章 视频 - Identity Server 4 中文文档(v1.0.0)

    第66章 视频 66.1 2019 January [NDC] - 使用ASP.NET Core 2.2和3.0保护Web应用程序和API 1月[NDC] - 为基于OpenID Connect / ...

  10. [转] 以后再有人问你selenium是什么，你就把这篇文章给他

    本文转自:https://blog.csdn.net/TestingGDR/article/details/81950593 写在最前面:目前自动化测试并不属于新鲜的事物,或者说自动化测试的各种方法论 ...