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版代码高亮
Jun 26 Javascript
jquery.validate使用攻略 第三部
Jul 01 Javascript
javasciprt下jquery函数$.post执行无响应的解决方法
Mar 13 Javascript
yepnope.js使用详解及示例分享
Jun 23 Javascript
使用javascript实现json数据以csv格式下载
Jan 09 Javascript
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
Oct 29 Javascript
基于JQuery打造无缝滚动新闻步骤详解
Mar 31 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
Mar 02 Javascript
javascript简单写的判断电话号码实例
May 24 Javascript
详解Javascript 中的 class、构造函数、工厂函数
Dec 20 Javascript
微信小程序中weui用法解析
Oct 21 Javascript
JS判断数组四种实现方法详解
Jun 29 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
php魔术方法与魔术变量、内置方法与内置变量的深入分析
2013/06/03 PHP
Mac下php 5升级到php 7的步骤详解
2017/04/26 PHP
JQuery 无废话系列教程(一) jquery入门 [推荐]
2009/06/23 Javascript
jquery 使用点滴函数代码
2011/05/20 Javascript
了解一点js的Eval函数
2012/07/26 Javascript
javascript实现playfair和hill密码算法
2014/12/07 Javascript
jQuery Validate表单验证深入学习
2015/12/18 Javascript
jQuery Ajax 全局调用封装实例代码详解
2016/06/02 Javascript
Listloading.js移动端上拉下拉刷新组件
2016/08/04 Javascript
AngularJS删除路由中的#符号的方法
2016/09/20 Javascript
angularjs实现天气预报功能
2020/06/16 Javascript
Nodejs下使用gm圆形裁剪并合成图片的示例
2018/02/22 NodeJs
vue.js与element-ui实现菜单树形结构的解决方法
2018/04/21 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
2018/07/10 Javascript
vuex实现数据状态持久化
2019/11/11 Javascript
node.js中事件触发器events的使用方法实例分析
2019/11/23 Javascript
js实现点赞效果
2020/03/16 Javascript
[00:53]2015国际邀请赛 中国区预选赛一触即发
2015/05/14 DOTA
[00:34]TI7不朽珍藏III——纯金地穴编织者饰品展示
2017/07/15 DOTA
python使用turtle库绘制时钟
2020/03/25 Python
python try 异常处理(史上最全)
2019/03/07 Python
python爬虫 正则表达式解析
2019/09/28 Python
python base64库给用户名或密码加密的流程
2020/01/02 Python
python爬虫使用requests发送post请求示例详解
2020/08/05 Python
鸿星尔克广告词
2014/03/21 职场文书
村长贪污检举信
2014/04/04 职场文书
婚纱店策划方案
2014/05/22 职场文书
群众路线教师自我剖析材料
2014/09/29 职场文书
2014年信息中心工作总结
2014/12/17 职场文书
社区国庆节活动总结
2015/03/23 职场文书
污水处理保证书
2015/05/09 职场文书
2015年为民办实事工作总结
2015/05/26 职场文书
2015年四年级班主任工作总结
2015/10/22 职场文书
pytorch通过训练结果的复现设置随机种子
2021/06/01 Python
Python爬虫网络请求之代理服务器和动态Cookies
2022/04/12 Python
MySQL分区路径子分区再分区
2022/04/13 MySQL