基础 CSS 厨房水槽 Abide

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

Kitchen Sink具有在我们的网站和应用程序中运行良好的基础元素。 Kitchen Sink Abide用于使用一些类和属性来验证表单。

基础 CSS 厨房水槽遵守类：

• fi-alert：此类用于使用图标在整个表单中显示全局级别的错误消息。
• alert：此类用于创建和显示预定义的警报消息。
• form-error：该类用于在用户输入错误信息时生成警告消息。
• help-text：该类用于显示一些指示如何响应特定字段的文本。它还告诉有关相应字段的一些附加信息。

注意： novalidate属性用于禁用所有浏览器验证。

句法：

    
     ...

示例 1：下面的示例说明了使用输入类型作为数字、文本和密码字段的 Kitchen Sink Abide 的使用。

HTML

  

  Foundation CSS Kitchen Sink Abide
  
  
  
  
  
  
  

  

  
    
      GeeksforGeeks
    
  
    Foundation CSS Kitchen Sink Abide
  
    
      
        
          
             
              OOP's! Please modify some information!.
            
  
          
        
      
  
      
        
          Number(required)
            
            
              OOP's! it is required.
            
          
          
            Please input any number here!!
          
  
        
  
        
          Name(not required)
            
          
          
            data-abide-ignore attribute ignores this field.
          
  
        
  
  
        
          Password(required)
            
            
              OOP's! Password is mandatory.
            
          
            Please enter the Password.
          
  
          
        
  
        
          Re-enter Password(required)
            
            
             OOP's! Password didn't match.
            
          
          
            data-equalto="password" attribute matches the 
            password in the above field.
          
  
        
      
  
      
        
          
            SUBMIT
          
        
  
        
          
            RESET
          
        
      
    
  
  
  
    $(document).ready(function () {
      $(document).foundation();
    })
  

  

输出：

• 

示例 2：下面是使用下拉选项单选按钮说明使用 Kitchen Sink Abide 的示例。

HTML

  

  Foundation CSS Kitchen Sink Abide
  
  
  
  
  
  
  
  

  

  
    
      GeeksforGeeks
    
  
    Foundation CSS Kitchen Sink Abide
  
    
      
        
          
            
              OOP's! Please modify some information!.
            
  
          
        
      
  
      
        
          
            GeeksforGeeks Courses, don't leave 
            it empty, please choose any one.
            
              
              DSA
              OOP's
              DBMS
              OS
            
          
        
      
  
      
        
          
            Choose your favorite website 
            for Computer Science.
          
          
          GeeksforGeeks
  
          
          Other
        
  
        
          
            Choose Your Favorite course on GeeksforGeeks.
          
          
          DSA
  
          
          DBMS
        
      
  
      
        
          SUBMIT
        
  
        
          RESET
        
      
    
  
  
  
    $(document).ready(function () {
      $(document).foundation();
    })
  

  

输出：

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