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

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

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

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

• 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
            
        
    

  

输出：