📜  引导警报

📅  最后修改于: 2020-12-19 02:49:09             🧑  作者: Mango

引导警报

引导警报用于提供创建预定义警报消息的简便方法。 Alert为您的消息添加了一种样式,以使其对用户更具吸引力。

元素中使用了四个类来发出警报。

  • .alert成功
  • .alert-info
  • 。警报警告
  • .alert-danger

引导警报示例

    


  Bootstrap Example
  
  
  
  
  



Alerts

Success! This alert box indicates a successful or positive action.
Info! This alert box indicates a neutral informative change or action.
Warning! This alert box indicates a warning that might need attention.
Danger! This alert box indicates a dangerous or potentially negative action.

Bootstrap4警报

Bootstrap 4在Bootstrap 3教程中定义的Bootstrap Alert中添加了4个新警报。

这些是:

  • 主要:此警报框指示重要的操作。
  • 次要的:此警报框指示次要的操作。
  • 深:深灰色警报框。
  • 浅色:浅灰色警报框。

警报使用.alert类创建,然后使用上下文类之一创建。

所有上下文类别的列表:

  • .alert成功
  • .alert-info
  • 。警报警告
  • .alert-danger
  • .alert-primary
  • .alert-secondary
  • .alert-light
  • .alert-dark




  Bootstrap Example
  
  
  
  
  
  



Alerts

Success! Used to indicate successful or positive action.
Info! Used to indicate a neutral informative change or action.
Warning! Used to indicate a warning that might need attention.
Danger! Used to indicate a dangerous or potentially negative action.
Primary! Used to indicate an important action.
Secondary! Used to indicate a slightly less important action.
Dark! Dark grey alert.
Light! Light grey alert.

警报链接

您必须将alert-link类添加到警报框中的所有链接中,以创建“匹配的彩色链接”:

例:




  Bootstrap Example
  
  
  
  
  
  



Bootstrap Alert Links

Success! You should read this message.
Info! You should read this message.
Warning! You should read this message.
Danger! You should read this message.
Primary! You should read this message.
Secondary! You should read this message.
Dark! You should read this message.
Light! You should read this message.

关闭警报

如果要关闭警报消息,则必须向警报容器添加.alert-dismissable类。然后将class =“ close”和data-dismiss =“ alert”添加到链接或按钮元素中(当您单击关闭符号时,警报框将关闭。)

例:




  Bootstrap Example
  
  
  
  
  
  



Alerts

Success! This alert box could indicate a successful or positive action.
Info! This alert box could indicate a neutral informative change or action.
Warning! This alert box could indicate a warning that might need attention.
Danger! This alert box could indicate a dangerous or potentially negative action.
Primary! Indicates an important action.
Secondary! Indicates a slightly less important action.
Dark! Dark grey alert.
Light! Light grey alert.

动画警报

关闭警报消息时,可以使用.fade和.show类添加淡入淡出效果。例:




  Bootstrap Example
  
  
  
  
  
  



Animated Alerts Example

Success! This alert box could indicate a successful or positive action.
Info! This alert box could indicate a neutral informative change or action.
Warning! This alert box could indicate a warning that might need attention.
Danger! This alert box could indicate a dangerous or potentially negative action.
Primary! Indicates an important action.
Secondary! Indicates a slightly less important action.
Dark! Dark grey alert.
Light! Light grey alert.