Bootstrap中警告框组件的使用方法是什么

4 警告框中的链接颜色

4.1 自动匹配

使用 .alert-link 实用程序类可以在任何警报中快速提供匹配的彩色链接，下面我仅给出三种颜色的对比。

  
    
    
    
    
    
    
  
  
    

      



      
        A simple primary alert with an example link. Give it a click if you like.
        
        
        A simple secondary alert with an example link. Give it a click if you like.
        
        
        A simple success alert with an example link. Give it a click if you like.
        

        


        
            A simple primary alert with an example link. Give it a click if you like.
            
            
            A simple secondary alert with an example link. Give it a click if you like.
            
            
            A simple success alert with an example link. Give it a click if you like.
            
      
     
  

4.2 使用彩色链接类

在《Bootstrap5中文手册》助手分类中的彩色链接中，可以使用link-*类对链接着色。与text-*类不同，这些类具有：hover和：focus状态。彩色链接不是警告框特有的，对所有链接有效，所以下面没用警告框颜色，以下是各种颜色：

  
    
    
    
    
    
    
  
  
    

      



        
Primary link
        
Secondary link
        
Success link
        
Danger link
        
Warning link
        
Info link
        
Light link
        
Dark link

      
     
  

倒数第二个我把背景设置为黑色，否则不易分辨。

5 附加内容

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

Well done!
Aww yeah, you successfully read this important alert message.
This example text is going to run a bit longer so that you can see 
how spacing within an alert works with this kind of content.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

虽然看起来还不错，不过不建议把它当做布局排版的组件，网格和后面介绍的更加强大的卡片更适合排版。

6 关闭

开始的第一个例子中，我们已经使用关闭按钮，下面我们再讲一下其原理，如果不想深入研究的无效观看本节，直接复制例子即可。

使用alert JavaScript插件，可以关闭任何内联警报（即警告框）。方法如下：

• 确保已加载bootstrap.bundle.min.js。

• 添加一个关闭按钮和.alert-dismissible类，该类在警报的右侧添加额外的填充，并定位关闭按钮。

• 在close按钮上，添加data-bs-dismiss="alert"属性，该属性触发JavaScript功能。一定要使用button元素在所有设备上进行正确的操作。

• 要在解除警报时设置警报动画，请确保添加.fade和.show类。

当警报解除时，元素将从页面结构中完全移除。如果键盘用户使用“关闭”按钮解除警报，他们的焦点将突然丢失，并根据浏览器的不同，重置为页面/文档的开头。因此，我们建议包含额外的JavaScript来侦听closed.bs.alert 事件并以编程方式将focus（）设置到页面中最合适的位置。如果您计划将焦点移动到通常不接收焦点的非交互元素，请确保将tabindex="-1"添加到该元素。

“Bootstrap中警告框组件的使用方法是什么”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！