AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > JavaScript

Bootstrap警告框(Alert)插件使用方法

51自学网 http://www.wanshiok.com
Bootstrap,警告框,Alert

有以下两种方式启用警告框的可取消(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> 

效果图:

3、下面是一些警告框(Alert)插件中有用的方法:

效果图

4、下表列出了警告框(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> 

效果图:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持wanshiok.com。


Bootstrap,警告框,Alert  
上一篇:图解Javascript——作用域、作用域链、闭包  下一篇:Bootstrap标签页(Tab)插件使用方法