网站地图    收藏   

主页 > 前端 > Bootstrap3.0入门 >

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

来源:未知    时间:2015-04-13 14:16 作者:xxadmin 阅读:

[导读] 本文主要来讲解以下内容:1.导航;2.标签;3.面包屑导航。 导航 Bootstrap中可用的导航有相似的标记,用基类.nav开头,这是相似的部分。改变修饰类可以改变样式。 1、标签页 注意.na...

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

导航

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

1、标签页

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

1

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

2、胶囊式标签页

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

2

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

3、两端对齐的导航

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

3

4、禁用的链接

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

链接功能没有受到影响

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

4

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

5、使用下拉菜单 

5

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

6

标签

简单案例

7

可用的变体

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

8

面包屑导航

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

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

9

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论