Yii2集成 Bootstrap 导航条的使用

Yii2 继承了 Bootstrap ,它可以方便我们创建一个基于 Bootstrap 的响应式界面。

yii\bootstrap\Nav 封装了 Bootstrap 的 导航 ,可以单独使用,生成一组导航链接。

yii\bootstrap\NavBar 封装了 Bootstrap 的 导航条 ,必须结合 Nav 使用,才能生成一个自适应的导航条。

例如:

// 类文件
use yii\bootstrap\Nav;
use yii\bootstrap\NavBar;

// NavBar 呈现一个自适应的导航条
NavBar::begin([
    'brandLabel' => 'My Company',
    'brandUrl' => Yii::$app->homeUrl,
    'options' => [
        'class' => 'navbar-inverse navbar-fixed-top',
    ],
    'renderInnerContainer' => false,
]);

// 导航链接的数据
$menuItems = [
    ['label' => 'Home', 'url' => ['/site/index']],
    ['label' => 'Login', 'url' => ['/site/login']],
    ['label' => '子连接', 'items' => [
            ['label'=>'子链接1', 'url'=>'#'],
            ['label'=>'子链接2', 'url'=>'#'],
    ]],
];

// 导航的主要链接
echo Nav::widget([
    'options' => ['class' => 'navbar-nav navbar-right'],
    'items' => $menuItems,
]);
NavBar::end();  // 结束, 对应上面的 NavBar::begin()

其效果如图:

常用参数:

NavBar 的主要参数:
brandLabel              string   //导航标志的文字描述
brandUrl                string   //导航标志的链接
brandOptions            array    //导航标志的 HTML 属性
options                 array    //导航条的 HTML 属性, 将添加在最外围的 nav 元素上
containerOptions        array    //导航区域的 HTML 属性, 将添加在导航区域(.navbar-collapse)的 div 元素上
screenReaderToggleText  string   //span.sr-only 的文本内容, 默认为"Toggle navigation"
renderInnerContainer    boolean  //为 true 时将为 nav 添加子元素 div.container, 为 flase 时不添加, 默认为 true
innerContainerOptions   array    //div.container容器的 HTML 属性

Nav 的主要参数:
options           array    //导航的 HTML 属性, 将添加到 ul 元素上
items             array    //导航的链接数据
encodeLabels      boolean  //是否对链接进行 HTML 编码,默认为"true"
activateItems     boolean  //是否自动为活动对链接添加 CSS 样式,默认为"true"
activateParents   boolean  //是否对链接进行 HTML 编码,默认为"true"
dropDownCaret     string   //有子链接时,标签右侧的下拉符号,默认为'<b class="caret"></b>'
route             string   //
params            array    //

Nav items 数组的键值说明:
label        string   //链接的文字
url          array    //链接的url地址
linkOptions  array    //链接的 HTML 属性, 将添加到 a 元素上
options      array    //链接容器的 HTML 属性,将添加到 li 元素上
active       boolean  //这个链接是否为活动链接,默认为"true"
visible      boolean  //这个链接是否可见,默认为"true"
items        array    //子链接