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 学习笔记(十六) js事件
Feb 01 Javascript
javascript dom追加内容实现示例
Sep 21 Javascript
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
Nov 04 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
May 04 Javascript
基于javascript实现图片滑动效果
May 07 Javascript
jquery radio的取值_radio的选中_radio的重置方法
Sep 20 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
Dec 21 Javascript
js实现导航栏中英文切换效果
Jan 16 Javascript
纯js实现图片匀速淡入淡出效果
Aug 22 Javascript
React通过redux-persist持久化数据存储的方法示例
Feb 14 Javascript
微信小程序实现的一键拨号功能示例
Apr 24 Javascript
类和原型的设计模式之复制与委托差异
Jul 07 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 获取MSN好友列表的代码(2009-05-14测试通过)
2009/09/09 PHP
将博客园(cnblogs.com)数据导入到wordpress的代码
2013/01/06 PHP
PHP图片自动裁切应付不同尺寸的显示
2014/10/16 PHP
php实现QQ空间获取当前用户的用户名并生成图片
2015/07/25 PHP
Zend Framework教程之Zend_Helpers动作助手ViewRenderer用法详解
2016/07/20 PHP
workerman结合laravel开发在线聊天应用的示例代码
2018/10/30 PHP
Hutia 的 JS 代码集
2006/10/24 Javascript
浅析js设置控件的readonly与enabled属性问题
2013/12/25 Javascript
用js通过url传参把数据从一个页面传到另一个页面
2014/09/01 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
2014/12/14 Javascript
jQuery增加与删除table列的方法
2016/03/01 Javascript
老生常谈Javascript中的原型和this指针
2016/10/09 Javascript
TableSort.js表格排序插件使用方法详解
2017/02/10 Javascript
微信小程序scroll-view仿拼多多横向滑动滚动条
2020/04/21 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
2019/02/25 Javascript
Layui 数据表格批量删除和多条件搜索的实例
2019/09/04 Javascript
Vue+Element自定义纵向表格表头教程
2020/10/26 Javascript
vue实现防抖的实例代码
2021/01/11 Vue.js
举例介绍Python中的25个隐藏特性
2015/03/30 Python
python Django模板的使用方法
2016/01/14 Python
python中字符串比较使用is、==和cmp()总结
2018/03/18 Python
Python实现的计算马氏距离算法示例
2018/04/03 Python
Python实现简单的用户交互方法详解
2018/09/25 Python
Python中的 sort 和 sorted的用法与区别
2019/08/10 Python
通过实例了解Python异常处理机制底层实现
2020/07/23 Python
python 决策树算法的实现
2020/10/09 Python
python中scrapy处理项目数据的实例分析
2020/11/22 Python
Canvas波浪花环的示例代码
2020/08/21 HTML / CSS
Born鞋子官网:Born Shoes
2017/04/06 全球购物
《临死前的严监生》教学反思
2014/02/13 职场文书
关爱女孩行动实施方案
2014/03/13 职场文书
购房协议书范本
2014/10/02 职场文书
2014年学校办公室工作总结
2014/12/19 职场文书
工程部经理岗位职责
2015/02/02 职场文书
2015年大学辅导员工作总结
2015/05/12 职场文书
Pycharm远程调试和MySQL数据库授权问题
2022/03/18 MySQL