Bootstrap警告框(Alert)插件使用方法


Posted in Javascript onMarch 21, 2017

有以下两种方式启用警告框的可取消(dismissal)功能:

1、通过 data 属性:通过数据 API(Data API)添加可取消功能,只需要向关闭按钮添加 data-dismiss="alert",就会自动为警告框添加关闭功能。

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

2、通过 JavaScript添加可取消功能:

$(".alert").alert() 

html代码

<div class="alert alert-success"> 
   <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="close" data-dismiss="alert" aria-hidden="true">√</a> 
   <strong>成功!</strong>您的网络连接已成功! 
  </div>

效果图:

Bootstrap警告框(Alert)插件使用方法

3、下面是一些警告框(Alert)插件中有用的方法:

Bootstrap警告框(Alert)插件使用方法

效果图

Bootstrap警告框(Alert)插件使用方法

4、下表列出了警告框(Alert)插件中要用到的事件。这些事件可在函数中当钩子使用。

Bootstrap警告框(Alert)插件使用方法

html代码

<!DOCTYPE html> 
<html> 
 <head> 
  <title>Bootstrap 警告框(Alert)插件</title> 
  <meta charset="utf-8"> 
  <link rel="stylesheet" href="css/bootstrap.min.css" rel="external nofollow" >  
  <script src="js/jquery.min.js"></script> 
  <script src="js/bootstrap.min.js"></script> 
  <style> 
   body{ 
    font-size:24px; 
     
   } 
  </style> 
 </head> 
 <body> 
  <div class="container"> 
  <h3>警告框(Alert)插件 alert() 方法</h3> 
  <div id="myAlert" class="alert alert-warning"> 
   <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="close" data-dismiss="alert">×</a> 
   <strong>警告!</strong>您的网络连接有问题。 
  </div> 
  <script type="text/javascript"> 
   $(function() { 
   $("div#myAlert").bind('click',function () { 
    alert("警告消息框被关闭。"); 
    }); 
   }); 
  </script> 
  </div> 
  
 </body> 
</html>

效果图:

Bootstrap警告框(Alert)插件使用方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 脚本将当地时间转换成其它时区
Mar 19 Javascript
javascrip关于继承的小例子
May 10 Javascript
js变量、作用域及内存详解
Sep 23 Javascript
js实现拖拽效果
Feb 12 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
Jan 29 Javascript
jQuery实现伪分页的方法分享
Feb 17 Javascript
JS 对象(Object)和字符串(String)互转方法
May 20 Javascript
js原生之焦点图转换加定时器实例
Dec 12 Javascript
JS闭包用法实例分析
Mar 27 Javascript
微信小程序 侧滑删除(左滑删除)
May 23 Javascript
从零开始搭建webpack+react开发环境的详细步骤
May 18 Javascript
vue解决弹出蒙层滑动穿透问题的方法
Sep 22 Javascript
Bootstrap标签页(Tab)插件使用方法
Mar 21 #Javascript
JavaScript数组和对象的复制
Mar 21 #Javascript
Vue响应式添加、修改数组和对象的值
Mar 20 #Javascript
zTree实现节点修改的实时刷新功能
Mar 20 #Javascript
Vue指令的钩子函数使用方法
Mar 20 #Javascript
非常实用的vue导航钩子
Mar 20 #Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
Mar 20 #Javascript
You might like
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
PHP缓存工具XCache安装与使用方法详解
2018/04/09 PHP
laravel实现按月或天或小时统计mysql数据的方法
2019/10/09 PHP
有关javascript的性能优化 (repaint和reflow)
2013/04/12 Javascript
使用jQuery管理选择结果
2015/01/20 Javascript
JavaScript 变量、作用域及内存
2015/04/08 Javascript
详解javascript实现自定义事件
2016/01/19 Javascript
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
2016/05/12 Javascript
js style.display=block显示布局错乱问题的解决方法
2016/09/21 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
2016/10/24 Javascript
JavaScript之Map和Set_动力节点Java学院整理
2017/06/29 Javascript
Angular.js前台传list数组由后台spring MVC接收数组示例代码
2017/07/31 Javascript
React 无状态组件(Stateless Component) 与高阶组件
2018/08/14 Javascript
使用electron制作满屏心特效的示例代码
2018/11/27 Javascript
puppeteer实现html截图的示例代码
2019/01/10 Javascript
微信小程序如何使用globalData的方法
2019/06/06 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
2020/06/17 Javascript
让 python 命令行也可以自动补全
2014/11/30 Python
Django URL传递参数的方法总结
2016/08/28 Python
python 实现自动远程登陆scp文件实例代码
2017/03/13 Python
Python自动化运维之IP地址处理模块详解
2017/12/10 Python
Django中间件实现拦截器的方法
2018/06/01 Python
jupyter notebook tensorflow打印device信息实例
2020/04/20 Python
python利用tkinter实现图片格式转换的示例
2020/09/28 Python
马克华菲官方商城:Mark Fairwhale
2016/09/04 全球购物
瑞典时尚服装购物网站:Miinto.se
2017/10/30 全球购物
分家协议书
2014/04/21 职场文书
仓库管理计划书
2014/05/04 职场文书
群众路线对照检查材料思想汇报怎么写
2014/09/18 职场文书
村党的群众路线教育实践活动总结材料
2014/10/31 职场文书
护士2014年终工作总结
2014/11/11 职场文书
家属答谢词
2015/01/05 职场文书
教师岗位职责
2015/02/03 职场文书
2016春节慰问信范文
2015/03/25 职场文书
2015年初中教师个人工作总结
2015/07/21 职场文书
2016年优秀团员事迹材料
2016/02/25 职场文书