好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

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添加上了。

查看更多关于Bootstrap3.0学习第十二轮:导航、标签、面包屑导航的详细内容...

  阅读:87次