基础 CSS 手风琴基础

Foundation CSS是由 ZURB 于 2011 年 9 月创建的开源和响应式前端框架，可以轻松创建可在任何设备上运行的令人惊叹的响应式网站、应用程序和电子邮件。许多公司，如 Facebook、eBay、Mozilla、Adobe，甚至迪士尼，都在使用它。该框架基于bootstrap，类似于SaaS。它更加复杂、通用且可配置。它还带有一个命令行界面，使其易于与模块捆绑器一起使用。电子邮件框架为您提供响应式 HTML 电子邮件，可以在任何设备上阅读。 Foundation for Apps 允许您构建完全响应的 Web 应用程序。

手风琴是帮助我们组织和导航到单个容器中不同部分的元素。这些用于在容器中的部分之间切换。我们可以以结构化的方式存储大量数据，并且可以轻松访问。在本文中，我们将讨论手风琴的基础知识。

基础 CSS 手风琴基础课程：

• 手风琴：用于创建容器。
• 手风琴项：它用于创建手风琴项。
• 手风琴标题：用于给手风琴赋予标题。
• 手风琴内容：用于将一些内容放在手风琴项内。

句法：

....

示例 1：以下代码演示了 Accordion Basics 的一些内容。

HTML

  
    
    
  
    
    
    
    
  
  
    
      GeeksforGeeks
      Foundation CSS Accordion Basics
    
  
    
      
        GeeksforGeeks 1
  
        
          A Computer Science portal for geeks.
        
      
      
        GeeksforGeeks 2
  
        
          
            It contains well written, well thought and 
            well explained computer science and
            programming articles,
          
        
      
      
        GeeksforGeeks 3
  
        
          
            Gfg is the only reason to fall in love 
            with data structure and programming
          
        
      
    
  
    
      $(document).ready(function () {
        $(document).foundation();
      });
    
  

输出：

示例 2：以下代码演示了带有链接和图像的 Accordion 基础知识。

HTML

  
    
    
  
    
    
    
    
  
  
    
      GeeksforGeeks
      Foundation CSS Accordion Basics
    
  
    
      
        GeeksforGeeks 1
  
        
          A Computer Science portal for geeks.
          GeeksforGeeks website link
        
      
      
        GeeksforGeeks 2
        
          GeeksforGeeks image
          
        
      
      
        GeeksforGeeks 3
  
        
          
            Gfg is the only reason to fall in love with data structure and
            programming
          
  
          
          Link
        
      
    
  
    
      $(document).ready(function () {
        $(document).foundation();
      });
    
  

输出：

参考链接： https://get.foundation/sites/docs/accordion.html#basics