Bootstrap4 message box

1: The message box.

Balloons may be used .alert class-Success followed by .alert, .alert-info, 
.alert-warning, .alert-Danger, .alert-Primary, Secondary-.alert, .alert-Light-Dark or .alert classes to implement:

< Div class = "Container" > 
  < H2 > balloons </ H2 > 
  < P > balloons may be used .alert category, followed by the specific meaning specified color classes to implement: </ P > 
  < div class = "Alert success-Alert " > 
    < strong > success! </ strong > specifies the operation was successful prompt information.
  </ Div > 
  < div class = "Alert-Alert info" > 
    < strong > information! </ Strong > Please note this information.
  </div > 
  < div class = "Alert-Alert warning" > 
    < strong > Warning! </ strong > set warning messages.
  </ Div > 
  < div class = "Alert Alert-Danger" > 
    < strong > Error! </ Strong > failed operation
   </ div > 
  < div class = "Alert Alert-Primary" > < strong > choice! </ Strong > This is an important operating information.
  </ Div
    > 
  < Div class = "Alert-Alert Secondary" > < strong > minor! </ Strong > show some important information.
  </ Div > < div class = "Alert Alert-Dark" > < strong > dark gray! </ Strong > dark gray box is displayed.
  </ Div > < div class = "Alert Alert-Light" > < strong > pale gray! </ Strong > Light gray balloons.
  </ Div >
    
  
    
  
    
</div>

 

 

2: balloons Add Link

　　Prompt box added to the link tag  alert-link  type link set color matching balloon:

<div class="alert alert-info">
    <strong>信息!</strong> 你应该认真阅读 <a href="#" class="alert-link">这条信息</a>。
  </div>
  <div class="alert alert-warning">
    <strong>警告!</strong> 你应该认真阅读 <a href="#" class="alert-link">这条信息</a>。
  </div>

 

 

 

3：关闭提示框

　　在提示框中的 div 中添加 .alert-dismissible 类，然后在关闭按钮的链接上添加 class="close" 和 data-dismiss="alert" 类来设置提示框的关闭操作。

<div class="alert alert-success alert-dismissible">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>成功!</strong> 指定操作成功提示信息。
  </div>
  <div class="alert alert-info alert-dismissible">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>信息!</strong> 请注意这个信息。
  </div>

提示: &times; (×) 是 HTML 实体字符，来表示关闭操作，而不是字母 "x"。

 

 

4：提示框动画

　　.fade 和 .show 类用于设置提示框在关闭时的淡出和淡入效果：

<div class="alert alert-success alert-dismissible fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>成功!</strong> 指定操作成功提示信息。
  </div>
  <div class="alert alert-info alert-dismissible fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>信息!</strong> 请注意这个信息。
  </div>

效果可以自己试试 没法截屏效果