navbar yii2中的容器流体

g6baxovj 于 2022-11-09 发布在其他

关注(0)|答案(3)|浏览(157)

我开始学Yii2，
我想创建如下布局：http://www.yiiframework.com/doc-2.0/ext-bootstrap-index.html
我有点困惑，如何yii写引导导航.我想创建导航到容器流体.我有一个写在html上的codeigniter像这样：

<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="<?php echo site_url('admin'); ?>"><i class="fa fa-home"></i> <?php echo $this->config->item('erp_title'); ?></a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-left">
            <li><a href="#"><i class="fa fa-spinner fa-spin"></i> Export</a></li>
            <li><a href="#"><i class="fa fa-anchor"></i> Import</a></li>
            <li><a href="#"><i class="fa fa-archive"></i> Inventory</a></li>
            <li><a href="#"><i class="fa fa-gavel"></i> Operation</a></li>
            <li><a href="#"><i class="fa fa-money"></i> Marketing</a></li>

            <li><a href="#"><i class="fa fa-money"></i> Keuangan </a></li>
            <li><a href="#"><i class="fa fa-money"></i> Accounting </a></li>
            <li><a href="#"><i class="fa fa-pencil"></i> Persum </a></li>
            <li><a href="#"><i class="fa fa-ship"></i> Armada</a></li>
            <li><a href="#"><i class="fa fa-laptop"></i> IT</a></li>

        </ul>

        <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-user"></i> <?php print_r($this->ion_auth->user()->row()->username); ?> <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <?php
                    if ($this->ion_auth->is_admin()) {
                        ?>
                        <li><a href="<?php echo site_url('admin/groups'); ?>">Groups</a></li>
                        <li><a href="<?php echo site_url('admin/users'); ?>">Users</a></li>
                    <?php } ?>

                    <li><a href="<?php echo site_url('admin/user/profile'); ?>">Profile page</a></li>
                    <li class="divider"></li>
                    <li><a href="<?php echo site_url('admin/user/logout'); ?>">Logout</a></li>
                </ul>

            </li>

        </ul>
    </div><!--/.nav-collapse -->
</div>

如何在yii2中创建容器流体导航栏？

yii

来源：https://stackoverflow.com/questions/39020600/container-fluid-in-navbar-yii2

3条答案

按热度按时间

7gcisfzg1#

使容器流体化的正确方法是在NavBar：：开始声明中调整Navbar的配置，如下所示：

NavBar::begin([
   'innerContainerOptions' => ['class' => 'container-fluid'],
]);

赞(0）回复(0）举报 2022-11-09

kx1ctssn2#

您可以用途：

use yii\bootstrap\NavBar;
use yii\bootstrap\Nav;

NavBar::begin([
        'brandLabel' => 'NavBar Test',
        'innerContainerOptions' => ['class' => 'container-fluid'],
        'brandUrl' => Yii::$app->homeUrl,
        'options' => [
        'class' => 'navbar-inverse',
    ],
]);
echo Nav::widget([
    'options' => ['class' => 'navbar-nav navbar-right'],
    'items' => [
        ['label' => 'Home', 'url' => ['/site/index']],
        ['label' => 'About', 'url' => ['/site/about']],
    ],
]);
NavBar::end();

enter link description here
也仅适用于菜单：

use yii\widgets\Menu;

echo Menu::widget([
    'items' => [
        // Important: you need to specify url as 'controller/action',
        // not just as 'controller' even if default action is used.
        ['label' => 'Home', 'url' => ['site/index']],
        // 'Products' menu item will be selected as long as the route is 'product/index'
        ['label' => 'Products', 'url' => ['product/index'], 'items' => [
            ['label' => 'New Arrivals', 'url' => ['product/index', 'tag' => 'new']],
            ['label' => 'Most Popular', 'url' => ['product/index', 'tag' => 'popular']],
        ]],
        ['label' => 'Login', 'url' => ['site/login'], 'visible' => Yii::$app->user->isGuest],
    ],
]);

enter link description here

赞(0）回复(0）举报 2022-11-09

sycxhyv73#

您可以使用适当的布局添加新的布局视图\layouts
例如：wide.php
查看（复制）main.php布局，您可以更改它，特别是更改container-fluid容器上方的部分

<div class="container-fluid">
        <div>    
        <?php echo Breadcrumbs::widget(['links' => isset($this->params['breadcrumbs']) ? $this->params['breadcrumbs'] : [], ]);   ?>       
        <?php echo Alert::widget(); ?>

        <?= $content ?>
        </div>
    </div>

那么你可以在控制器中改变这个动作的布局

public function actionYourAction()
{

   ........
   $this->layout = 'wide';
   return $this->render('your_view', [
        ......
        'model'                 => $model,
       .....
    ]);
}

赞(0）回复(0）举报 2022-11-09

我来回答

navbar yii2中的容器流体

3条答案

相关问题

热门标签

最新问答