基础 CSS 开关基础

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

Switch通常给用户一个选项来选择存在的两种可能性中的一种。因此，基本开关是我们可以打开或关闭它的开关。在 Foundation CSS 中，开关只不过是我们用来创建这种样式的复选框标记。

基础 CSS 开关类：

• switch：这个类被赋予必须进行切换的元素。
• switch-input：这个类被赋予输入元素，其类型必须是一个复选框，它负责切换开关的打开和关闭。
• switch-paddle：这个类负责在原始复选框上创建的样式，这也负责开关周围的框背景。
• show-for-sr：这个类用于屏蔽文本。

句法：

  
  
    ...
  

笔记：

• 标签的for属性是指向输入的属性。
• 它是使开关可点击的属性。
• 标签的属性、输入的id和输入的名称的值必须匹配，以确保这两个元素之间存在链接。
• 具有类show-for-sr的元素包含被屏蔽的文本，主要有助于向视障人士描述该元素的功能。

示例 1：这是一个基本示例，说明了使用 Foundation CSS 创建的基本开关。

HTML

    
        Foundation CSS Switch
        
        
        
  
        
        
        
        
        
    
    
        
          GeeksforGeeks
          Foundation CSS Switch
          
          
            
            
              GeeksforGeeks
            
          
        
        
            $(document).foundation();
        
    

输出：

基础 CSS 开关基础

示例 2：这是一个基本示例，说明了使用 Foundation CSS 开关进行的调查。

HTML

    
        Foundation CSS Switch Basics
        
        
        
        
        
        
        
        
    
    
        
        GeeksforGeeks
        Foundation CSS Switch Basics
        
        
        For the Following questions below answer Yes/No
        
            
                Do you like day over night.
                
                    
                    
                    GeeksforGeeks
                    
                
            
            
                You are hardworking over intelligent.
                
                    
                    
                    GeeksforGeeks
                    
                
            
             
                Your mental strength is good
                
                    
                    
                        GeeksforGeeks
                    
                
            
        
        
        
            $(document).foundation();
        
    

输出：

基础 CSS 开关基础

参考： https ://get.foundation/sites/docs/switch.html