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:

      

          This is a primary alert—check it out!
      

2. Using links within an alert

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

  This is a primary alert with an example link. Give it a click if you like.

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 should be wrapped by . element is essential to show a cross sign at the top-right cornor of alert.
Example:

  Holy guacamole! You should check in on some of those fields below.
  

×