bootstrap警告框示例代码分享


Posted in Javascript onMay 17, 2017

本文实例为大家分享了bootstrap警告框的具体代码,供大家参考,具体内容如下

<!DOCTYPE html> 

<html lang="zh-CN"> 
<head> 
 <meta charset="utf-8"> 
 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 
 <title>XXX</title> 
 <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css" rel="external nofollow" > 
 <link rel="stylesheet" href="css/main.css" rel="external nofollow" > 
 <!--[if lt IE 9]> 
 <script src="lib/html5shiv/html5shiv.min.js"></script> 
 <script src="lib/respond/respond.min.js"></script> 
 <![endif]--> 
</head> 
<body> 
 
<div class="alert alert-danger fade in"><!--淡入淡出--> 
 <button type="button" class="close" data-dismiss="alert"> 
  <span>×</span> 
 </button> 
 <p> 
  警告:你的浏览器不支持 
 </p> 
</div> 
<br> 
<br> 
<br> 
<!--用jQuery代替data-dismiss="alert"--> 
<div class="alert alert-danger fade in" id="alert"><!--淡入淡出--> 
 <button type="button" class="close"> 
  <span>×</span> 
 </button> 
 <p> 
  警告:你的浏览器不支持 
 </p> 
</div> 
 
<script src="lib/jquery/jquery.js"></script> 
<script src="lib/bootstrap/js/bootstrap.js"></script> 
<script src="js/main.js"></script> 
<script> 
 $('.close').on('click', function () { 
  $('#alert').alert('close'); 
 }) 
 
 
 //事件,其他雷同 
 $('#alert').on('close.bs.alert', function () { 
  alert('当 close 方法被触发时调用!'); 
 }); 
</script> 
</body> 
 
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用JavaScript+canvas实现图片裁剪
Jan 30 Javascript
在javascript中使用com组件的简单实现方法
Aug 17 Javascript
JS查找数组中重复元素的方法详解
Jun 14 Javascript
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
关于vue面试题汇总
Mar 20 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
May 30 Javascript
React手稿之 React-Saga的详解
Nov 12 Javascript
vue中子组件传递数据给父组件的讲解
Jan 27 Javascript
如何使用JavaScript实现栈与队列
Jun 24 Javascript
layui 富文本编辑器和textarea值的相互传递方法
Sep 18 Javascript
详解Typescript 内置的模块导入兼容方式
May 31 Javascript
快速解决element的autofocus失效问题
Sep 08 Javascript
微信小程序中做用户登录与登录态维护的实现详解
May 17 #Javascript
Angular获取手机验证码实现移动端登录注册功能
May 17 #Javascript
原生JS实现层叠轮播图
May 17 #Javascript
JavaScript手风琴页面制作
May 17 #Javascript
jQuery查找dom的几种方法效率详解
May 17 #jQuery
bootstrap的工具提示实例代码
May 17 #Javascript
js字符串与Unicode编码互相转换
May 17 #Javascript
You might like
一个简单的自动发送邮件系统(二)
2006/10/09 PHP
PHP删除特定数组内容并且重建数组索引的方法.
2011/03/25 PHP
php实现短信发送代码
2015/07/05 PHP
PHP 7的一些引人注目的新特性简单介绍
2015/11/08 PHP
Smarty变量用法详解
2016/05/11 PHP
php实现mysql连接池效果实现代码
2018/01/25 PHP
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
2011/05/24 Javascript
js特殊字符过滤的示例代码
2014/03/05 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
2014/12/09 Javascript
JavaScript实现在标题栏上显示当前日期的方法
2015/03/19 Javascript
JavaScript中使用Math.floor()方法对数字取整
2015/06/15 Javascript
详解JavaScript操作HTML DOM的基本方式
2015/10/21 Javascript
Bootstrap每天必学之下拉菜单
2015/11/25 Javascript
基于JavaScript实现网页倒计时自动跳转代码
2015/12/28 Javascript
js console.log打印对像与数组用法详解
2016/01/21 Javascript
javascript每日必学之多态
2016/02/23 Javascript
js模糊查询实例分享
2016/12/26 Javascript
js 转义字符及URI编码详解
2017/02/28 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
2017/08/03 Javascript
webpack中使用iconfont字体图标的方法
2018/02/22 Javascript
JavaScript实现旋转木马轮播图
2020/03/16 Javascript
Vue2.x-使用防抖以及节流的示例
2021/03/02 Vue.js
[02:40]DOTA2殁境神蚀者 英雄基础教程
2013/11/26 DOTA
[01:33]一分钟玩转DOTA2第三弹:DOTA2&DotA快捷操作大对比
2014/06/04 DOTA
Python利用IPython提高开发效率
2016/08/10 Python
python3操作mysql数据库的方法
2017/06/23 Python
Linux下python与C++使用dlib实现人脸检测
2018/06/29 Python
python操作gitlab API过程解析
2019/12/27 Python
python画图常规设置方式
2020/03/05 Python
英国最受欢迎的手表网站:Watch Shop
2016/10/21 全球购物
酒店拾金不昧表扬信
2014/01/18 职场文书
幼儿教师考核制度
2014/01/25 职场文书
营业员岗位职责
2015/02/11 职场文书
教你如何使用Python Tkinter库制作记事本
2021/06/10 Python
redis中lua脚本使用教程
2021/11/01 Redis
使用 Docker Compose 构建复杂的多容器App
2022/04/30 Servers