本文详细介绍了Bootstrap3中的导航组件，包括标签页、pills、列表的使用方法，如基本样式、禁用状态、对齐方式、堆叠排列及下拉菜单等。此外，还展示了不同方向的标签页切换效果，如顶部、底部、左侧和右侧，适用于商品列表展示和其他多种场景。
导航：标签页、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.
...
...
540
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
