2

我正在学习如何使用 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，但它需要一些正文内容，比如..导航栏在标题文本上呈现，使其隐藏。

4

2 回答 2

0

要设置按钮类型（我假设您正在谈论成功、警报、警告按钮），您可以在 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')),
        ),
于 2013-11-06T23:31:45.327 回答
0

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

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

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

扩展在中间TbApi找到的类bootstrap/components/并覆盖registerAllCss()加载上述修复的方法，registerCoreCss()并且registerResponsiveCss()工作正常。

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

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

于 2013-11-04T12:01:46.753 回答