4.7Bootstrap学习js插件篇之警告框

小鱼儿 2022-08-27 04:42 220阅读 0赞

## 案例 ##

通过这个插件可以为所有警告框增加关闭功能。

代码段：

<div class="bs-example">
    		<h1 class="page-header">4、警示框</h1>
          <div class="alert alert-warning fade in">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
            <strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
          </div>
    		
    	</div>

预览：

![Center][]

官网小例子

<div class="alert alert-danger fade in">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
            <h4>Oh snap! You got an error!</h4>
            <p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
            <p>
              <button type="button" class="btn btn-danger">Take this action</button>
              <button type="button" class="btn btn-success">Or do this</button>
            </p>
          </div>
    复制代码

预览：

![15000720-5a3b54d1575a45c58409be85869b515e.png][]

为关闭按钮设置`data-dismiss="alert"   `为警告框赋予关闭功能

## 用法 ##

通过JavaScript启用警告框关闭功能：

$(".alert").alert()

### 标记 ###

只需为关闭按钮设置`data-dismiss="alert"`即可自动为警告框赋予关闭功能。

### 方法 ###

#### $().alert() ####

为所有警告框加入关闭功能。如果希望警告框被关闭时呈现动画效果，请确保为其添加了`.fade` 和 `.in`。

#### .alert('close') ####

关闭警告框。

$(".alert").alert('close')

### 事件 ###

Bootstrap中的警告框暴露了一组事件，允许你进行监听。

<table style="border-collapse:collapse; border-spacing:0px; max-width:100%; background-color:transparent; width:847px; margin-bottom:20px; border:1px solid rgb(221,221,221)"> 
 <thead style=""> 
  <tr style=""> 
   <th style="padding:8px; line-height:1.428571429; vertical-align:bottom; border-width:0px 1px 2px; border-bottom-style:solid; border-bottom-color:rgb(221,221,221); border-right-style:solid; border-left-style:solid; border-right-color:rgb(221,221,221); border-left-color:rgb(221,221,221); width:150px"> 事件类型</th> 
   <th style="padding:8px; line-height:1.428571429; vertical-align:bottom; border-width:0px 1px 2px; border-bottom-style:solid; border-bottom-color:rgb(221,221,221); border-right-style:solid; border-left-style:solid; border-right-color:rgb(221,221,221); border-left-color:rgb(221,221,221)"> 描述</th> 
  </tr> 
 </thead> 
 <tbody style=""> 
  <tr style=""> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221); background-color:rgb(249,249,249)"> close.bs.alert</td> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221); background-color:rgb(249,249,249)"> 当<code style="font-family:Menlo,Monaco,Consolas,'Courier New',monospace; font-size:13px; padding:2px 4px; color:rgb(199,37,78); white-space:nowrap; background-color:rgb(249,242,244)">close</code>函数被调用之后，此事件被立即触发。</td> 
  </tr> 
  <tr style=""> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221)"> closed.bs.alert</td> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221)"> 当警告框被关闭之后（同时CSS过渡效果执行完毕），此事件被触发。</td> 
  </tr> 
 </tbody> 
</table>

$('#my-alert').bind('closed.bs.alert', function () { 
      // do something…
    })

没啥好说的。。跟其他差不多

[Center]: /images/20220824/9c0776fa03a04f5f88fce0407ca48d0b.png
[15000720-5a3b54d1575a45c58409be85869b515e.png]: /images/20220824/04d453e43a4c46c4b87925861e17f57f.png