Bootstrap学习日记之警告

警告是什么？

  警告的英文单词是Alerts，警告在Bootstrap中的作用是，为用户定义了一种用于消息通知样式的方式。它们为典型的用户提供了上下文反馈

创建警告框

• 创建一个带有class="alerts"的<div>
• 在上面的<div>中添加警告样式alerts-succes、alerts-info、alerts-danger、alerts-waring

 <div class="alert alert-danger">危险的警告框</div>
  <div class="alert alert-info">信息的警告框</div>
  <div class="alert alert-warning">提示警告框</div>
  <div class="alert alert-success">成功警告框</div>

运行结果

创建带有关闭按钮的警告框

  要想创建带有关闭按钮的警告框，就必须得用JQuery的警告插件

• 在<div class="alert">中添加class="alert-dismissable"
• 在上面的<div>中添加取消按钮<button type="button" class="close" data-dismiss="alert">&times;</button>
• class="close"用了关闭的预定义类
• data-dismiss="alert"触发关闭的控件（类型）是alert跟我们之前创建data-toggle的意思有点相似，data都是在做这方面的工作

  <div class="alert alert-danger alert-dismissable">危险的警告框
  <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
      &times;
  </button>
  </div>
  <div class="alert alert-info alert-dismissable">
      信息的警告框
      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
          &times;
      </button>
  </div>
  <div class="alert alert-warning alert-dismissable">
      提示警告框
      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
          &times;
      </button>
  </div>
  <div class="alert alert-success">成功警告框
       <button class="close" type="button" aria-hidden="true">
           &times;
       </button>
  </div>

代码解读：我们创建了四个警告框，每一个警告框我们都加了关闭按钮，我们第一个警告框信息在<button>之前，其余的在<button>之后，这说明<button>关闭按钮都会默认的在警告框的右边，

  同时，这里有两个地方需要注意，①默认的警告框是会填充整个父元素的。②必须要填写<button type="button" class="close" data-dismiss="alert">&times;</button>缺一不可

运行结果

点击关闭按钮之后

创建带有连接的警告框

  要想创建带有连接的警告框非常简单，你只需要

• 创建一个基本的警告框
• 在基本警告框中加入<a class="alert-link" href="#">即可

  <div class="alert alert-danger alert-dismissable"><a class="alert-link" href="#">危险的警告框</a>
  <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
      &times;
  </button>
  </div>
  <div class="alert alert-info alert-dismissable">
     <a href="#" class="alert-link"> 信息的警告框</a>
      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
          &times;
      </button>
  </div>
  <div class="alert alert-warning alert-dismissable">
      <a class="alert-link" href="#">提示警告框</a>
      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
          &times;
      </button>
  </div>
  <div class="alert alert-success"><a class="alert-link" href="#">成功警告框</a>
       <button class="close" type="button" aria-hidden="true">
           &times;
       </button>
  </div>

运行结果

  只有当鼠标悬停时才会出现，连接样式。

注：本篇文章为博主在菜鸟教程学习的日记，菜鸟教程：http://www.runoob.com/