📌  相关文章
📜  如何在 Bootstrap 4 中创建大纲按钮？

📅  最后修改于: 2022-05-13 01:56:23.607000             🧑  作者: Mango

如何在 Bootstrap 4 中创建大纲按钮？

在使用引导程序的轮廓类之前，只需了解一点按钮轮廓。按钮上的轮廓意味着在按钮周围给出轮廓。这个 '.btn-outline' 类从按钮中删除所有背景颜色或样式，以便为外部按钮提供有效、更亮和荧光笔的外观。基本上，大纲按钮负责在按钮周围绘制突出显示的边框。

按钮的轮廓用于多种用途，例如 –

  • 有效地查看按钮。
  • 表示超出现行工作机制的行动。
  • 在按钮周围绘制高亮轮廓以提供与普通按钮不同的外观。
  • 使按钮“脱颖而出”。
  • 为表单和对话框中的操作提供不同的样式。

方法：在 Bootstrap 4 中具有默认的上下文类或带有“.btn-outline”类的预定义类，在 bootstrap 4 中有一些内置的彩色按钮概述了用于不同目的的类。

按钮大纲类是：

  • .btn-outline-primary
  • .btn-outline-secondary
  • .btn-大纲-成功
  • .btn-大纲-危险
  • .btn-大纲警告
  • .btn-大纲信息
  • .btn-轮廓灯
  • .btn-大纲-黑暗

在所有其他样式表之前将 Bootstrap4 和 jQuery CDN 包含到 标记中以加载我们的 CSS。

示例 1：在此示例中，我们可以在引导程序中看到所有类型的按钮轮廓上下文类，并知道它是如何在网页中使用的。

HTML


 

    
    
 
    
     
    
     
    

 

    

        
Bootstrap Buttons Outline Examples

        
There are some examples of buttons:-

        

         


            This is show Simple Button Outline
                
            
        

 
 
        

         


            This is show Secondary Button Outline
                
            
        

 
 
        

         


            This is show Success Button Outline
                
            
        

 
 
        

         


            This is show Danger Button Outline
                
            
        

 
 
        

         


            This is show Warning Button Outline
                
            
        

 
 
        

 
         


            This is show Information Button Outline
                
            
        

 
        

 
         


            This is show Light Button Outline
                
            
        

 
        

 
         


            This is show Dark Button Outline
                
            
        

 
        

    


 

HTML


 

    
    
    
    
    

 

    

        

            Bootstrap Spinner Button Examples in Bootstrap
        

         
         
 

There are some examples of Spinner Button 

 
 
         
        
        


        
        
        
        
        
        
        
    


 

HTML


 

    
    
 
    
 
    
 
    
     
    

 

    

        

            Bootstrap Buttons Outline
            Examples in Different size
        

         
         


            There are some examples of buttons
            outline with different icons and
            different size:-
        

 
 
         
        
         
        
         
        


         
        
         
        
         
        
        


         
        
         
        
         
        


         
        
         
        
         
        
         
        
         
        
         
        
    


 

输出：

Bootstrap4 中的按钮轮廓类型

示例 2：在此示例中，我们在大纲按钮中使用微调器，其中的按钮指示当前正在处理或正在执行的操作。

HTML 



 

    
    
    
    
    

 

    

        

            Bootstrap Spinner Button Examples in Bootstrap
        

         
         
 

There are some examples of Spinner Button 

 
 
         
        
        


        
        
        
        
        
        
        
    


 

输出：

按钮内的引导微调器

示例 3：在此示例中，我们可以看到具有不同字形和大小的按钮轮廓上下文类。

HTML 



 

    
    
 
    
 
    
 
    
     
    

 

    

        

            Bootstrap Buttons Outline
            Examples in Different size
        

         
         


            There are some examples of buttons
            outline with different icons and
            different size:-
        

 
 
         
        
         
        
         
        


         
        
         
        
         
        
        


         
        
         
        
         
        


         
        
         
        
         
        
         
        
         
        
         
        
    


 


输出：

Bootstrap 中具有不同大小和图标的 Bootstrap 轮廓按钮。