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 相关文章推荐
基于jquery的横向滚动条(滑动条)
Feb 24 Javascript
javascript 进阶篇1 正则表达式,cookie管理,userData
Mar 14 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
Jan 04 Javascript
购物车选中得到价格实现示例
Jan 26 Javascript
jquery队列queue与原生模仿其实现方法分享
Mar 25 Javascript
jQuery经过一段时间自动隐藏指定元素的方法
Mar 17 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
May 27 Javascript
React Native实现简单的登录功能(推荐)
Sep 19 Javascript
JavaScript浮点数及运算精度调整详解
Oct 21 Javascript
详解百度百科目录导航树小插件
Jan 08 Javascript
Angular CLI 安装和使用教程
Sep 13 Javascript
vue 获取及修改store.js里的公共变量实例
Nov 06 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
paypal即时到账php实现代码
2010/11/28 PHP
详谈php静态方法及普通方法的区别
2016/10/04 PHP
golang 调用 php7详解及实例
2017/01/04 PHP
php实现数据库的增删改查
2017/02/26 PHP
Laravel 解决419错误 -ajax请求错误的问题(CSRF验证)
2019/10/25 PHP
javascript+xml实现简单图片轮换(只支持IE)
2012/12/23 Javascript
javascript中基本类型和引用类型的区别分析
2015/05/12 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
2016/01/09 Javascript
JavaScript 节流函数 Throttle 详解
2016/07/04 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
2017/04/13 Javascript
JavaScript之json_动力节点Java学院整理
2017/06/29 Javascript
浅谈Angular4中常用管道
2017/09/27 Javascript
JS实现碰撞检测效果
2020/03/12 Javascript
jQuery实现颜色打字机的完整代码
2020/03/19 jQuery
Python赋值语句后逗号的作用分析
2015/06/08 Python
pytorch permute维度转换方法
2018/12/14 Python
django2笔记之路由path语法的实现
2019/07/17 Python
实例详解Python装饰器与闭包
2019/07/29 Python
浅谈Python 递归算法指归
2019/08/22 Python
python中利用numpy.array()实现俩个数值列表的对应相加方法
2019/08/26 Python
Django使用消息提示简单的弹出个对话框实例
2019/11/15 Python
简单了解python filter、map、reduce的区别
2020/01/14 Python
基于python 将列表作为参数传入函数时的测试与理解
2020/06/05 Python
Python轻量级web框架bottle使用方法解析
2020/06/13 Python
通过canvas转换颜色为RGBA格式及性能问题的解决
2019/11/22 HTML / CSS
iRobot官网:改变生活的家用机器人品牌
2016/09/20 全球购物
伦敦时尚生活的缩影:LN-CC
2017/01/24 全球购物
日本著名的服饰鞋帽综合类购物网站:MAGASEEK
2019/01/09 全球购物
Scotch Porter官方网站:男士美容产品
2020/08/31 全球购物
电子商务助理求职自荐信
2014/04/10 职场文书
新闻发布会策划方案
2014/06/12 职场文书
放飞梦想演讲稿600字
2014/08/26 职场文书
远程教育学习心得体会
2016/01/23 职场文书
Vue通过懒加载提升页面响应速度
2021/05/10 Vue.js
浅谈pytorch中的dropout的概率p
2021/05/27 Python
Redis集群的关闭与重启操作
2021/07/07 Redis