Zend Framework 2 Gezinme Menüsü Twitter Bootstrap Entegrasyonu

Question

Şu anda veritabanından bir menü oluşturuyorum ve kod harika çalışıyor. Ancak, şimdi twitter bootstrap ile menü tarzını yapmak istiyorum ve bu noktada sorun yaşıyorum. Zend framework 2 nav menüsünü twitter bootstrap ile entegre etmenin bir yolu var mı? Birisi ilgilenirse, oluşturulan menü aşağıdaki gibidir.

<ul class="nav"> 
<li> 
    <a href="/view-page/home">Home</a> 
    <ul> 
     <li> 
      <a href="/view-page/coupons">Coupons</a> 
      <ul> 
       <li> 
        <a href="/view-page/printable-coupons">Printable Coupons</a> 
        <ul> 
         <li> 
          <a href="/view-page/cut-these-coupons">Cut these here coupons</a> 
         </li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</li> 
<li class="active"> 
    <a href="/view-page/about-us">About Us</a> 
</li> 
</ul> 

Answer 1

Gezinmeyi oluşturmak için gerekli kısmi parçaları kullanabilirsiniz.

Şablonunuzda içine gezintinizi görüntülemek için:

<?php $partial = array('application/navigation/topnav.phtml', 'default') ?> 
<?php $this->navigation('navigation')->menu()->setPartial($partial) ?> 
<?php echo $this->navigation('navigation')->menu()->render() ?> 

Navigasyon böyle bir şey kısmi olmalıdır:

uygulama/navigasyon/topnav.phtml

<ul class="nav"> 
    <?php $count = 0 ?> 
    <?php foreach ($this->container as $page): ?> 
     <?php /* @var $page Zend\Navigation\Page\Mvc */ ?> 
     <?php // when using partials we need to manually check for ACL conditions ?> 
     <?php if(! $page->isVisible() || !$this->navigation()->accept($page)) continue; ?> 
     <?php $hasChildren = $page->hasPages() ?> 
     <?php if(! $hasChildren): ?> 
     <li <?php if($page->isActive()) echo 'class="active"'?>> 
      <a class="nav-header" href="<?php echo $page->getHref() ?>"> 
       <?php echo $this->translate($page->getLabel()) ?> 
      </a> 
     </li> 
     <?php else: ?> 
     <li class="dropdown"> 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#"> 
       <span><?php echo $this->translate($page->getLabel()) ?></span> 
      </a> 

      <ul class="dropdown-menu" id="page_<?php echo $count ?>"> 
      <?php foreach($page->getPages() as $child): ?> 
       <?php // when using partials we need to manually check for ACL conditions ?> 
       <?php if(! $child->isVisible() || !$this->navigation()->accept($child)) continue; ?> 
       <li> 
        <a href="<?php echo $child->getHref() ?>"> 
         <?php echo $this->translate($child->getLabel()) ?> 
        </a> 
       </li> 
      <?php endforeach ?> 
      </ul> 
     </li> 
     <?php endif ?> 
     <?php $count++ ?> 
    <?php endforeach ?> 
</ul> 

Açıkçası bu kadar basit Örneğin, keyfi gezinme düzeylerinin dikkatini çekmeyecek ve mükemmel bir çalışma yapmak için bazı ekstra sınıf adlarını eklemeniz gerekecek. Bootstrap ile tly ama fikir olsun.

Answer 2

Kodu aşağıdan deneyin; Bootstrap 3 yeni, kullanımı için

<div class="nav-collapse"> 
     <?php 
      echo $this->navigation('navigation') 
      ->menu() 
      ->setMinDepth(0) 
      ->setMaxDepth(0) 
      ->setUlClass('nav') 
      ->setPartial(array('partial/topnav.phtml', 'Application')); 
     ?> 
    </div> 

Answer 3

:

