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

Question

我已经使用 CLI ( foundation 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 ...

但目前我真的很困惑，因为这些项目目录带有太多的目录和子目录。很多东西对我来说都是多余的，让我很困惑。

谁能告诉我我需要做什么才能获得下拉功能（和类似功能）运行？

Answer 1

我想分享我在摆弄 Foundation 5 和 Foundation 6 大约 2 年的过程中获得的一些知识。

要使任何前端框架有效并有所作为，其核心功能应该 assist/implement 一些 javascript 函数 (js) 和元素样式 (css)满足前端设计需求。

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

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

生产版&开发版

开发版本

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

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

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

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

缩小版是生产版

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

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

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

什么是缩小版？

文件的缩小版本是文件的压缩版本，其中提到的缩进、空格和其他元素被删除，以通过缩短页面加载时间来减小文件大小。

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

这就是我所需要的，对吧？

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

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

从 jquery.com 下载 jquery-2.2.4.min.js 文件并引用 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>

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

Zurb Foundation: How to make Dropdown Menus work after setting up a project via CLI

css

responsive-design

zurb-foundation

生产版&开发版

这就是我所需要的，对吧？