关于作者:
- 郑云飞, 程序员Java(web前端,web后端,oracle数据库or mysql数据库)
- 艺名:天放
本文主要来讲解以下内容: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添加上了。