基础轨道工作,但没有造型

时间:2015-06-11 15:44:43

标签: javascript html css zurb-foundation

我很难尝试将基础轨道设置为风格 - 它确实可以运行。

我用grunt编译SASS(通过凉亭下载)。大多数事情似乎都运转正常。所以如果我在这里尝试内容滑块示例:

http://foundation.zurb.com/docs/components/orbit.html

我明白了:

Orbit Styling Isssue

我只是不知道自己做错了什么。 :(

<!DOCTYPE html>
<html class="no-js">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation 5</title>
    <link rel="stylesheet" href="/css/app.css">
    <script src="scripts/libs/modernizr.js"></script>
    <script data-main="scripts/index.js" src="scripts/libs/require.js"></script>
  </head>
  <body>
    <nav data-topbar class="top-bar">
      <ul class="title-area">
        <li class="name">
          <h1><a href="#">My App</a></h1>
        </li>
        <li class="toggle-topbar menu-icon"> <a href="#"><span>Menu</span></a></li>
      </ul>
    </nav>
    <div class="row">
      <div class="large-12 columns">
        <ul data-orbit class="example-orbit-content">
          <li data-orbit-slide="headline-1">
            <div>
              <h2>Headline 1</h2>
              <h3>Subheadline</h3>
            </div>
          </li>
          <li data-orbit-slide="headline-2">
            <div>
              <h2>Headline 2</h2>
              <h3>Subheadline</h3>
            </div>
          </li>
          <li data-orbit-slide="headline-3">
            <div> 
              <h2>Headline 3</h2>
              <h3>Subheadline</h3>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <script src="/scripts/libs/jquery.js"></script>
    <script src="/scripts/libs/foundation.js"></script>
    <script>$(document).foundation();</script>
  </body>
</html>

我还是轨道上的错误?

更新:sass的grunt编译

sass: {
    options: {
        includePaths: ['bower_components/foundation/scss']
    },
    dist: {
        options: {
            outputStyle: 'compressed',
            sourceMap: true,
        },
        files: {
            'build/public/css/app.css': 'styles/app.scss'
        }
    }
},

0 个答案:

没有答案