bootstrap 警报

Introduction:

介绍：

In the previous article, we have discussed ? Now, in this article, we will discuss how to use .well and .alert element in bootstrap?

在上一篇文章中，我们讨论了 ？ 现在，在本文中，我们将讨论如何在Bootstrap中使用.well和.alert元素 ？

1)好班 (1) Well class)

In bootstrap3 .well class is used to add a rounded border with grey background and padding around the element by default .well size is medium in size. .well class have some other classes from which we can change its size .well-sm and .well-lg class.

在bootstrap3中，.well类用于添加带有灰色背景的圆角边框，默认情况下在元素周围填充.well的大小为中等。 .well类还有一些其他类，我们可以从中更改.well-sm和.well-lg类的大小。

Note: .well class is not available in bootstrap4.

注意： .well类在bootstrap4中不可用。

2)警报 (2) Alert)

The .alert class is used to create a feedback message which is displayed after specific actions led by the users. Alert class is available for any length of the text. Here, is some other classes to create an alert message i.e. .alert-* contextual classes to specify the kind of alert.

.alert类用于创建反馈消息，该消息在用户执行特定操作后显示。 警报类适用于任何长度的文本。 这里是创建警报消息的其他一些类，即用于指定警报类型的.alert- *上下文类。

There are four typeof .alertcontextual class are available in bootstrap 3 ( .alert-success, .alert-info, .alert-warning, .alert-danger); but, in bootstrap 4 eight contextual classes are available ( .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light, .alert-dark ).

引导程序3中提供了四种类型的.alertcontextual类(.alert-success，.alert-info，.alert-warning，.alert-danger)； 但是，在引导程序4中，提供了八个上下文类(.alert-success，.alert-info，.alert-warning，.alert-danger，.alert-primary，.alert-secondary，.alert-light，.alert-dark )。

3)警报链接 (3) Alert link)

We can create a link inside the alert box using <a> tag to match link contextual class color with the text.

我们可以使用<a>标记在警报框中创建链接，以使链接上下文类颜色与文本匹配。

4)退课 (4) Dismiss class)

To close the alert message we use .close class and .data-dismiss elements (when you click on this the alert box will disappear)to a link or a button element in Bootstrap3. In bootstrap4 .alert-dismissible class is used which adds some extra padding to the right of the alert and positions the .close button as well as an optional dismiss button. You can also use aria-label=”close” attribute when creating a dismiss link or button for people using screen readers.

要关闭警报消息，我们使用.close类和.data-dismiss元素(单击此按钮时，警报框将消失)到Bootstrap3中的链接或按钮元素。 在bootstrap4中，使用了.alert-dismissible类，该类在警报的右侧添加了一些额外的填充，并放置了.close按钮和可选的dismiss按钮。 当为使用屏幕阅读器的用户创建关闭链接或按钮时，也可以使用aria-label =“ close”属性。

Here, × is an HTML element which is used for close icons (x). To create animated alerts when dismissing them, add the .fade & .show classes in bootstrap 4 and.fade & .in class in bootstrap 3 for animated alerts ( Used for a fading effect when closing the alert message). When the user clicks the Close button, the alert disappears.

在此，×是一个HTML元素，用于关闭图标(x)。 要在关闭动画警报时创建动画警报，请在引导程序4中添加.fade＆.show类，在引导程序3中添加.fade＆.in类中的动画警报(用于在关闭警报消息时用于淡入淡出效果)。 当用户单击“关闭”按钮时，警报消失。

5)警报标题 (5) Alert heading)

Alerts can also contain additional HTML elements headings, paragraphs and dividers.

警报还可以包含其他HTML元素标题，段落和分隔符。

示例：(Bootstrap3) (Example: (Bootstrap3))

    
    
	
     	
     
      well
     
	
     
      small size well 
     
	
     
      large size well 
     
    
    
    
	
     
      success alert
     
	
     
      danger alert
     
	
     
		
      ×		warning alert with 
       .fade and .in  class	
     
	
     
      info alert
     
    

Output - Mobile View

输出-移动视图

Output - Tablet View

输出-平板电脑视图

Output - Desktop View

输出-桌面视图

示例：(Bootstrap4) (Example: (Bootstrap4))

    
     	success class with close .dismissible class	
     		×	
    
    
     danger alert
    
    
     primary alert
    
    
     dark alert	
     
here we use alert heading class
    
    
     	secondary alert class with .fade and .show class	
     		×	
    
    
	
     light alert with link 	is used and it show light grey color
    
    
     warning alert
    
    
     info alert
    

Output - Mobile View

输出-移动视图

Output - Tablet View

输出-平板电脑视图

Output - Desktop View

输出-桌面视图

Conclusion:

结论：

In this article, we have learnt how to use .well, .alert and its different classes? I hope now you will understand the whole concept behind it.

在本文中，我们学习了如何使用.well，.alert及其不同的类 ？ 我希望您现在能理解其背后的整个概念。

翻译自:

bootstrap 警报