基础 CSS 开关内部标签

Foundation CSS是由 ZURB 基金会于 2011 年 9 月构建的开源和响应式前端框架，可以轻松设计美观的响应式网站、应用程序和电子邮件，这些网站、应用程序和电子邮件看起来很棒并且可以在任何设备上访问。它被许多公司使用，例如 Facebook、eBay、Mozilla、Adobe，甚至迪士尼。该框架建立在类似 SaaS 的引导程序之上。它更加复杂、灵活且易于定制。它还带有 CLI，因此很容易与模块捆绑器一起使用。它提供了 Fastclick.js 工具，用于在移动设备上更快地呈现。 Switch通常给用户一个选项来选择存在的两种可能性中的一种。因此，基本开关是我们可以打开或关闭它的开关。在 Foundation CSS 中，开关只不过是我们用来创建这种样式的复选框标记。内部标签是我们可以在开关中给出的文本，它充当我们开关的标签。

基础 CSS 切换内部标签类：

• switch：这个类被赋予必须进行切换的元素。
• switch-active：此类包含仅在开关打开时显示的活动文本。
• switch-inactive：此类包含仅在开关关闭时显示的非活动文本。

句法：

 
 
active text
   in-active text
 

示例 1：这是一个基本示例，说明了使用 Foundation CSS 制作的切换内部标签。

HTML

  

    Foundation CSS Switch Inner Labels
    
    
    
    
    
    
    
    

  

    
        GeeksforGeeks
        Foundation CSS Switch Inner Labels
    
  
    
        
        
            Yes
            No
        
    
      
    
        $(document).foundation();
    

  

输出：

示例 2：这是一个基本示例，说明了使用 Foundation CSS 制作的 Radio Switch 内部标签。

HTML

  

    Foundation CSS InnerLabels Switch
    
    
    
    
    

    


  

    
        GeeksforGeeks
        Foundation CSS InnerLabels Switch
          
Select Your Age below
  
    
    
        Age below 19
        
            
            
                Do you like me?
                Yes
                No
            
        
        Age between 20-45
        
            
            
                Do you like me?
                Yes
                No
            
        
        Age above 45
        
            
            
                Do you like me?
                Yes
                No
            
        
    
    
        $(document).foundation();
    

  

输出：

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