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模拟的Ping效果代码 (Web Ping)
Mar 13 Javascript
js实现运动logo图片效果及运动元素对象sportBox使用方法
Dec 25 Javascript
jquery ready(fn)事件使用介绍
Aug 21 Javascript
node.js中的socket.io入门实例
Apr 26 Javascript
jquery的ajax提交form表单的两种方法小结(推荐)
May 25 Javascript
BootStrap 超链接变按钮的实现方法
Sep 25 Javascript
JS获取年月日时分秒的方法分析
Nov 28 Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
Jan 05 Javascript
React通过redux-persist持久化数据存储的方法示例
Feb 14 Javascript
Vue.js 中的实用工具方法【推荐】
Jul 04 Javascript
Element Notification通知的实现示例
Jul 27 Javascript
jenkins自动构建发布vue项目的方法步骤
Jan 04 Vue.js
微信小程序中做用户登录与登录态维护的实现详解
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
php cookie 登录验证示例代码
2009/03/16 PHP
php cc攻击代码与防范方法
2012/10/18 PHP
PHP编程函数安全篇
2013/01/08 PHP
php使用websocket示例详解
2014/03/12 PHP
讲解WordPress中用于获取评论模板和搜索表单的PHP函数
2015/12/28 PHP
PHP数据库表操作的封装类及用法实例详解
2016/07/12 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
Laravel框架实现修改登录和注册接口数据返回格式的方法
2018/08/17 PHP
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
2013/05/07 Javascript
Jquery Ajax xmlhttp请求成功问题
2015/02/04 Javascript
13个PHP函数超实用
2015/10/21 Javascript
Angular 页面跳转时传参问题
2016/08/01 Javascript
JS限定手机版中图片大小随分辨率自动调整的方法
2016/12/05 Javascript
详解js的事件处理函数和动态创建html标记方法
2016/12/16 Javascript
Ajax跨域实现代码(后台jsp)
2017/01/21 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
2017/05/08 jQuery
微信小程序上传图片实例
2018/05/28 Javascript
jQuery中each遍历的三种方法实例分析
2018/09/07 jQuery
JS定义函数的几种常用方法小结
2019/05/23 Javascript
js实现鼠标拖拽div左右滑动
2020/01/15 Javascript
Vue父子之间值传递的实例教程
2020/07/02 Javascript
python模拟新浪微博登陆功能(新浪微博爬虫)
2013/12/24 Python
Python入门篇之正则表达式
2014/10/20 Python
基于Python实现的ID3决策树功能示例
2018/01/02 Python
Python 常用日期处理 -- calendar 与 dateutil 模块的使用
2020/09/02 Python
python中entry用法讲解
2020/12/04 Python
python3定位并识别图片验证码实现自动登录功能
2021/01/29 Python
瑞贝卡·泰勒官方网站:Rebecca Taylor
2016/09/24 全球购物
Tostadora意大利:定制T恤
2019/04/08 全球购物
汇科协同Java笔试题
2012/03/31 面试题
《跨越百年的美丽》教学反思
2014/02/11 职场文书
教师调动申请报告
2015/05/18 职场文书
高三化学教学反思
2016/02/22 职场文书
使用Python+OpenCV进行卡类型及16位卡号数字的OCR功能
2021/08/30 Python
Python实现提取PDF简历信息并存入Excel
2022/04/02 Python
Android实现获取短信验证码并自动填充
2023/05/21 Java/Android