Navigation Elements

优质

小牛编辑

126浏览

2023-12-01

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

表格导航或标签

要创建选项卡式导航菜单 -

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

以下示例演示了这一点 -

<p>Tabs Example</p>
<ul class = "nav nav-tabs">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

丸导航

基本药丸

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

以下示例演示了这一点 -

<p>Pills Example</p>
<ul class = "nav nav-pills">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

垂直丸

您可以使用类.nav-stacked以及类 - .nav, .nav-pills垂直.nav-stacked .nav, .nav-pills 。

以下示例演示了这一点 -

<p>Vertical Pills Example</p>
<ul class = "nav nav-pills nav-stacked">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

Justified Nav

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

以下示例演示了这一点 -

<p>Justified Nav Elements Example</p>
<ul class = "nav nav-pills nav-justified">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>
<br>
<br>
<br>
<ul class = "nav nav-tabs nav-justified">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

禁用链接

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

<p>Disabled Link Example</p>
<ul class = "nav nav-pills">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li class = "disabled"><a href = "#">iOS(disabled link)</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>
<br>
<br>
<ul class = "nav nav-tabs">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li class = "disabled"><a href = "#">VB.Net(disabled link)</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

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

下拉(Dropdowns)

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

带下拉列表的标签

要向标签添加下拉菜单 -

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

<p>Tabs With Dropdown Example</p>
<ul class = "nav nav-tabs">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li class = "dropdown">
      <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#">
         Java 
         <span class = "caret"></span>
      </a>
      <ul class = "dropdown-menu">
         <li><a href = "#">Swing</a></li>
         <li><a href = "#">jMeter</a></li>
         <li><a href = "#">EJB</a></li>
         <li class = "divider"></li>
         <li><a href = "#">Separated link</a></li>
      </ul>
   </li>
   <li><a href = "#">PHP</a></li>
</ul>

药丸与下拉菜单

要使用药丸做同样的事情，只需将.nav-tabs类与.nav-pills交换，如下例所示。

<p>Pills With Dropdown Example</p>
<ul class = "nav nav-pills">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li class = "dropdown">
      <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#">
         Java <span class = "caret"></span>
      </a>
      <ul class = "dropdown-menu">
         <li><a href = "#">Swing</a></li>
         <li><a href = "#">jMeter</a></li>
         <li><a href = "#">EJB</a></li>
         <li class = "divider"></li>
         <li><a href = "#">Separated link</a></li>
      </ul>
   </li>
   <li><a href = "#">PHP</a></li>
</ul>