Bootstrap3.0学习第十二轮：导航、标签、面包屑导航

上一篇：Bootstrap3.0学习第十一轮：输入框组

本文主要来讲解以下内容：1.导航；2.标签；3.面包屑导航。

导航

Bootstrap中可用的导航有相似的标记，用基类.nav开头，这是相似的部分。改变修饰类可以改变样式。

1、标签页

注意.nav-tabs类需要.nav基类。

在这里暂时只进行探讨简单的样式。

2、胶囊式标签页

用相同的 HTML 标记，但要用.nav-pills代替。

Pills 可以竖直堆叠。只要加上.nav-stacked。

3、两端对齐的导航

在大于768px的屏幕上，通过.nav-justified可以很容易的让标签页或胶囊式标签呈现出同等宽度。在小屏幕上，导航链接呈现堆叠样式。

4、禁用的链接

对任何导航（包括标签页，pills，或列表，加入.disabled使链接为灰色且没有鼠标悬停效果。

链接功能没有受到影响

这个类只改变的外观，而不是它的功能。用自定义的 JavaScript 禁用这里的链接。

通过将鼠标悬停你就可以查看简单的效果了，暂时无法截图。

5、使用下拉菜单 

6、带下拉菜单的胶囊式标签页

标签

简单案例

可用的变体

用下面的任何一个class即可改变标签的外观。

面包屑导航

用一个带方向的层次表明当前页面的位置。

分割符自动地通过CSS的:before和content添加上了。

（编辑：佛山站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!