基础 CSS 厨房水槽轨道

Foundation CSS是 CSS 的前端框架，由 ZURB 基金会于 2011 年 9 月构建，用于开发可在任何设备上完美运行的响应式网站、应用程序和电子邮件。它使用 HTML、CSS 和 Javascript 编写，并被许多著名公司使用，如 Amazon、Facebook、eBay 等。它使用 Grunt 和 Libsass 等包进行快速编码和控制，并使用 Saas 编译器加快开发速度。

Kitchen Sink具有在网站和应用程序中工作的元素。轨道用于创建使用轨道滑动元素的滑块 班级。

基础 CSS 厨房水槽轨道类：

• 轨道：用于创建带有一些元素的滑块。
• 轨道容器：用于创建容器。
• orbit-previous：用于导航到上一个容器。
• orbit-next ：用于导航到下一个容器。
• orbit-slide ：用于创建轨道容器幻灯片。

句法：

    

        Content
        Content
        
 Content 
    

示例 1：此示例描述 Foundation CSS 中的 Kitchen Sink Orbit 类。

HTML

  

    Foundation CSS Kitchen Sink Orbit
    
    
    
    
    
    
    
    

  

    
        
            GeeksforGeeks
         
        
            Foundation CSS Kitchen Sink Orbit
         
    
    
        
            
                Previous Slide
◀ 
            
             
                Next Slide
▶ 
             
            
                
                    First slide
                    
                        A Computer Science portal for geeks. 
                        It contains well written, well thought 
                        and well explained computer science and 
                        programming articles 
                    
  
                
            
            
                
                    Second slide
                    
                        GeeksforGeeks.org was created with 
                        a goal in mind to provide well written, 
                        well thought and well explained solutions 
                        for selected questions.
                    
  
                
            
        
        
            
               First slide
               Current Slide 
            
             
                Second slide
            
        
    
    
        $(document).ready(function() {
            $(document).foundation();
        })
    

  

输出：

厨房水槽轨道

示例2：本示例描述了包含不同内容的轨道类。

HTML

  

    Foundation CSS Kitchen Sink
    
    
    
    
    
    
    
    
    
        .center {
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
    

  

    
        
            GeeksforGeeks
        
        Foundation CSS Kitchen Sink Orbit
    
    
        
            
               Previous Slide
◀
            
            
                Next Slide
▶
            
            
                
                    First slide
                    
                        A Computer Science portal for geeks.
                        It contains well written, well thought
                        and well explained computer science and 
                        programming articles. Billions of Users, 
                        Millions of Articles Published, Thousands
                        Got Hired by Top Companies and the numbers
                        are still growing. Free Tutorials, Millions
                        of Articles, Live, Online and Classroom Courses,
                        Frequent Coding Competitions ,Webinars by 
                        Industry Experts, Internship opportunities 
                        and Job Opportunities.
                    
  
                
            
            
                
                    Second slide
                    
                        GeeksforGeeks.org was created with 
                        a goal in mind to provide well written,
                        well thought and well explained solutions
                        for selected questions. Billions of Users,
                        Millions of Articles Published, 
                        Thousands Got Hired by Top Companies
                        and the numbers are still growing. 
                        Free Tutorials, Millions of Articles, 
                        Live, Online and Classroom Courses ,
                        Frequent Coding Competitions ,
                        Webinars by Industry Experts, Internship
                        opportunities and Job Opportunities.
                    
  
                
            
            
                
                    Third slide
                    
                        GeeksforGeeks.org was created with 
                        a goal in mind to provide well written,
                        well thought and well explained solutions
                        for selected questions. Billions of Users,
                        Millions of Articles Published, 
                        Thousands Got Hired by Top Companies
                        and the numbers are still growing. 
                        Free Tutorials, Millions of Articles, 
                        Live, Online and Classroom Courses ,
                        Frequent Coding Competitions ,
                        Webinars by Industry Experts, Internship
                        opportunities and Job Opportunities.
                    
  
                
            
            
                
                    Fourth slide
                    
                
            
            
                
                    Fifth slide
                    
                        GeeksforGeeks.org was created with 
                        a goal in mind to provide well written,
                        well thought and well explained solutions
                        for selected questions. Billions of Users,
                        Millions of Articles Published, 
                        Thousands Got Hired by Top Companies
                        and the numbers are still growing. 
                        Free Tutorials, Millions of Articles, 
                        Live, Online and Classroom Courses ,
                        Frequent Coding Competitions ,
                        Webinars by Industry Experts, Internship
                        opportunities and Job Opportunities.
                    
  
                
            
        
        
             
                First slide 
                Current Slide 
            
             
                Second slide 
            
             
                Third slide 
            
             
                Fourth slide 
            
             
                Fifth slide 
            
        
    
    
        $(document).ready(function() {
            $(document).foundation();
        })
    

输出：

厨房水槽轨道

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