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

﹏ヽ暗。殇╰゛Y 2022-08-27 03:44 158阅读 0赞

**1、导航**

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

1）标签页

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

代码段：

预览：

![Center][]

#### 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>

预览：

![Center 1][]

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

![Center 2][]

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>

预览：

![Center 3][]

5）使用下拉菜单

一点点额外HTML和 [JavaScript下拉菜单插件][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>

预览：

![Center 4][]

带下拉菜单的标签页

![Center 5][]

**2、标签**

代码段：

预览：

![Center 6][]

### 可用的变体 ###

用下面的任何一个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>

预览：

![Center 7][]

**3、面包屑导航**

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

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

![Center 8][]

[Center]: /images/20220824/4d850e3bd22c48b4b1e6850594c7f698.png
[tabs JavaScript plugin]: http://v3.bootcss.com/javascript/#tabs
[Center 1]: /images/20220824/5f26a18325f4435ba6fc7c96dbc11707.png
[Center 2]: /images/20220824/b67124ff51ae4277b64c341dd3a257fa.png
[justified nav example]: http://v3.bootcss.com/examples/justified-nav/
[Center 3]: /images/20220824/5c850ddfdde84e3e98c82483993c4215.png
[JavaScript]: http://v3.bootcss.com/javascript/#dropdowns
[Center 4]: /images/20220824/a9020535e7fc4b7f8a2e5c77083de096.png
[Center 5]: /images/20220824/700f66a0790d48e8aca12fe5ea670a99.png
[Center 6]: /images/20220824/df2d0d40211c400bba6861f019e1c4ae.png
[Center 7]: /images/20220824/73536fae86124a6297f2639777bf4b71.png
[Center 8]: /images/20220824/7804acbd5d5046e5b6362c59d8c5b099.png