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 相关文章推荐
js window.open弹出新的网页窗口
Jan 16 Javascript
Node.js实现Excel转JSON
Apr 24 Javascript
JavaScript头像上传插件源码分享
Mar 29 Javascript
Angular2 环境配置详细介绍
Sep 21 Javascript
详解vue-cli开发环境跨域问题解决方案
Jun 06 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
Aug 24 Javascript
基于element-ui的rules中正则表达式
Sep 04 Javascript
js实现按钮开关单机下拉菜单效果
Nov 22 Javascript
trackingjs+websocket+百度人脸识别API实现人脸签到
Nov 26 Javascript
bootstrap-paginator服务器端分页使用方法详解
Feb 13 Javascript
微信小程序实现多张图片上传功能
Nov 18 Javascript
详解vue3中组件的非兼容变更
Mar 03 Vue.js
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实现登陆验证码(类似条行码状)
2006/10/09 PHP
thinkPHP实现签到功能的方法
2017/03/15 PHP
PHP面向对象程序设计之构造方法和析构方法详解
2019/06/13 PHP
php设计模式之职责链模式定义与用法经典示例
2019/09/19 PHP
JS解析XML的实现代码
2009/11/12 Javascript
IE和Firefox的Javascript兼容性总结[推荐收藏]
2011/10/19 Javascript
javascript两种function的定义介绍及区别说明
2013/05/02 Javascript
js循环改变div颜色具体方法
2013/06/25 Javascript
Node.js开发之访问Redis数据库教程
2015/01/14 Javascript
用户代理字符串userAgent可实现的四个识别
2015/09/20 Javascript
js使用cookie记录用户名的方法
2015/11/26 Javascript
jquery判断复选框是否选中进行答题提示特效
2015/12/10 Javascript
AngularJS中处理多个promise的方式
2016/02/02 Javascript
jQuery实现两个select控件的互移操作
2016/12/22 Javascript
微信小程序module.exports模块化操作实例浅析
2018/12/20 Javascript
浅谈webpack性能榨汁机(打包速度优化)
2019/01/09 Javascript
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
2019/11/24 Javascript
nodejs脚本centos开机启动实操方法
2020/03/04 NodeJs
详解Python设计模式编程中观察者模式与策略模式的运用
2016/03/02 Python
Python 类与元类的深度挖掘 II【经验】
2016/05/06 Python
Tornado高并发处理方法实例代码
2018/01/15 Python
python中数据爬虫requests库使用方法详解
2018/02/11 Python
python2.7实现爬虫网页数据
2018/05/25 Python
Python tkinter label 更新方法
2018/10/11 Python
Python基于百度云文字识别API
2018/12/13 Python
python中数据库like模糊查询方式
2020/03/02 Python
Django ForeignKey与数据库的FOREIGN KEY约束详解
2020/05/20 Python
pycharm激活方法到2099年(激活流程)
2020/09/22 Python
Python3获取cookie常用三种方案
2020/10/05 Python
志愿者活动总结范文
2014/04/26 职场文书
面试必备的求职信
2014/05/25 职场文书
师德师风个人自我剖析材料
2014/09/27 职场文书
2014年检验科工作总结
2014/11/22 职场文书
高三物理教学反思
2016/02/20 职场文书
Python中requests做接口测试的方法
2021/05/30 Python
Python Django模型详解
2021/10/05 Python