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函数节流
Dec 09 Javascript
JavaScript与HTML的结合方法详解
Nov 23 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
May 28 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
Oct 10 Javascript
预防网页挂马的方法总结
Nov 03 Javascript
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 jQuery
vue.js移动端app实战1:初始配置详解
Jul 24 Javascript
seajs中最常用的7个功能、配置示例
Oct 10 Javascript
基于vue2.0实现简单轮播图
Nov 27 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
Dec 20 Javascript
Vue Prop属性功能与用法实例详解
Feb 23 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
May 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
消息持续发送的完整例子
2006/10/09 PHP
判断是否为指定长度内字符串的php函数
2010/02/16 PHP
mysql From_unixtime及UNIX_TIMESTAMP及DATE_FORMAT日期函数
2010/03/21 PHP
基于php中使用excel的简单介绍
2013/08/02 PHP
javascritp实现input输入框相关限制用法
2007/06/29 Javascript
jQuery学习笔记[1] jQuery中的DOM操作
2010/12/03 Javascript
一个CSS+jQuery实现的放大缩小动画效果
2014/02/19 Javascript
js实现文本框中焦点在最后位置
2014/03/04 Javascript
js网页右下角提示框实例
2014/10/14 Javascript
javascript 事件处理示例分享
2014/12/31 Javascript
js实现的奥运倒计时时钟效果代码
2015/12/09 Javascript
jQuery绑定事件-多种实现方式总结
2016/05/09 Javascript
微信小程序 获取微信OpenId详解及实例代码
2016/10/31 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
2017/02/12 Javascript
JavaScript实现动态增删表格的方法
2017/03/09 Javascript
使用JavaScript实现alert的实例代码
2017/07/06 Javascript
webpack打包js的方法
2018/03/12 Javascript
vue内置指令详解
2018/04/03 Javascript
vue删除html内容的标签样式实例
2018/09/13 Javascript
Vue3新特性之在Composition API中使用CSS Modules
2020/07/13 Javascript
Python脚本处理空格的方法
2016/08/08 Python
Python实现简单的四则运算计算器
2016/11/02 Python
Python线性方程组求解运算示例
2018/01/17 Python
python3模块smtplib实现发送邮件功能
2018/05/22 Python
pyqt5的QComboBox 使用模板的具体方法
2018/09/06 Python
对python3 Serial 串口助手的接收读取数据方法详解
2019/06/12 Python
python 多线程死锁问题的解决方案
2020/08/25 Python
Python中的特殊方法以及应用详解
2020/09/20 Python
x-ua-compatible content=”IE=7, IE=9″意思理解
2013/07/22 HTML / CSS
英国女性化妆品收纳和家具网站:Beautify
2019/12/07 全球购物
节水倡议书范文
2014/04/15 职场文书
党员国庆节演讲稿范文2014
2014/09/21 职场文书
党员个人剖析材料(四风问题)
2014/10/07 职场文书
留学推荐信怎么写
2015/03/26 职场文书
元宵节晚会主持词
2015/07/01 职场文书
Python实现查询剪贴板自动匹配信息的思路详解
2021/07/09 Python