3.4Bootstrap学习组件篇之导航、标签、面包屑导航

1、导航

Bootstrap中可用的导航有相似的标记，用基类

.nav

开头，这是相似的部分。改变修饰类可以改变样式。

1）标签页

注意

.nav-tabs

类需要

.nav

基类。

代码段：

<h1 class="page-header">标签页</h1>
<ul class="nav nav-tabs">
<li class="active"><a href="#">主页</a></li>
<li><a href="#">属性</a></li>
<li><a href="#">信息</a></li>
</ul>

预览：

Requires JavaScript tabs plugin

For tabs with tabbable areas, you must use the tabs JavaScript plugin.

2）胶囊式标签页

用相同的
HTML 标记，但要用

.nav-pills

代替。

代码段：

<h1 class="page-header">胶囊式标签页</h1>
<ul class="nav nav-pills">
<li class="active"><a href="#">主页</a></li>
<li><a href="#">属性</a></li>
<li><a href="#">信息</a></li>
</ul>预览：



Pills
可以竖直堆叠。只要加上

.nav-stacked

。



3）两端对齐的导航

在大于768px的屏幕上，通过

.nav-justified

可以很容易的让标签页或胶囊式标签呈现出同等宽度。在小屏幕上，导航链接呈现堆叠样式。

Safari 和响应式两端对齐导航

Safari有一个bug：对于两端对齐的导航，水平改变浏览器大小将引起绘制错误。此bug可以在justified nav example页面得到重现。
4）禁用的链接

对任何导航（包括标签页，pills，或列表，加入

.disabled

使链接为灰色且没有鼠标悬停效果。

链接功能没有受到影响

这个类只改变

<a>

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

代码段：
<h1 class="page-header">禁用掉的链接</h1>
<ul class="nav nav-pills">
<li class="disabled"><a href="#">Disabled link</a></li>
<li><a href="#">Disabled link</a></li>
<li><a href="#">Disabled link</a></li>
<li><a href="#">Disabled link</a></li>
<li><a href="#">Disabled link</a></li>
</ul>
预览：



5）使用下拉菜单

一点点额外HTML和 JavaScript下拉菜单插件 加入下拉菜单。

<h1 class="page-header">带下拉菜单的导航</h1>
<ul class="nav nav-tabs">
<li><a href="#">链接</a></li>
<li><a href="#">链接</a></li>
<li><a href="#">链接</a></li>
<li><a href="#">链接</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">linklink</a></li>
<li><a href="#">linklink</a></li>
<li><a href="#">linklink</a></li>
</ul>
</li>
</ul>预览：



带下拉菜单的标签页



2、标签

代码段：

<h1 class="page-header">标签</h1>
<h1>示例标签<span class="label label-default">New</span></h1>
<h2>示例标签<span class="label label-default">New</span></h2>
<h3>示例标签<span class="label label-default">New</span></h3>
<h4>示例标签<span class="label label-default">New</span></h4>
<h5>示例标签<span class="label label-default">New</span></h5>
<h6>示例标签<span class="label label-default">New</span></h6>

预览：

可用的变体

用下面的任何一个class即可改变标签的外观。
代码：
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

预览：



3、面包屑导航

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

分割符自动地通过CSS的

:before

和

content

添加上了。