Bootstrap 4 Alert 学习笔记

1. Basic usage of alert

Adding alert component by applying .alertclass with following one of 8 available classse for 8 types altert. And adding "role" attribute ：

    alert-primary
    alert-secondary
    alert-success
    alert-danger
    alert-warning
    alert-info
    alert-light
    alert-dark

Example:

      <div class="alert alert-primary" role="alert">
          This is a primary alert—check it out!
      </div>

2. Using links within an alert

Adding .alert-linkclass to a <a>element obtains a matching colored links within any alert:
Example:

<div class="alert alert-primary" role="alert">
  This is a primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

3. Dismissing an alert

Enable dismissing for an alert by adding class .alert-dismissible .fade .show . .fade and.showclasses animate alerts when dismissing them. And then place a dismiss button with class.close and data-dismiss="alert" aria-label="Close" attributes. A <span> should be wrapped by <button>. <span>element is essential to show a cross sign at the top-right cornor of alert.
Example:

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>