基础 CSS 厨房水槽开关

Foundation CSS是由 ZURB 基金会于 2011 年 9 月构建的开源和响应式前端框架，可以轻松布局令人惊叹的响应式网站、应用程序和电子邮件，这些网站、应用程序和电子邮件看起来令人惊叹，并且可以在任何设备上访问。它被许多公司使用，例如 Facebook、eBay、Mozilla、Adobe，甚至迪士尼。该框架建立在类似 Saas 的引导程序上。它更加复杂、灵活且易于定制。它还带有 CLI，因此很容易与模块捆绑器一起使用。它提供了 Fastclick.js 工具，用于在移动设备上更快地呈现。在本文中，我们将讨论 Foundation CSS 中的 Kitchen Sink Switch。

Foundation CSS Kitchen Sink具有在我们的网站和应用程序中运行良好的基础元素。 Kitchen Sink Switch 用于添加拨动开关以更改其状态。

厨房水槽开关类：

• switch：该类用于添加开关以在两种状态之间切换。
• tiny：该类用于将开关定义为小尺寸开关。
• small：该类用于将开关定义为小尺寸开关。
• large：该类用于将开关定义为大尺寸开关。

句法：

     ....

示例 1：下面的示例说明了厨房水槽开关与小开关的使用 班级。

HTML

  

      
    
    
      
    
    
    
    
        .switch-paddle {
            background-color: green;
        }
    

  

    
      GeeksforGeeks
    
    
        Kitchen Sink tiny switch
        
            
            
            
        
    

输出：

厨房水槽微型开关

示例 2： 下面的示例说明了厨房水槽开关与小开关的使用 班级。

HTML

  

      
    
    
      
      
    
    
    
        .switch-paddle {
            background-color: green;
        }
    

  

    
      GeeksforGeeks
    
    
        Kitchen Sink small switch
        
            
            
            
        
    

输出：

厨房水槽小开关

示例 3：以下示例说明了厨房水槽开关与开关的使用 大 班级。

HTML

  

      
    
    
      
    
    
    
    
        .switch-paddle {
            background-color: green;
        }
    

  

    
        GeeksforGeeks
    
    
        Kitchen Sink large switch
        
            
            
            
        
    

输出：

厨房水槽大开关

参考： https://get.foundation/sites/docs/kitchen-sink.html#switch