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