警告框

基本样式

框架用.alert定义警告框样式。

    <div class="alert">
      <i class="icon-times" data-dismiss="alert"></i>
      <strong>警告：</strong>这是一条警告信息。
    </div>
  

图标提示

默认排版为左对齐，居中对齐则叠加.alert-center，内联显示则为.alert-inline。

    <div class="alert alert-inline">
      <i class="icon-times" data-dismiss="alert"></i>
      <i class="icon-success text-success"></i>
      <div class="alert-body">
        <strong>恭喜</strong>
        <p>操作成功，请继续。</p>
      </div>
    </div>
  

颜色配置

警告框分为危险、警告、主要、成功四种，样式分别为：.alert-danger、.alert-warning、.alert-info、.alert-success。

    <div class="alert alert-center alert-danger">
      <i class="icon-times" data-dismiss="alert"></i>
      <i class="icon-warning text-danger"></i>
      <div class="alert-body">
        <strong>危险</strong>
        <p>这是一条危险信息。</p>
      </div>
    </div>

    <div class="alert alert-warning">
      <i class="icon-times" data-dismiss="alert"></i>
      <strong class="text-warning">警告：</strong>这是一条警告信息。
    </div>

    <div class="alert alert-info">
      <i class="icon-times" data-dismiss="alert"></i>
      <strong class="text-info">主要：</strong>这是一条主要信息。
    </div>

    <div class="alert alert-inline alert-success">
      <i class="icon-times" data-dismiss="alert"></i>
      <div class="alert-body">
        <strong>成功</strong>
        <p>这是一条成功信息。</p>
      </div>
      <i class="icon-success-bg text-success"></i>
    </div>
  

动作行为

关闭警告框

在触发的元素上，添加属性，即可关闭警告框。

    <div class="alert alert-danger">
      <i class="icon-times" data-dismiss="alert"></i>
      <strong class="text-danger">危险：</strong>这是一条危险信息。
    </div>
  

行为关联

当警告框关闭时，也可能需要其他操作，这时可以使用行为关联，在触发的元素上，添加属性data-action，值为调用中的参数名称。

    <div class="alert alert-danger" id="alert">
      <i class="icon-times" data-dismiss="alert" data-action="dismiss"></i>
      <strong class="text-danger">危险：</strong>这是一条危险信息。
    </div>
  

调用方法

    <script>
    $(function(){
      $("#alert").action({
        "dismiss":function(){
          console.log("alert-action");
        }
      });
    });
    </script>