2016-01-15 3 views
4

новый для основания 6 здесь так, вероятно, отсутствует что-то простое. Я пытаюсь сделать панели, но просто не показываю для меня. Есть что-то ive пропущено?Панели в фундаменте 6 не рендеринга

Независимо от того, поставил ли я панель div =, нет или нет, не имеет значения. Он выглядит так же, как до или после.

Глупый вопрос, но должен ли я запускать это из веб-службы для их рендеринга?

Я установил фундамент 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> 
+0

Привет @callium, если ответ Колина работает, вы можете проверить его в ответ, пожалуйста? – tomByrer

ответ

9

От Foundation 6 Callout Docs:

Callouts объединить панели и оповещения от фонда 5 в один общий компонент контейнера.

Используйте класс .callout вместо .panel в Фонд 6.