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 获取字符串字节数的多种方法
Jun 02 Javascript
基本jquery的控制tabs打开的数量的代码
Oct 17 Javascript
JavaScript中的typeof操作符用法实例
Apr 05 Javascript
JavaScript实现动画打开半透明提示层的方法
Apr 21 Javascript
JQuery实现网页右侧随动广告特效
Jan 17 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
Jan 26 Javascript
一款简单的jQuery图片标注效果附源码下载
Mar 22 Javascript
常用的javascript设计模式
Jan 11 Javascript
微信小程序 自定义对话框实例详解
Jan 20 Javascript
jquery 仿锚点跳转到页面指定位置的实例
Feb 14 Javascript
javascript流程控制语句集合
Sep 18 Javascript
vue-cli3中vue.config.js配置教程详解
May 29 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
1982年日本摄影师镜头下的中国孩子 那无忧无虑的童年
2020/03/12 杂记
PHP实现采集程序原理和简单示例代码
2007/03/18 PHP
判断PHP数组是否为空的代码
2011/09/08 PHP
php递归创建和删除文件夹的代码小结
2012/04/13 PHP
php 启动时报错的简单解决方法
2014/01/27 PHP
Thinkphp中Create方法深入探究
2014/06/16 PHP
WordPress中编写自定义存储字段的相关PHP函数解析
2015/12/25 PHP
thinkPHP订单数字提醒功能的实现方法
2016/12/01 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
JS的replace方法详细介绍
2012/11/09 Javascript
js判断undefined变量类型使用typeof
2013/06/03 Javascript
js特殊字符过滤的示例代码
2014/03/05 Javascript
jQuery中toggle()函数的使用实例
2015/04/17 Javascript
javascript实现table表格隔行变色的方法
2015/05/13 Javascript
全屏js头像上传插件源码高清版
2016/03/29 Javascript
常用的几个JQuery代码片段
2017/03/13 Javascript
让nodeJS支持ES6的词法----babel的安装和使用方法
2017/07/31 NodeJs
JS+css3实现幻灯片轮播图
2020/08/14 Javascript
python 示例分享---逻辑推理编程解决八皇后
2014/07/20 Python
Python中用Decorator来简化元编程的教程
2015/04/13 Python
详解Python中的__new__、__init__、__call__三个特殊方法
2016/06/02 Python
Python中规范定义命名空间的一些建议
2016/06/04 Python
python 排序算法总结及实例详解
2016/09/28 Python
Python django实现简单的邮件系统发送邮件功能
2017/07/14 Python
对Pycharm创建py文件时自定义头部模板的方法详解
2019/02/12 Python
Python的条件锁与事件共享详解
2019/09/12 Python
Tensorflow 实现将图像与标签数据转化为tfRecord文件
2020/02/17 Python
css图标制作教程制作云图标
2014/01/19 HTML / CSS
HTML中meta标签及Keywords
2020/04/15 HTML / CSS
亚洲领先的设计购物网站:Pinkoi
2020/11/26 全球购物
绝对经典成功的大学生推荐信
2013/11/08 职场文书
路政管理求职信
2014/06/18 职场文书
公司行政助理岗位职责
2015/04/11 职场文书
2017元旦、春节期间廉洁自律承诺书
2016/03/25 职场文书
Mysql8.0递归查询的简单用法示例
2021/08/04 MySQL
MYSQL事务的隔离级别与MVCC
2022/05/25 MySQL