7.5.5 基础导航条
前面介绍的导航只是一个导航组件,除了可以单独使用导航组件外,还可以将它放在导航条中使用。换句话说,导航条往往会作为导航组件的容器。导航条除了可包含导航组件外,导航条通常具有自己的背景色,导航条还可包含按钮、表单、文本和普通链接等。
导航条在移动设备上可以折叠起来(并可开可关),当viewport
宽度超过768px
时导航条会再次恢复水平展开模式。
提示:当浏览器viewport
的宽度小于@grid-float-breakpoint
值时,导航条的元素变为折叠排列(移动设备的展现方式);当浏览器viewport
的宽度大于@grid-float-breakpoint
值时,导航条的元素变为水平排列(非移动设备展现模式)。@grid-float-breakpoint
变量的默认值是768px,如有必要,可通过源代码修改该变量的值。
导航条样式
Bootstrap
为导航条提供了如下样式。
样式 | 描述 |
---|---|
.navbar |
该样式用于设置导航条。导航条通常是一个<nav> 元素,或一个被指定了role="navigation" 属性的<div> 元素。建议使用<nav> 元素。 |
.navbar-default 或navbar-inverse |
设置导航条的风格 。该样式设置在导航条<nav> 上,其中.navbar-default 用于设置默认的导航条风格,而.navbar-inverse 则用于设置反色的导航条风格。 |
.navbar-nav |
将导航组件放置到导航条中时应在导航组件 设置该样式。 |
开发简单的导航条的步骤
通过上面的介绍不难发现,开发最简单的导航条只需要如下两步:
- 定义导航条容器,该容器可以是
<nav>
元素或被指定了role="navigation"
的<div>
元素。建议在导航条内嵌套一个样式为container-fluid
的容器。 - 将放入导航条中的导航组件的
.nav-tabs
或.nav-pills
样式改为.navbar-nav
。
程序示例
下面的代码示范了如何开发一个基本的导航条。
1 |
|
该页面中的:
1号代码定义了一个class="navbar navbar-default"
样式的<nav>
元素,该元素就可以作为导航条容器。
2号代码将导航组件的样式设为class="nav navbar-nav"
,这样该导航组件就可以被添加到导航条中了。
导航条的两种风格
该导航条的样式是.navbar-default
,因此可以看到导航条显示淡灰色的背景色。如果将导航条的样式改为.navbar-inverse
,则该导航条将会显示深色背景.
如何解决导航条占据两行的情况
由于Bootstrap
并不知道导航条内放置的元素需要占据多宽的空间,因此可能会遇到导航条中的内容折行的情况(也就是导航条占据两行)。解决该问题的方法有如下几种:
- 减少导航条内各元素所占据的宽度。
- 使用下拉式菜单,将部分导航项放在下拉式菜单中。
- 利用响应式工具类隐藏导航条内的一些元素,让用户通过按钮才能展开被隐藏的导航元素。
- 修改触发导航条在水平排列和折叠排列之间转换的
viewport
宽度值,该宽度值由@grid-float-breakpoint
变量控制,其默认值是768px
。
原文链接: 7.5.5 基础导航条