Zurb Foundation：通过CLI设置项目后如何使下拉菜单正常工作

debugcn 发表于 Dev

请

我已经使用CLI创建了一个Foundation-project（基础为new myProjectName）。

我使用CodeKit编译的“ app.scss”文件。这样就可以使用app.css文件。

现在，我想从下拉菜单开始，但是我无法正常工作。到目前为止，这就是我所得到的。基于index.html文件，这是基础项目的安装。

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation</title>
    <link rel="stylesheet" href="stylesheets/app.css" />
    <script src="bower_components/modernizr/modernizr.js"></script>
  </head>
  <body>
    <div class="row">
      <div class="large-12 columns">
        <ul class="dropdown menu" data-dropdown-menu>
          <li><a href="#">Item No. One</a></li>
          <li><a href="#">Item No. Two</a></li>
          <li><a href="#">Item No. Three</a></li>
        </ul>
      </div>
    </div>

    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/foundation/js/foundation.min.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

菜单不会出现水平显示（应显示为水平）。相反，它在垂直方向上保留为无样式的无序列表。

我想我必须包括或导入更多文件或在某些app.scss中进行更改...

但是目前，我真的很困惑，因为这些项目目录带有许多目录和子目录。很多东西对我来说似乎也是多余的，并使我感到困惑。

有人可以告诉我如何运行下拉功能（和类似功能）吗？

骇客节

我想分享一些我在修读Foundation 5和Foundation 6大约两年时所学到的知识。

为了使任何前端框架有效并有所作为，其核心功能应辅助/实现一些javascript功能（js）和样式（满足前端设计需求的元素）（css）。

此类特定于核心脚本和样式的代码被捆绑并发布为版本，以供用户下载和使用。Zurb还发布了此类软件包，其版本从Foundation 3到Foundation 6。

此外，遵循惯例是提供针对特定需求的单个文件js和css文件。提供此概念的目的是允许用户根据自己的需求自定义功能并更好地了解框架的工作。核心文件由所有这些单独的元素组成，这些元素构成了整个框架的当前版本。

生产版本和开发版本

开发版本

这些单独的元素是框架的开发版本文件。当您想尝试其细微差别或实现特定于功能的复杂需求时，可以使用它们。具有良好文档说明的框架将具有规范，该规范将说明如果要包括开发版本文件，则需要相互依赖文件的列表。

对于Foundation 6，您在foundation/dist/plugins和中看到的文件列表foundation/js（都是相同的）是针对本地开发版本的。当您将站点部署到托管服务器上时，您不想托管所有这些文件。

请记住，您所做的每个引用都是一个新的http请求，它将消耗大量宝贵的加载时间。因此，请始终尝试减少引用的数量。

Foundation 6确实具有js文件和css文件的版本，可为您使用Foundation 6所做的所有操作提供完全支持。这是生产版本。

精简版为正式版

将primary reference您的文件need到refer您的前端代码是minified verisons（文件有.min附加到文件名）。

对于Foundation 6，foundation/dist/您可以看到foundation.min.css和foundation.min.js文件。这些是使用Foundation 6提供的所有元素和功能所需要的核心。

如果您引用的是最低版本，则无需引用开发版本文件。

缩小版本是什么？

文件的缩小版本是文件的压缩版本，其中缩进，空格和其他提到的可提高人类可读性的元素已在概念中删除，以通过改善页面加载时间来减少文件大小。

建议上传您的缩小版本app.css和/app.js或您创建的特定于应用程序的脚本和样式表。您可以使用uglify js之类的工具或其他缩小工具来生成文件的压缩/缩小版本。

这就是我所需要的全部吗？

好吧，您还需要注意其他一些事情。

通常，任何前端框架都将使用jquery。因此，您将必须提供一个在线URL参考，例如：
```
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
```
或者

jquery-2.2.4.min.js从jquery.com下载文件并参考before引用该foundation.min.js文件。更不用说，您可以选择使用哪个版本的jquery。
简单地引用参考文献并不能解决目的。您将必须触发一个函数，该函数将监视您的html脚本，并使用您提到的jquery / js和css引用将它们呈现为漂亮的功能和元素。

如果将其包含在页面中（建议在页脚中），则所有这些都会发生。
```
<script type="text/javascript">
  $(document).foundation();
</script>
```

如果您的html脚本类似于以下内容，则可以使用：

<!DOCTYPE html>
<html lang="en">

 <head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Site Title</title>
    <link rel="stylesheet" href="css/foundation.min.css">
    <link rel="stylesheet" href="css/app.css">        
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/foundation.min.js"></script>
 </head>
 <body>
  <!-- Page Content -->

  <footer>
   <script type="text/javascript">
       $(document).foundation();
    </script>  
   </footer>
 </body>
</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-06-25

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章