twitter-bootstrap Zend Framework 2 导航菜单 Twitter Bootstrap 集成
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14884572/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Zend Framework 2 Navigation Menu Twitter Bootstrap Integration
提问by rgarrison3
I am currently building a menu from the database and the code works great. However I am now wanting to style the menu with the twitter bootstrap and this is where I am having issues. Does anyone know of a way to integrate the zend framework 2 nav menu with the twitter bootstrap? If anyone is interested the menu that is generated is like the following.
我目前正在从数据库构建一个菜单，代码运行良好。但是，我现在想使用 twitter bootstrap 设置菜单样式，这就是我遇到问题的地方。有谁知道将 zend 框架 2 导航菜单与 twitter 引导程序集成的方法？如果有人感兴趣，生成的菜单如下所示。
<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>
回答by Andrew
You can use partials to generate the navigation as your require.
您可以根据需要使用部分来生成导航。
To display your navigation inside your template:
要在模板中显示导航：
<?php $partial = array('application/navigation/topnav.phtml', 'default') ?>
<?php $this->navigation('navigation')->menu()->setPartial($partial) ?>
<?php echo $this->navigation('navigation')->menu()->render() ?>
Your navigation partial should be something like this:
您的导航部分应该是这样的：
application/navigation/topnav.phtml
应用程序/导航/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>
Obviously that's a simple example and won't take care of an arbitrary number of levels of navigation, and you would need to add in some extra class names etc to make it work perfectly with Bootstrap but you get the idea.
显然，这是一个简单的示例，不会处理任意数量的导航级别，您需要添加一些额外的类名等以使其与 Bootstrap 完美配合，但您明白了。
回答by Rob
For the new Bootstrap 3, use this as partial view;
对于新的 Bootstrap 3，使用它作为局部视图；
<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"/> 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>
回答by Carlos Miranda
To integrate the look and feel with zend nav-bar change this:
要将外观和感觉与 zend 导航栏相结合，请更改以下内容：
<ul class="nav">
<ul class="nav">
for this:
为了这：
<ul class="nav navbar-nav">
<ul class="nav navbar-nav">
回答by Philip F
Try below code; Your navigation partial should be something like this:
试试下面的代码；您的导航部分应该是这样的：
application/partial/topnav.phtml
应用程序/部分/topnav.phtml
<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 -->
To display your navigation inside your template:
要在模板中显示导航：
<div class="nav-collapse">
<?php
echo $this->navigation('navigation')
->menu()
->setMinDepth(0)
->setMaxDepth(0)
->setUlClass('nav')
->setPartial(array('partial/topnav.phtml', 'Application'));
?>
</div>
