Bootstrap每天必学之警告框插件


Posted in Javascript onApril 26, 2016

警告框(Alert)消息大多是用来想终端用户显示诸如警告或确认消息的信息。使用警告框(Alert)插件,您可以向所有的警告框消息添加可取消(dismiss)功能。

如果您想要单独引用该插件的功能,那么您需要引用 alert.js。或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

一、用法
您可以有以下两种方式启用警告框的可取消(dismissal)功能:
1、通过 data 属性:通过数据 API(Data API)添加可取消功能,只需要向关闭按钮添加 data-dismiss="alert",就会自动为警告框添加关闭功能。

<a class="close" data-dismiss="alert" href="#" aria-hidden="true">
 ×
</a>

2、通过 JavaScript:通过 JavaScript 添加可取消功能:
$(".alert").alert()

二、简单实例

警告框即为点击小时的信息框。
1、基本实例

<div class="alert alert-warning">     
 <button class="close" type="button" data-dismiss="alert">   
 <span>×</span>      
 </button>      
 <p>       
 警告:您的浏览器不支持!      
 </p>       
</div>

 2、添加淡入淡出效果

<div class="alert alert-warning fade in">
如果用 JavaScript,可以代替 data-dismiss="alert"

//JavaScript 方法

$('.close').on('click', function() {
 $('#alert').alert('close');
})

Alert 插件中事件有两种:

Bootstrap每天必学之警告框插件

//事件,其他雷同

$('#alert').on('close.bs.alert', function() {
 alert('当 close 方法被触发时调用!');
});

本文系列教程整理到:Bootstrap基础教程 专题中,欢迎点击学习。

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上就是本文的全部内容,希望对大家学习Bootstrap警告框插件有所帮助。

Javascript 相关文章推荐
JQueryEasyUI datagrid框架的进阶使用
Apr 08 Javascript
文本框水印提示效果的简单实现代码
Feb 22 Javascript
javascript制作幻灯片(360度全景图片)
Jul 28 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
Dec 02 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
Jan 23 Javascript
JS 学习总结之正则表达式的懒惰性和贪婪性
Jul 03 Javascript
require.js中的define函数详解
Jul 10 Javascript
Vue中引入样式文件的方法
Aug 18 Javascript
vue使用vue-i18n实现国际化的实现代码
Apr 08 Javascript
js使用Promise实现简单的Ajax缓存
Nov 14 Javascript
vue搜索和vue模糊搜索代码实例
May 07 Javascript
vue data引入本地图片的两种方式小结
Nov 13 Javascript
jQuery Mobile页面返回不需要重新get
Apr 26 #Javascript
jQuery 中的 DOM 操作
Apr 26 #Javascript
Bootstrap每天必学之弹出框(Popover)插件
Apr 25 #Javascript
基于JS实现EOS隐藏错误提示层代码
Apr 25 #Javascript
Bootstrap每天必学之按钮(Button)插件
Apr 25 #Javascript
第一章之初识Bootstrap
Apr 25 #Javascript
第二章之Bootstrap 页面排版样式
Apr 25 #Javascript
You might like
PHP strncasecmp字符串比较的小技巧
2011/01/04 PHP
php实现根据IP地址获取其所在省市的方法
2015/04/30 PHP
Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
2009/08/09 Javascript
判断客户端浏览器是否安装了Flash插件的多种方法
2010/08/11 Javascript
jquery实现心算练习代码
2010/12/06 Javascript
jQuery+ajax实现动态执行脚本的方法
2015/01/27 Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
2015/11/09 Javascript
jQuery与Ajax以及序列化
2016/02/01 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
2016/06/21 Javascript
如何使用Bootstrap 按钮实例详解
2017/03/29 Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
2017/05/11 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
2020/08/09 Javascript
详解ES6中的三种异步解决方案
2018/06/28 Javascript
详解Vue项目中实现锚点定位
2019/04/24 Javascript
JavaScript实现简单随机点名器
2019/11/21 Javascript
jenkins自动构建发布vue项目的方法步骤
2021/01/04 Vue.js
[08:04]TI4西雅图DOTA2前线报道 海涛探访各路人马
2014/07/09 DOTA
[59:48]LGD vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python socket网络编程步骤详解(socket套接字使用)
2013/12/06 Python
Python入门篇之字典
2014/10/17 Python
python调用staf自动化框架的方法
2018/12/26 Python
Django stark组件使用及原理详解
2019/08/22 Python
详解python破解zip文件密码的方法
2020/01/13 Python
python用opencv完成图像分割并进行目标物的提取
2020/05/25 Python
解决python打开https出现certificate verify failed的问题
2020/09/03 Python
Ref与out有什么不同
2012/11/24 面试题
大学生职业生涯规划范文
2014/01/22 职场文书
资源工程专业毕业生求职信
2014/02/27 职场文书
幽默自我介绍演讲稿
2014/08/21 职场文书
法人代表证明书格式
2014/10/01 职场文书
2014年度思想工作总结
2014/11/27 职场文书
表扬信范文
2019/04/22 职场文书
关于食品安全的演讲稿范文(三篇)
2019/10/21 职场文书
用python自动生成日历
2021/04/24 Python
Python还能这么玩之用Python做个小游戏的外挂
2021/06/04 Python
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
2022/12/24 HTML / CSS