📜  带有示例的自举按钮

📅  最后修改于: 2021-05-25 18:11:13             🧑  作者: Mango

             
                           

输出:
引导按钮固体

概述的按钮

Bootstrap为我们提供了一系列类,这些类可以在需要在项目中使用轮廓样式的按钮时使用,即没有背景色的按钮。轮廓按钮类可删除应用于按钮的任何背景色或背景图像样式。这些类在下面列出:

btn-outline-primary btn-outline-secondary btn-outline-success
btn-outline-danger btn-outline-warning btn-outline-info
btn-outline-light btn-outline-dark

例子:



  
      
    
    
  
    Hello, world!
    
    
  
  
    
      

GeeksForGeeks

                      
                                                                                              
             
                           

输出:
引导按钮概述

改变大小

Bootstrap为我们提供了不同的类,这些类允许更改按钮的大小。这些类在下面列出:

  • btn-lg:此类用于使按钮变大。

    例子:

    
    
      
          
        
        
      
        Hello, world!
        
        
      
      
        
          

    GeeksForGeeks

                          
                                                        
                 
                               

    输出:
    引导按钮-lg

  • btn-sm:此类用于减小按钮的尺寸。

    例子:

    
    
      
          
        
        
      
        Hello, world!
        
        
      
      
        
          

    GeeksForGeeks

                          
                                                        
                 
                               

    输出:
    引导按钮SM

  • btn-block:此类用于使按钮占据其父元素的整个宽度。
    
    
      
          
        
        
      
        Hello, world!
        
        
      
      
        
          

    GeeksForGeeks

                          
                                                        
                 
                               

    输出:
    引导按钮块

改变状态

Bootstrap为我们提供了“活动”和“禁用”类来更改按钮的状态。

切换状态

我们可以通过在                             

             
                              

注意:第三个按钮已预设为活动状态。
输出:

引导按钮切换

复选框样式的按钮

要获得具有复选框样式的按钮,我们需要使用带有类型=“ checkbox”属性-值对的标记,该标记由

标签包围,其类值设置为“ btn-group-toggle”(class =“ btn-group-toggle”),而data-toggle =“ buttons”属性对也是如此在
标记内是必需的。以下示例将清除该过程:

例子:



  
     
    
    
  
    Hello, world!
    
    
  
  
    
      

GeeksForGeeks

                      
        
                                                              
      
             
                                  

注意:默认情况下,要使按钮处于选中状态,我们需要在输入控件的

输出:

引导按钮复选框

单选按钮

要获得单选按钮,需要像平常一样使用带有类型=“ radio”属性-值对和其他基本属性-值组合的标记,以使单选按钮正常工作。反过来,标记被

标签包围,其类别值设置为“ btn-group btn-group-toggle”(class =“ btn-group btn-group-toggle”)和data-toggle =”按钮”
标记中还需要属性对。以下示例将清除该过程:

例子:



  
      
    
    
  
    Hello, world!
    
    
  
  
    
      

GeeksForGeeks

                      
        
                                               
      
             
                              

注意:默认情况下,要使按钮处于选中状态,我们需要在输入控件的

输出:
自举按钮收音机