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 相关文章推荐
农历与西历对照
Sep 06 Javascript
基于jquery的让页面控件不可用的实现代码
Apr 27 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
Jul 09 Javascript
javascript编写实用的省市选择器
Feb 12 Javascript
JQuery实现防止退格键返回的方法
Feb 12 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
Aug 17 Javascript
自己动手写的jquery分页控件(非常简单实用)
Oct 28 Javascript
JS实现图片平面旋转的方法
Mar 01 Javascript
基于javascript实现的购物商城商品倒计时实例
Dec 11 Javascript
微信小程序 实例开发总结
Apr 26 Javascript
详解用node-images 打造简易图片服务器
May 08 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
Aug 03 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
很实用的一个完整email发送程序
2006/10/09 PHP
php中in_array函数用法分析
2014/11/15 PHP
php单例模式示例分享
2015/02/12 PHP
PHP的全局错误处理详解
2016/04/25 PHP
Yii框架防止sql注入,xss攻击与csrf攻击的方法
2016/10/18 PHP
Laravel5框架自定义错误页面配置操作示例
2019/04/17 PHP
IE之动态添加DOM节点触发window.resize事件
2010/07/27 Javascript
用Javascript获取页面元素的具体位置
2013/12/09 Javascript
javascript轻量级模板引擎juicer使用指南
2014/06/22 Javascript
原生js事件的添加和删除的封装
2014/07/01 Javascript
jQuery制作拼图小游戏
2015/01/12 Javascript
JavaScript 匿名函数和闭包介绍
2015/04/13 Javascript
jquery实现简单的轮换出现效果实例
2015/07/23 Javascript
coffeescript使用的方式汇总
2015/08/05 Javascript
用JS实现轮播图效果(二)
2016/06/26 Javascript
AngularJS学习笔记(三)数据双向绑定的简单实例
2016/11/08 Javascript
简单实现js鼠标跟随效果
2020/08/02 Javascript
使用Bootrap和Vue实现仿百度搜索功能
2017/10/26 Javascript
js生成word中图片处理方法
2018/01/06 Javascript
JS模拟实现哈希表及应用详解
2018/05/04 Javascript
微信小程序实现团购或秒杀批量倒计时
2020/11/01 Javascript
使用FormData实现上传多个文件
2018/12/04 Javascript
如何在 Vue 表单中处理图片
2021/01/26 Vue.js
[02:39]我与DAC之Newbee.Moogy:从论坛到TI
2018/03/26 DOTA
详解Python中contextlib上下文管理模块的用法
2016/06/28 Python
程序员写Python时的5个坏习惯,你有几条?
2018/11/26 Python
浅谈对pytroch中torch.autograd.backward的思考
2019/12/27 Python
Python实现病毒仿真器的方法示例(附demo)
2020/02/19 Python
Python PyQt5模块实现窗口GUI界面代码实例
2020/05/12 Python
Python3使用Selenium获取session和token方法详解
2021/02/16 Python
德国50岁以上交友网站:Lebensfreunde
2020/03/18 全球购物
下面代码从性能上考虑,有什么问题
2015/04/03 面试题
小学生作文评语集锦
2014/12/25 职场文书
小学生必读成语故事大全:送给暑假的你们
2019/07/09 职场文书
Go语言操作数据库及其常规操作的示例代码
2021/04/21 Golang
什么是clearfix (一文搞清楚css清除浮动clearfix)
2023/05/21 HTML / CSS