Bootstrap学习日记之警告框

警告框概述

  警告框消息大多是用来向终端用户显示如警告及确认消息的。它与Java Script中的alert()不同，它不需要触发器，直接显示在页面中，而不是通过弹窗

用法

• 创建<div>警告框容器，添加class="alert"
• 在警告框容器中添加样式，如class="alert-info"、class="alert-success"
• 警告框默认会充满整个屏幕，如果不想让它充满整个屏幕可以用到Bootstrap中的网格系统

  <div class="container">
      <div class="alert alert-success">
          <p>显示了警告框</p>
      </div>
  </div>

运行结果

添加关闭按钮

  在某些情况下我们需要关闭警告框，如何对警告框添加关闭按钮呢？答案是通过BootstrapAPI中的data-dismiss，让它的值为data-dismiss="alert"，这个是不是很熟悉，在模态框中我们对模态框添加了一个关闭按钮就是通过data-dismiss="modal"。

  那么这个data-dismiss属性应该放在哪个标签内呢？答案是创建一个<a class="close">&times</a>存放data-dismiss，&times创建关闭图标

  <div class="container">
      <div class="alert alert-success">
          <a class="close" href="#" data-dismiss="alert">&times;</a>
          <p>显示了警告框</p>
      </div>
  </div>

运行结果

选项

  没有选项

方法

  alert的方法都建立在点击事件上所以Java Script中会有点击事件click。在点击事件中进行方法的调用

.alert():

         $(function(){

      $('.close').click(function(){

        $("自定义类或者ID)".alert();

     });

})；

.alert(close)

      $(function(){

  $(".close").click(function(){

   $("自定义类或者ID").alert(close);

    });

});

  <div class="container">
      <div class="alert alert-success">
          <a class="close" href="#" data-dismiss="alert">&times;</a>
          <p>显示了警告框</p>
      </div>
      <div  class="alert alert-warning">
          <a class="close" data-dismiss="alert" href="#">&times;</a>
          <p>警告，出现问题！！</p>
      </div>
  </div>
  <script>
    $(function () {
        $(".close").click(function () {
            $(".alert").alert('close');
        });
    });
 </script>

运行结果：

点击关闭按钮可出现两个警告框同时关闭。因为应用了.alert(close)方法

事件

  Bootstrap事件的使用都大同小异，通过某一个触发器触发事件，进而对事件进行处理

 <div class="container">
      <div class="alert alert-success" id="myAlert">
          <a class="close" href="#" data-dismiss="alert">&times;</a>
          <p>显示了警告框</p>
      </div>
  </div>
  <script>
    $(function () {
       $('#myAlert').bind('close.bs.alert',function () {
           alert("关闭了警告框");
       });
    });
 </script>

运行结果