前端开发

 首页 > 前端开发 > Bootstrap > Bootstrap3.0学习第十二轮:导航、标签、面包屑导航

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

分享到:
【字体:
导读:
         [导读] 本文主要来讲解以下内容: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

分享到:
Bootstrap3.0学习第十一轮:输入框组
本文主要来讲解以下内容:1.基本案例;2.尺寸;3.复选框和单选框;4.附加按钮;5.带下拉菜单的按钮;6.分段按钮;7.总结。 基本案例 通过在基于文本的输入框前面,后面或是两边加上文字或按钮,可以扩展对表单的控制。用带有.input-group-addon的.input-group,可以给.form-control前面或后面追加元素。 跨浏览...
Bootstrap3.0学习第十三轮:导航条
本文主要来讲解以下内容:1.默认的导航条;2.表单;3.按钮;4.文本;5.非导航的链接;6.组件对齐;7.固定在顶部;8.固定在底部;9.静止在顶部;10.反色的导航条;11.总结。 默认的导航条 导航条是在您的应用或网站中作为导航标头的响应式元组件。它们在移动设备上可以折叠(并且可开可关),且在可用的视口宽度增加...
  •         php迷,一个php技术的分享社区,专属您自己的技术摘抄本、收藏夹。
  • 在这里……