导航:标签页、pills和列表
轻量级默认样式相同的标记结构,不同的类
所有的导航组件都列在这里了—标签页、pills和列表—共用.nav类,具有相同的标记结构和样式
基本标签页
基于
- 并添加.nav-tabs类:
基本pills
相同的HTML结构,但这里使用了.nav-pills类:
禁用状态
为任一导航组件(标签页、pills或列表)添加.disabled类,均可让链接变灰并失去鼠标悬停效果。但是链接仍然是可以点击的,除非你将链接的href属性去除,你还可以写JavaScript代码阻止用户点击链接。
...
首页...
组件对齐
可以使用.pull-left 或 .pull-right工具类来对齐导航链接。每个类都实现特定方向的浮动。
堆叠式排列
标签页和pills默认都是水平排列的,只需额外添加一个.nav-stacked类即可让他们实现堆叠式排列。
堆叠式排列的标签页
...
堆叠式排列的pills
...
下拉菜单
通过一小段HTML代码和下拉菜单JavaScript插件即可添加一个下拉菜单。
Tabs with dropdowns
带有下拉菜单的Pills
导航列表
这是一个简单并且容易的方式来构建一个带有可选标头的导航列表。他们经常被用在侧栏处,就像OS X中的Finder。
导航列表案例
将class="nav nav-list"添加到一组链接列表中:
...
注意
导航列表需要嵌套时,将class="nav nav-list"添加到被嵌套的
- 中。
水平分割线
新建一个列表项,并赋予.divider类,即可创建一条水平分割线,就像这样:
...
...
标签页式导航
仅需一个简单的插件就可以在标签页之间切换内容。Bootstrap整合了4中样式的标签页样式:top (默认)、right、bottom和left。
案例
为了让标签页可切换,需要在.tab-content中创建一个带有唯一ID的.tab-pane。
I'm in Section 1.
Howdy, I'm in Section 2.
What up girl, this is Section 3.
I'm in Section 1.
Howdy, I'm in Section 2.
淡入效果
为了让标签页有淡入效果,需要给每个.tab-pane添加.fade类。
需引入jQuery插件
所有可切换标签页都需要jQuery插件的支持。阅读更多关于JavaScript插件文档吧。
变换方向的标签页
底部
翻转HTML的顺序, 并添加一个.tabs-below类即可让标签页置于底部。
I'm in Section A.
Howdy, I'm in Section B.
What up girl, this is Section C.
...
...
左侧
添加.tabs-left类将标签页置于左侧。
I'm in Section A.
Howdy, I'm in Section B.
What up girl, this is Section C.
...
...
右侧
添加.tabs-right类将标签页置于右侧。
I'm in Section A.
Howdy, I'm in Section B.
What up girl, this is Section C.
...
...