📜  基础 CSS JavaScript 安装和初始化

📅  最后修改于: 2022-05-13 01:56:41.701000             🧑  作者: Mango

基础 CSS JavaScript 安装和初始化

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

JavaScript 安装:

我们可以通过 2 种方式将 Foundation CSS JavaScript 添加到我们的网页中:

  • 使用 NPM 安装
  • 使用 CDN 链接

我们将了解在 Foundation CSS 中使用 Javascript 的两种方式,以及它们的实现。

使用 NPM 安装:

Foundation 在npm上可用。这个包包括所有源 Sass 和 JavaScript 文件,以及编译的 CSS 和 JavaScript,以未压缩和压缩的形式。

npm install foundation-sites

使用 CDN 链接:

只需在我们的 HTML 模板中插入以下代码行,我们就可以从 CDN 获取所需的基础 JS:

JavaScript 初始化:

jQuery 对象上的.foundation()函数可用于一次使用每个 Foundation 插件。

句法:

$(document).foundation();

示例:此示例通过实现它和不实现它来展示 Foundation JS 的重要性。

使用 JS 安装和初始化:

HTML

  

    
    
    
    
        Foundation CSS JavaScript Configuration
    
      
    
    
            
    
    
    

  

    

GeeksforGeeks

    

Foundation CSS dropdown menu example          when JS is installed and Initialized     

                        


HTML

  

    
    
    
    
        Foundation CSS JavaScript Configuration
    
      
    
    

  

    

GeeksforGeeks

    

        Foundation CSS dropdown menu example         without Foundation JS     

    


输出:

在 Foundation CSS 中安装 JavaScript

  • 没有 Foundation JS 安装和初始化:

HTML


  

    
    
    
    
        Foundation CSS JavaScript Configuration
    
      
    
    

  

    

GeeksforGeeks

    

        Foundation CSS dropdown menu example         without Foundation JS     

    

输出:从输出来看,我们没有使用 Foundation CSS JavaScript,因此代码无法正常工作。

没有基础 JS 安装

参考:https://get.foundation/sites/docs/javascript.html#installing