Bootstrap警告框（Alert）插件使用方法
作者：boonyaxnn 发布时间：2024-04-27 15:23:05
标签：Bootstrap,警告框,Alert
有以下两种方式启用警告框的可取消（dismissal）功能：
1、通过 data 属性：通过数据 API（Data API）添加可取消功能，只需要向关闭按钮添加 data-dismiss="alert"，就会自动为警告框添加关闭功能。
<a class="close" data-dismiss="alert" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" aria-hidden="true">×</a>
2、通过 JavaScript添加可取消功能：
$(".alert").alert()
html代码
<div class="alert alert-success">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="close" data-dismiss="alert" aria-hidden="true">√</a>
<strong>成功！</strong>您的网络连接已成功！
</div>
效果图：
3、下面是一些警告框（Alert）插件中有用的方法：
效果图
4、下表列出了警告框（Alert）插件中要用到的事件。这些事件可在函数中当钩子使用。
html代码
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 警告框（Alert）插件</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap.min.css" rel="external nofollow" >
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<style>
body{
font-size:24px;
}
</style>
</head>
<body>
<div class="container">
<h3>警告框（Alert）插件 alert() 方法</h3>
<div id="myAlert" class="alert alert-warning">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="close" data-dismiss="alert">×</a>
<strong>警告！</strong>您的网络连接有问题。
</div>
<script type="text/javascript">
$(function() {
$("div#myAlert").bind('click',function () {
alert("警告消息框被关闭。");
});
});
</script>
</div>
</body>
</html>
效果图：
0
投稿猜你喜欢
目录1、系统环境，必要知识2、安装python3.6.53、安装Django4、安装uWSGI5、安装nginx6、MySQL安装配置7、编- 今天下午主要做了个实验，是针对 测试表的列，进行添加，修改，删除的。做法如下： 增加一列： alter table emp4 add tes
- 下面，小编将通过一组实例演示，让大家更直观，更清楚明白的了解要设置中文这一内容的操作步骤。首先展示实例代码：import pygamefro
- 1.简介torch.autograd.Variable是Autograd的核心类，它封装了Tensor，并整合了反向传播的相关实现Varia
- 使用py时可能需要连续运行多条shell 命令1.# coding: UTF-8import sysreload(sys)sys.setde
- 今天给大家介绍一个可以获取当前系统信息的库——psutil利用psutil库可以获取系统的一些信息，如cpu，内存等使用率，从而可以查看当前
- 1、简介：Oracle的sql*plus是与oracle进行交互的客户端工具。在sqlplus中，可以运行sqlplus命令与sqlplus
- 当你的查询相对简单的时候，每次从头开始创建SQL语句也不费什么工夫，不过，复杂的查询就不同了，每次都从头来会产生很多开发错误。因此，一旦让S
- .sh脚本可以自动运行多次实验。Windows系统下实现pycharm运行.sh文件1、安装GitGit官网下载或者点击这里下载默认设置安装
- 本文为大家分享了mysql 8.0.20 winx64安装配置方法，记录如下。MySQL官网：链接直接点击链接也可以下载：mysql 8.0
- 1.参数propsprops是一个对象，包含父组件传递给子组件的所有数据。在子组件中使用props进行接收。包含配置声明并传入的所有的属性的
- 目录项目引入flask-sqlalchemyORM简介及模型定义表关系类型及编码实现一对多关系（多对一关系）一对一关系多对多关系数据库基本操
- 以下内容给大家介绍了MYSQL通过Adjacency List (邻接表)来存储树形结构的过程介绍和解决办法，并把存储后的图例做了分析。今天
- 本文实例讲述了Python封装shell命令的方法。分享给大家供大家参考。具体实现方法如下：# -*- coding: utf-8 -*-i
- 本文实例为大家分享了python实现彩 * 转换成灰度图的具体代码，供大家参考，具体内容如下from PIL import Imageimpo
- 简介EXISTS用于检查子查询是否至少会返回一行数据，该子查询实际上并不返回任何数据，而是返回值True或False。EXISTS 指定一个
- 一、背景1.项目描述你拥有一个超市(Supermarket Mall)。通过会员卡，你用有一些关于你的客户的基本数据，如客户ID，年龄，性别
- 1.开发jQuery 插件的基本格式 (function ($) { $.extend($.fn, { }) })(jQuery) 2.开发
- SQL Server数据库涉及到的数据仓库概念：1．多维数据集：多维数据集是联机分析处理 (OLAP) 中的主要对象，是一项可对数据仓库中的
- 介绍在使用matplotlib的过程中，发现不能像matlab一样同时开几个窗口进行比较，于是查询得知了交互模式，但是放在脚本里运行的适合却
