如何使用Bootstrap创建类似于切换按钮的单选按钮？

切换按钮：可以从一种状态切换到另一种状态(即可以从打开状态切换到关闭状态，反之亦然)的按钮称为切换按钮。例如：

• 我们房间中的特定开关可以打开或关闭。这是现实生活中的拨动开关的一个很好的例子。
• 我们手机中的WiFi或蓝牙选项是另一个示例，可以打开或关闭。

单选按钮：顾名思义，这是收音机中按钮的概念，对于第一个电台，我们选择第一个按钮，对于第二个电台，我们选择第二个按钮，依此类推。这就像一个多项选择题，一次只有一个按钮处于活动状态。在这里，我们从选项列表中进行选择。例如：

• FM收音机中的按钮。
• 考试中的多项选择题。

示例：使用Bootstrap创建一个单选按钮。

html

  

    
    
  
    

  

    

        

            
                 Radio button 1
            
  
            
                
                Radio button 2
            
  
            
                
                Radio button 3
            
  
            
                
                Radio button 4
            
  
            
                
                Radio button 5
            
        
    

  

要点：

• 我们必须向任何一个单选按钮添加一个选中的属性，以便在页面加载时预先选择该属性。这是一个布尔属性。
• 必须为所有元素集赋予相同的名称。

示例2：以下代码将帮助我们理解(在代码上)设计拨动开关和单选按钮的区别。

html

  

  
    
    
  
    
    
    
  
    
    
    
  
    
    
    
  
    
  
    
  
    
  
    
    
    
      
    
      
    
  
    
    
  
    Buttons
  
    
        .toggle,
        .radio {
            margin: 20px;
        }
    

  

    
        
            Toggle Button
        
    
  
    
        
            
                 Radio button 1
            
  
            
                 
                    Radio button 2
            
  
            
                 
                    Radio button 3
            
  
            
                
                    Radio button 4
            
  
            
                 
                    Radio button 5
            
        
    

  

输出：