基础 CSS 原型 实用程序 组件样式

Foundation CSS是由 ZURB 基金会于 2011 年 9 月构建的开源响应式前端框架，它可以轻松布局令人惊叹的响应式网站、应用程序和电子邮件，这些网站、应用程序和电子邮件看起来令人惊叹，并且可以在任何设备上访问。在本文中，我们将讨论基础 CSS 中的原型实用程序组件样式类。

在Foundation CSS 中， Prototyping Utilities Components Styling 用于通过向组件添加半径、边框、阴影来赋予组件样式。它主要用于卡片、表格、按钮、图像等。

Foundation CSS Prototyping Utilities 组件样式类：

• rounded：此类可用于为组件提供圆角。
• shadow：该类可用于为组件提供阴影。
• 有边框的：这个类可以用来给组件提供边框
• radius：此类可用于为组件提供半径。
• switch：这个类可以用来创建一个开关。
• switch-input：此类可用于向输入添加任何样式。
• switch-paddle：这个类可以用来给switch的背景和paddle添加任何样式。

句法：

    
    
    ...

示例 1：下面的示例说明了使用radius、bordered、rounded和 shadow类来使用 Prototyping Utilities 组件样式。

HTML

  

    
  
    
    
  
    
    
  
    
    

  

  
    

        GeeksforGeeks
    
  
    
Foundation CSS Component Styling
  
    
        GfG-Primary
    
  
    
        GfG-Success
    
  
    
        GfG-Warning
    
  

  

输出：

示例 2：下面的示例说明了使用switch、switch-input和switch-paddle类来使用原型实用程序组件样式。

HTML

  

    
  
    
    
  
    
    
  
    
    

  

  
    

      GeeksforGeeks
    
  
    
Foundation CSS Component Styling
  
    

      
      
    
  

  

输出：

参考链接： https://get.foundation/sites/docs/prototyping-utilities.html#component-styling