Bootstrap - 导航元素

引导导航元素 - 从概述，环境设置，基本结构，全局样式，网格系统，流体网格系统，布局，响应式设计，排版，表单，按钮，图像，图标，下拉列表，按钮开始，简单易学地学习Bootstrap组，导航元素，导航栏，面包屑，分页，标签，徽章，版式，缩略图，警报，进度栏，媒体对象，Javascript插件像过渡，模态，下拉列表，Scrollspy，选项卡，工具提示，弹出，警报，按钮，折叠， Carousel，Typeahead，Affix，Glyphicons，Jumbotron，Demos。

Bootstrap为样式导航元素提供了一些不同的选项.它们共享相同的标记和基类， .nav . Bootstrap还提供了一个帮助类，用于共享标记和状态.交换修饰符类以在每种样式之间切换.

表格导航或选项卡

创建选项卡式导航菜单 :

从基本无序列表开始，基类为 .nav
添加课程 .nav-tabs .

以下示例演示了这个和减号;

Tabs Example

Home

SVN

iOS

VB.Net

Java

PHP

Pills Navigation

Basic Pills

要将标签变为药片，请按照上述相同步骤使用.nav-pills类而不是.nav-tabs。

以下示例演示了:

Pills Example

Home

SVN

iOS

VB.Net

Java

PHP

Vertical Pills

您可以使用类.nav-stacked以及类和减号来垂直堆叠药丸。 .nav，.nav-pills。

以下示例演示了此:

Vertical Pills Example

Home

SVN

iOS

VB.Net

Java

PHP

Justified Nav

您可以使用类.nav-justified以及.nav，.nav-tabs或.nav，.nav-pills分别制作宽度超过768px的屏幕，其宽度相等的制表符或药丸。在较小的屏幕上，导航链接是堆叠的。

以下示例演示了这一点:

Justified Nav Elements Example

Home

SVN

iOS

VB.Net

Java

PHP

Home

SVN

iOS

VB.Net

Java

PHP

Disabled Links

对于每个.nav类，如果添加.disabled类，它将创建一个灰色链接，该链接也会禁用:hover状态，如下例所示:

Disabled Link Example

Home

SVN

iOS(disabled link)

VB.Net

Java

PHP

Home

SVN

iOS

VB.Net(disabled link)

Java

PHP

这个类只会改变的外观，而不是它的功能。使用自定义JavaScript在此处禁用链接。

Dropdowns

导航菜单与下拉菜单共享类似的语法。默认情况下，您有一个列表项，其中一个锚点与一些数据属性一起使用，以触发带有.dropdown-menu类的无序列表。

Tabs with Dropdowns

向标签添加下拉列表:

从基本无序列表开始，基类为.nav
添加类.nav-tabs。
现在添加一个带有.dropdown-menu类的无序列表。

Tabs With Dropdown Example

Home

SVN

iOS

VB.Net

Java

Swing

jMeter

EJB

Separated link

PHP

Pills with Dropdowns

要用Pills做同样的事情，只需将 .nav-tabs 类交换为 .nav-pills ，如下例所示.

Pills With Dropdown Example

Home

SVN

iOS

VB.Net

Java

Swing

jMeter

EJB

Separated link

PHP