Question

我正在学习如何使用yiistrap，我想设置导航栏上的按钮类型。这是我的代码：

<div id="mainmenu">
<?php $this->widget('bootstrap.widgets.TbNavBar',array(
    'brandLabel'=>TbHtml::b(Yii::app()->name),
    'color'=>TbHtml::NAVBAR_COLOR_INVERSE,
    'display'=>null,
    'items'=>array(
        array(
            'class'=>'bootstrap.widgets.TbNav',
            'items'=>array(
                array('label'=>'Home', 'url'=>array('/site/index')),
                array('label'=>'About', 'url'=>array('/site/page', 'view'=>'about')),
                array('label'=>'Contact', 'url'=>array('/site/contact')),
            ),
        ),
        array(
            'class'=>'bootstrap.widgets.TbNav',
            'htmlOptions'=>array('class'=>'pull-right'),
            'items'=>array(
                array('label'=>'Login', 'url'=>array('/site/login'), 'visible'=>Yii::app()->user->isGuest),
                array('label'=>'Logout ('.Yii::app()->user->name.')', 'url'=>array('/site/logout'), 'visible'=>!Yii::app()->user->isGuest)
            ),
        ),
    ),
)); ?>

我也想把导航栏固定..我知道它的设置'display = TbHtml :: NAVBAR_DISPLAY_FIXEDTOP，但它需要一些身体内容，如导航条在头文字上呈现，使其隐藏。

Answer 1

如果我正确理解您的问题，您的意思是说顶部导航栏（如展示here）会隐藏下面内容的前30个像素。

这是Bootstrap和任何派生框架中的已知问题。要解决此问题，您需要在常规body { padding-top: 60px; }和bootstrap.css之间注入CSS规则bootstrap-responsive.css（也在我上面链接的示例中显示）。 Yiistrap不会自动执行此操作。

您可以修改扩展名或手动加载核心和响应式CSS。

扩展TbApi中找到的bootstrap/components/类，并覆盖registerAllCss()方法以加载registerCoreCss()和registerResponsiveCss()之间的上述修复。< / p>

或者不是使用Yii::app()->bootstrap->register()来将CSS和JS注入到视图中，而是可以手动调用register()调用的所有方法（如上面TbApi类中定义的那样）。这将使您能够在正确的时间和地点注入修复。

修改：关于更改导航栏内容的外观。您可以使用Skullcrasher指出的class => '…'将特定类分配给导航栏中的特定项目。除此之外，您可以向自己的样式表添加其他规则，以修改导航栏的外观。 Yiistrap（和Bootstrap）默认只提供2个选项，白色和黑色导航栏。其他任何东西都必须由您定义。

Answer 2

要设置按钮类型（我假设您正在谈论，成功，警告，警告按钮），您可以设置TbNav项目数组中每个按钮的类（每个项目都是一个按钮）。只需为要更改的项目添加引导按钮类（btn- * ..），例如

'class'=>'bootstrap.widgets.TbNav',
        'items'=>array(
            array('label'=>'Home', 'url'=>array('/site/index'),'class'=>'btn-error'),
            array('label'=>'About', 'url'=>array('/site/page'), 'class'=>'btn-succes'),
            array('label'=>'Contact', 'url'=>array('/site/contact')),
        ),

Yistrap设置按钮类型在TbNav中

2 个答案: