4

这里是基础 6 的新手，所以可能缺少一些简单的东西。我试图让面板渲染，但它只是没有显示给我。我错过了什么吗？

无论我是否放入 div = 面板，都没有区别。它看起来与之前或之后相同。

愚蠢的问题，但我是否必须从 Web 服务运行它才能呈现这些？

我使用命令行提示安装了foundation 6。

谢谢！

<!doctype html>
<html class="no-js" 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.0">
    <title>Site Demo</title>
    <link rel="stylesheet" href="css/app.css">
  </head>
  <body>

    <div class="row">
      <div class="large-12 columns">
        <div class="panel">
          <h1>Title</h1>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="large-12 columns">
      <div class="top-bar">
        <div class="top-bar-left">
          <ul class="dropdown menu" data-dropdown-menu>
            <li class="menu-text">Site Title</li>
            <li class="has-submenu">
              <a href="#">One</a>
              <ul class="submenu menu vertical" data-submenu>
                <li><a href="#">One</a></li>
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
              </ul>
            </li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li>
          </ul>
        </div>
          <div class="top-bar-right">
            <ul class="menu">
              <li><input type="search" placeholder="Search"></li>
              <li><button type="button" class="button">Search</button></li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="large-2 columns">
        <div class="large-2 columns">

        <a class="button" href="#"> button 1</a>
        <a class="button" href="#"> button 2</a>
        <a class="button" href="#"> button 3</a>
        <a class="button" href="#"> button 4</a>
        </div>

        <!--  <ul class="large-block-grid-1">

        <li><a class="button" href="#"> button 1</a></li>
        <li><a class="button" href="#"> button 2</a></li>
        <li><a class="button" href="#"> button 3</a></li>
        <li><a class="button" href="#"> button 4</a></li>
        </ul>
        -->

      </div>

      <div class="large-10 columns">
        <div class="large-4 columns">
          <div class="panel">
            <p>Content A</p>
          </div>
        </div>
        <div class="large-4 columns">
          <div class="panel">
            <p>Content B</p>
          </div>
        </div>
        <div class="large-4 columns">
          <div class="panel">
            <p>Content C</p>
          </div>
        </div>
      </div>
    </div>

    <div class="row" style="background-color:#cccccc;">
      <div class="large-12 columns">
        <p bg-color="red">Footer</p>
      </div>
    </div>

    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/what-input/what-input.js"></script>
    <script src="bower_components/foundation-sites/dist/foundation.js"></script>
    <script src="js/app.js"></script>

  </body>
</html>
4

1 回答 1

9

来自Foundation 6 标注文档：

标注将 Foundation 5 中的面板和警报组合到一个通用容器组件中。

使用类.callout而不是.panelFoundation 6。

于 2016-01-15T02:30:57.150 回答