制作版＆amp;开发版

Question

我使用CLI（基础新myProjectName）创建了一个Foundation项目。

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

现在我想从Dropdown菜单开始，但我无法让它工作。这就是我到目前为止所拥有的。基于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中包含或导入更多文件或更改内容......

但是目前我真的被困了，因为这些项目目录带有如此多的目录和子目录。很多东西似乎也让我感到多余，让我感到困惑。

有人可以告诉我，为了让下拉功能（和类似功能）运行，我该做些什么？

Answer 1

我想分享一些我在学习基础5和基础6时大约2年的知识。

为了使任何前端框架有效并发挥作用，它的核心功能应该协助/实现一些javascript函数（js）和元素样式（css），以满足前端设计需求。

这些特定的核心脚本和样式特定代码被捆绑并作为版本发布，供用户下载和使用。 Zurb还发布了这样的软件包，即Foundation 3 to Foundation 6。

除此之外，通常的做法是提供针对特定需求的单个文件js和css文件。这是在允许用户根据自己的需要定制功能并更好地理解框架的工作的概念中提供的。核心文件包含所有这些单独的元素，包括整个框架的当前版本。

制作版＆amp;开发版

开发版

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

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

请记住，您所做的每个引用都是一个新的http请求，它将消耗大量宝贵的加载时间。所以总是尽量减少参考数量。

Foundation 6确实有一个js文件和css文件的版本，可以为你使用基础6所做的一切提供完整的支持。这是生产版本。

缩小版本是生产版本

前端代码中primary reference到need的{{1}}个文件是refer（文件名后附加minified verisons的文件）。

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

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

什么是缩小版？

文件的缩小版本是文件的压缩版本，其中提到的缩进，空格和其他元素被提及以提高人类可读性，以减少文件大小，从而缩短页面加载时间。

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

这就是我所需要的一切吗？

嗯，还有一些事情需要注意。

通常，任何前端框架都会使用jquery。因此，您必须提供在线网址引用，例如：
```
app.js
```
或

从jquery.com下载<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>文件，并参考jquery-2.2.4.min.js文件引用before。更不用说，您可以选择使用哪个版本的jquery。
简单引用引用并不能解决问题。您将必须触发一个函数，该函数将使用您提到的jquery / js和css引用来观察您的html脚本并将它们渲染为不错的功能和元素。

所有这一切，如果你把它包含在你的页面中（最好是在你的页脚中）。
```
foundation.min.js
```

如果您的html脚本类似于以下内容，那么您很高兴：

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

Zurb Foundation：如何在通过CLI设置项目后使Dropdown菜单工作

1 个答案:

制作版＆amp;开发版

这就是我所需要的一切吗？