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 相关文章推荐
9个JavaScript评级/投票插件
Jan 18 Javascript
你必须知道的JavaScript 中字符串连接的性能的一些问题
May 07 Javascript
javascript实现画不相交的圆
Apr 07 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
Sep 20 Javascript
JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端
Oct 08 Javascript
AngularJS自定义插件实现网站用户引导功能示例
Nov 07 Javascript
discuz表情的JS提取方法分析
Mar 22 Javascript
JS+html5制作简单音乐播放器
Sep 13 Javascript
小程序开发基础之view视图容器
Aug 21 Javascript
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 jQuery
vant实现购物车功能
Jun 29 Javascript
基于jQuery拖拽事件的封装
Nov 29 jQuery
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环境配置 php5 MySQL5 apache2 phpmyadmin安装与配置图文教程
2007/03/16 PHP
PHPExcel内存泄漏问题解决方法
2015/01/23 PHP
thinkPHP3.1验证码的简单实现方法
2016/04/22 PHP
Yii+upload实现AJAX上传图片的方法
2016/07/13 PHP
Laravel中任务调度console使用方法小结
2017/05/07 PHP
微信封装的调用微信签名包的类库
2017/06/08 PHP
Laravel框架Request、Response及Session操作示例
2019/05/06 PHP
PHP实现基于状态的责任链审批模式详解
2019/05/31 PHP
PHP页面静态化――纯静态与伪静态用法详解
2020/06/05 PHP
经典海量jQuery插件 大家可以收藏一下
2010/02/07 Javascript
用Javascript评估用户输入密码的强度(Knockout版)
2011/11/30 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
2015/02/24 Javascript
JavaScript中匿名函数用法实例
2015/03/23 Javascript
AngularJS基础学习笔记之控制器
2015/05/10 Javascript
原生javascript实现addClass,removeClass,hasClass函数
2016/02/25 Javascript
关于cookie的初识和运用(js和jq)
2016/04/07 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
2016/08/13 Javascript
微信提示 在浏览器打开 效果实现过程解析
2019/09/10 Javascript
[01:19:46]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
Python类属性与实例属性用法分析
2015/05/09 Python
Python列表生成式与生成器操作示例
2018/08/01 Python
opencv3/python 鼠标响应操作详解
2019/12/11 Python
PyCharm中配置PySide2的图文教程
2020/06/18 Python
解决Keras中循环使用K.ctc_decode内存不释放的问题
2020/06/29 Python
聊聊python中的循环遍历
2020/09/07 Python
CSS3实现多重边框的方法总结
2016/05/31 HTML / CSS
越南电子产品购物网站:FPT Shop
2017/12/02 全球购物
文职个人求职信范文
2013/09/23 职场文书
工作中个人的自我评价
2013/12/31 职场文书
《秋游》教学反思
2014/04/24 职场文书
留守儿童工作方案
2014/06/02 职场文书
公务员政审个人总结
2015/02/12 职场文书
2015年党风廉政建设目标责任书
2015/05/08 职场文书
2015年秋学期师德师风建设工作总结
2015/10/23 职场文书
《草船借箭》教学反思
2016/02/23 职场文书
CSS3 实现的图片悬停的切换按钮
2021/04/13 HTML / CSS