第九谈：警告提示框

本节课我们来开始学习 Bootstrap 的警告框样式以及组件的使用。

一．警告框样式

1. 使用.alert 设置警告框基础样式，并使用.alert-success 设置警告框颜色；

      <div class="alert alert-success">Bootstrap4.x</div>
      <div class="alert alert-primary">Bootstrap4.x</div>
      <div class="alert alert-secondary">Bootstrap4.x</div>
      <div class="alert alert-danger">Bootstrap4.x</div>
      <div class="alert alert-warning">Bootstrap4.x</div>
      <div class="alert alert-info">Bootstrap4.x</div>
      <div class="alert alert-light">Bootstrap4.x</div>
      <div class="alert alert-dark">Bootstrap4.x</div>

2. 在使用了警告框的元素内部设置超链接.alert-link，会搭配相应的颜色；

      <div class="alert alert-success">
          Bootstrap4.x
          <a href="#" class="alert-link">V4.3</a>
      </div>

3. 使用.alert-heading 可以设置继承颜色，alert 本身也可以设置水平线段落等；

      <div class="alert alert-success">
          <h4 class="alert-heading">Bootstrap4.x</h4>
          <hr>
          <p>这是一个前端工具：Bootstrap4.x</p>
      </div>

二．警告框组件

1. 在组件一栏，可以和浏览器实现交互功能，比如警告框的关闭效果；

      <div class="alert alert-warning alert-dismissible" role="alert">
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
              <span aria-hidden="true">&times;</span>
          </button>
          <strong>Warning!</strong> 测试文字.
      </div>