基础 CSS 厨房水槽 Magellan

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

Foundation CSS Kitchen Sink具有在我们的网站和应用程序中运行良好的基础元素。 Magellan用于在单击链接时跳转到给定的目标。当我们想直接跳转到某个特定部分而不向下滚动网页时使用它。

Foundation CSS Kitchen Sink Magellan 属性：

• data-magellan ：用于创建部分的链接。
• data-magellan-target：用于在单击链接时创建目标部分。

句法：

   ....


   ....

示例 1：以下代码演示了水平菜单链接。

HTML

  
    
  
  
  
  

  

  
    GeeksforGeeks
  
  
    Foundation CSS Kitchen Sink Magellan
  
  
    
      
        Section 1
      
    
    
      
        Section 2
      
    
    
      
        Section 3
      
    
  
  
  
    
      
        Section 1
      
      
        A Computer Science portal for geeks. 
        It contains well written, well thought
        and well explained computer science and
        programming articles.A Computer Science
        portal for geeks.   
      
  
    
    
      
        Section 2
      
      
        With the idea of imparting programming
        knowledge, Mr. Sandeep Jain,an IIT Roorkee 
        alumnus started a dream, GeeksforGeeks.
      
  
    
    
      
        Section 3
      
      
        With the idea of imparting programming knowledge,
        Mr. Sandeep Jain, an IIT Roorkee alumnus started
        a dream, GeeksforGeeks. 
      
  
    
  
  
    $(document).ready(function () {
      $(document).foundation();
    })
  
  

  

输出：

基础 CSS 厨房水槽 Magellan

示例 2：以下代码演示了垂直菜单链接。

HTML

  
    
  
  
  
  

  

  
  
      GeeksforGeeks
  
  
  
    Foundation CSS Kitchen Sink Magellan
  
  
  
    
      
        Section 1
      
    
  
    
      
        About GeeksforGeeks
      
    
  
    
      
        GeeksforGeeks Image
      
    
  
  
  
  
    
      
        Section 1
      
  
      
        A Computer Science portal for geeks.
        It contains well written, well
        thought and well explained computer
        science and programming articles.
      
  
    
  
    
      
        About GeeksforGeeks
      
  
      
        A Computer Science portal for geeks.
        It contains well written, well
        thought and well explained computer
        science and programming articles.
      
  
    
  
    
      
        GeeksforGeeks Image
       
  
      
    
  
  
  
  
    $(document).ready(function () {
      $(document).foundation();
    })
  
  

  

输出：

基础 CSS 厨房水槽 Magellan

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