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 //子链接