<div class="navbar navbar-inverse navbar-fixed-bottom"> 
    <div class="navbar-inner"> 
    <div class="container"> 
     <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </a> 
     <ul class="nav" id="menu">  
     <?php $count = 0; ?> 
     <?php foreach ($this->container as $page): ?> 
      <?php //var_dump($page); exit;?> 
      <?php /* @var $page Zend\Navigation\Page\Mvc */ ?> 
      <?php // when using partials we need to manually check for ACL conditions ?> 
      <?php if(! $page->isVisible() || !$this->navigation()->accept($page)) continue; ?> 
      <?php $hasChildren = $page->hasPages() ?> 
      <?php if(! $hasChildren): ?> 
      <li> 
       <a class="nav-header" href="<?php echo $page->getHref() ?>"> 
        <?php echo $this->translate($page->getLabel()) ?> 
       </a> 
      </li> 
      <?php else: ?> 
       <a class="dropdown-toggle" data-toggle="dropdown" href="#page_<?php echo $count; ?>"> 
        <span><?php echo $this->translate($page->getLabel()) ?></span> 
       </a> 
       <ul class="dropdown-menu" id="page_<?php echo $count; ?>"> 
       <?php foreach($page->getPages() as $child): ?> 
        <?php // when using partials we need to manually check for ACL conditions ?> 
        <?php if(! $child->isVisible() || !$this->navigation()->accept($child)) continue; ?> 
        <li> 
         <a href="<?php echo $child->getHref() ?>"> 
          <?php echo $this->translate($child->getLabel()) ?> 
         </a> 
        </li> 
       <?php endforeach ?> 
       </ul> 
      <?php endif ?> 
      <?php $count++; ?> 
     <?php endforeach ?> 
     </ul> 
     <form class="navbar-search pull-right" action=""> 
      <input type="text" class="search-query span2" placeholder="Search"> 
     </form> 
     </div><!-- /.nav-collapse --> 
    </div><!-- /.container --> 
    </div><!-- /.navbar-inner --> 
</div><!-- /.navbar --> 

Şablonunuzda içine gezintinizi görüntülemek için

uygulama/kısmi/topnav.phtml: kısmi Navigasyon böyle bir şey olmalı bu kısmi görünüm olarak;

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
<div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="<?php echo $this->url('home') ?>"><img src="<?php echo $this->basePath('img/logo.png') ?>" alt="Title App"/>&nbsp;TitleText</a> 
    </div> 
    <div class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav"> 
     <?php foreach ($this->container as $page) { ?> 
      <?php /* @var $page Zend\Navigation\Page\Mvc */ ?> 
      <?php // when using partials we need to manually check for ACL conditions ?> 
      <?php if (!$page->isVisible() || !$this->navigation()->accept($page)) { continue; } ?> 
      <?php $hasChildren = $page->hasPages(); ?> 
      <?php if (!$hasChildren) { ?> 
       <li> 
        <a href="<?php echo $page->getHref() ?>"> 
         <?php echo $this->translate($page->getLabel()) ?> 
        </a> 
       </li> 
      <?php } else { ?> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown"><?php echo $this->translate($page->getLabel()) ?> <b class="caret"></b></a> 
       <ul class="dropdown-menu"> 
        <?php foreach ($page->getPages() as $child) { ?> 
         <?php // when using partials we need to manually check for ACL conditions ?> 
         <?php if(!$child->isVisible() || !$this->navigation()->accept($child)) { continue; } ?> 
         <li> 
          <a href="<?php echo $child->getHref() ?>"> 
           <?php echo $this->translate($child->getLabel()) ?> 
          </a> 
         </li> 
        <?php } ?> 
       </ul> 
      </li> 
      <?php } ?> 
     <?php } ?> 
    </ul> 
    </div> 
</div> 
</nav> 

Answer 4

Bunu değiştirmek göz bütünleştirmek ve zend nav bar ile hissetmek için: Bunun için

<ul class="nav">

:

<ul class="nav navbar-nav">