Bootstrap 提供的用于定义导航元素的一些选项。它们使用相同的标记和基类 .nav。Bootstrap 也提供了一个用于共享标记和状态的帮助器类。改变修饰的 class，可以在不同的样式间进行切换。

表格导航或标签

创建一个标签式的导航菜单：

  • 以一个带有 class .nav 的无序列表开始。
  • 添加 class .nav-tabs。

下面的实例演示了这点：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.    <title>Bootstrap 实例 - 标签式的导航菜单</title>
  5.    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  6.    <script src="/scripts/jquery.min.js"></script>
  7.    <script src="/bootstrap/js/bootstrap.min.js"></script>
  8. </head>
  9. <body>
  10.  
  11. <p>标签式的导航菜单</p>
  12. <ul class="nav nav-tabs">
  13.    <li class="active"><a href="#">Home</a></li>
  14.    <li><a href="#">SVN</a></li>
  15.    <li><a href="#">iOS</a></li>
  16.    <li><a href="#">VB.Net</a></li>
  17.    <li><a href="#">Java</a></li>
  18.    <li><a href="#">PHP</a></li>
  19. </ul>
  20.  
  21. </body>
  22. </html>

结果如下所示：

胶囊式的导航菜单

基本的胶囊式导航菜单

如果需要把标签改成胶囊的样式，只需要使用 class .nav-pills 代替 .nav-tabs 即可，其他的步骤与上面相同。

下面的实例演示了这点：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.    <title>Bootstrap 实例 - 基本的胶囊式导航菜单</title>
  5.    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  6.    <script src="/scripts/jquery.min.js"></script>
  7.    <script src="/bootstrap/js/bootstrap.min.js"></script>
  8. </head>
  9. <body>
  10.  
  11. <p>基本的胶囊式导航菜单</p>
  12. <ul class="nav nav-pills">
  13.    <li class="active"><a href="#">Home</a></li>
  14.    <li><a href="#">SVN</a></li>
  15.    <li><a href="#">iOS</a></li>
  16.    <li><a href="#">VB.Net</a></li>
  17.    <li><a href="#">Java</a></li>
  18.    <li><a href="#">PHP</a></li>
  19. </ul>
  20.  
  21. </body>
  22. </html>

结果如下所示：

垂直的胶囊式导航菜单

您可以在使用 class .nav、.nav-pills 的同时使用 class .nav-stacked，让胶囊垂直堆叠。

下面的实例演示了这点：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.    <title>Bootstrap 实例 - 垂直的胶囊式导航菜单</title>
  5.    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  6.    <script src="/scripts/jquery.min.js"></script>
  7.    <script src="/bootstrap/js/bootstrap.min.js"></script>
  8. </head>
  9. <body>
  10.  
  11. <p>垂直的胶囊式导航菜单</p>
  12. <ul class="nav nav-pills nav-stacked">
  13.    <li class="active"><a href="#">Home</a></li>
  14.    <li><a href="#">SVN</a></li>
  15.    <li><a href="#">iOS</a></li>
  16.    <li><a href="#">VB.Net</a></li>
  17.    <li><a href="#">Java</a></li>
  18.    <li><a href="#">PHP</a></li>
  19. </ul>
  20.  
  21. </body>
  22. </html>

结果如下所示：

两端对齐的导航

您可以在屏幕宽度大于 768px 时，通过在分别使用 .nav、.nav-tabs 或 .nav、.nav-pills 的同时使用 class .nav-justified，让标签式或胶囊式导航菜单与父元素等宽。在更小的屏幕上，导航链接会堆叠。

下面的实例演示了这点：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.    <title>Bootstrap 实例 - 两端对齐的导航元素</title>
  5.    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  6.    <script src="/scripts/jquery.min.js"></script>
  7.    <script src="/bootstrap/js/bootstrap.min.js"></script>
  8. </head>
  9. <body>
  10.  
  11. <p>两端对齐的导航元素</p>
  12. <ul class="nav nav-pills nav-justified">
  13.    <li class="active"><a href="#">Home</a></li>
  14.    <li><a href="#">SVN</a></li>
  15.    <li><a href="#">iOS</a></li>
  16.    <li><a href="#">VB.Net</a></li>
  17.    <li><a href="#">Java</a></li>
  18.    <li><a href="#">PHP</a></li>
  19. </ul><br><br><br>
  20.  
  21. <ul class="nav nav-tabs nav-justified">
  22.    <li class="active"><a href="#">Home</a></li>
  23.    <li><a href="#">SVN</a></li>
  24.    <li><a href="#">iOS</a></li>
  25.    <li><a href="#">VB.Net</a></li>
  26.    <li><a href="#">Java</a></li>
  27.    <li><a href="#">PHP</a></li>
  28. </ul>
  29.  
  30. </body>
  31. </html>

结果如下所示：

禁用链接

对每个 .nav class，如果添加了 .disabled class，则会创建一个灰色的链接，同时禁用了该链接的 :hover 状态，如下面的实例所示：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.    <title>Bootstrap 实例 - 导航元素中的禁用链接</title>
  5.    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  6.    <script src="/scripts/jquery.min.js"></script>
  7.    <script src="/bootstrap/js/bootstrap.min.js"></script>
  8. </head>
  9. <body>
  10.  
  11. <p>导航元素中的禁用链接</p>
  12. <ul class="nav nav-pills">
  13.    <li class="active"><a href="#">Home</a></li>
  14.    <li><a href="#">SVN</a></li>
  15.    <li class="disabled"><a href="#">iOS（禁用链接）</a></li>
  16.    <li><a href="#">VB.Net</a></li>
  17.    <li><a href="#">Java</a></li>
  18.    <li><a href="#">PHP</a></li>
  19. </ul><br><br>
  20.  
  21. <ul class="nav nav-tabs">
  22.    <li class="active"><a href="#">Home</a></li>
  23.    <li><a href="#">SVN</a></li>
  24.    <li><a href="#">iOS</a></li>
  25.    <li  class="disabled"><a href="#">VB.Net（禁用链接）</a></li>
  26.    <li><a href="#">Java</a></li>
  27.    <li><a href="#">PHP</a></li>
  28. </ul>    
  29.  
  30. </body>
  31. </html>

结果如下所示：

该 class 只会改变 <a> 的外观，不会改变它的功能。在这里，您需要使用自定义的 JavaScript 来禁用链接。

下拉菜单

导航菜单与下拉菜单使用相似的语法。默认情况下，列表项的锚与一些数据属性协同合作来触发带有 .dropdown-menu class 的无序列表。

带有下拉菜单的标签

向标签添加下拉菜单的步骤如下：

  • 以一个带有 class .nav 的无序列表开始。
  • 添加 class .nav-tabs。
  • 添加带有 .dropdown-menu class 的无序列表。
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.    <title>Bootstrap 实例 - 带有下拉菜单的标签</title>
  5.    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  6.    <script src="/scripts/jquery.min.js"></script>
  7.    <script src="/bootstrap/js/bootstrap.min.js"></script>
  8. </head>
  9. <body>
  10.  
  11. <p>带有下拉菜单的标签</p>
  12. <ul class="nav nav-tabs">
  13.    <li class="active"><a href="#">Home</a></li>
  14.    <li><a href="#">SVN</a></li>
  15.    <li><a href="#">iOS</a></li>
  16.    <li><a href="#">VB.Net</a></li>
  17.    <li class="dropdown">
  18.       <a class="dropdown-toggle" data-toggle="dropdown" href="#">
  19.          Java <span class="caret"></span>
  20.       </a>
  21.       <ul class="dropdown-menu">
  22.          <li><a href="#">Swing</a></li>
  23.          <li><a href="#">jMeter</a></li>
  24.          <li><a href="#">EJB</a></li>
  25.          <li class="divider"></li>
  26.          <li><a href="#">分离的链接</a></li>
  27.       </ul>
  28.    </li>
  29.    <li><a href="#">PHP</a></li>
  30. </ul>
  31.  
  32. </body>
  33. </html>

结果如下所示：

带有下拉菜单的胶囊

步骤与创建带有下拉菜单的标签相同，只是需要把 .nav-tabs class 改为 .nav-pills，如下面的实例所示：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.    <title>Bootstrap 实例 - 带有下拉菜单的胶囊</title>
  5.    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  6.    <script src="/scripts/jquery.min.js"></script>
  7.    <script src="/bootstrap/js/bootstrap.min.js"></script>
  8. </head>
  9. <body>
  10.  
  11. <p>带有下拉菜单的胶囊</p>
  12. <ul class="nav nav-pills">
  13.    <li class="active"><a href="#">Home</a></li>
  14.    <li><a href="#">SVN</a></li>
  15.    <li><a href="#">iOS</a></li>
  16.    <li><a href="#">VB.Net</a></li>
  17.    <li class="dropdown">
  18.       <a class="dropdown-toggle" data-toggle="dropdown" href="#">
  19.          Java <span class="caret"></span>
  20.       </a>
  21.       <ul class="dropdown-menu">
  22.          <li><a href="#">Swing</a></li>
  23.          <li><a href="#">jMeter</a></li>
  24.          <li><a href="#">EJB</a></li>
  25.          <li class="divider"></li>
  26.          <li><a href="#">分离的链接</a></li>
  27.       </ul>
  28.    </li>
  29.    <li><a href="#">PHP</a></li>
  30. </ul>
  31.  
  32. </body>
  33. </html>

结果如下所示：

Bootstrap<基础十六> 导航元素的更多相关文章

  1. Bootstrap <基础十八>面包屑导航（Breadcrumbs）

    面包屑导航(Breadcrumbs)是一种基于网站层次信息的显示方式.以博客为例,面包屑导航可以显示发布日期.类别或标签.它们表示当前页面在导航层次结构内的位置. Bootstrap 中的面包屑导航( ...

  2. Bootstrap <基础十九>分页

    Bootstrap 支持的分页特性.分页(Pagination),是一种无序列表,Bootstrap 像处理其他界面元素一样处理分页. 分页(Pagination) 下表列出了 Bootstrap 提 ...

  3. Bootstrap<基础十五> 输入框组

    Bootstrap 支持的另一个特性,输入框组.输入框组扩展自 表单控件.使用输入框组,可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮. 通过向输入域添加前缀和后缀的内容,您可以向用户输 ...

  4. Bootstrap<基础十四> 按钮下拉菜单

    使用 Bootstrap class 向按钮添加下拉菜单.如需向按钮添加下拉菜单,只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可.也可以使用 <span class=&qu ...

  5. Bootstrap <基础十二>下拉菜单（Dropdowns）

    Bootstrap 下拉菜单.下拉菜单是可切换的,是以列表格式显示链接的上下文菜单.这可以通过与 下拉菜单(Dropdown) JavaScript 插件 的互动来实现. 如需使用下列菜单,只需要在 ...

  6. Bootstrap<基础十> 响应式实用工具

    Bootstrap 提供了一些辅助类,以便更快地实现对移动设备友好的开发.这些可以通过媒体查询结合大型.小型和中型设备,实现内容对设备的显示和隐藏. 需要谨慎使用这些工具,避免在同一个站点创建完全不同 ...

  7. bootstrap基础学习【导航条、分页导航】（五）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. bootstrap历练实例： 导航元素中禁用的链接

    对每个 .nav class,如果添加了 .disabled class,则会创建一个灰色的链接,同时禁用了该链接的 :hover 状态, <!DOCTYPE html><html& ...

  9. java基础(十六)----- equals()与hashCode()方法详解 —— 面试必问

    本文将详解 equals()与hashCode()方法 概述 java.lang.Object类中有两个非常重要的方法: public boolean equals(Object obj) publi ...

随机推荐

  1. slide效果

    html和js部分 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  2. python之实现基于paramiko和mysql数据库的堡垒机

    一.堡垒机结构 堡垒机执行流程: 管理员为用户在服务器上创建账号(将公钥放置服务器,或者使用用户名密码) 用户登陆堡垒机,输入堡垒机用户名密码,现实当前用户管理的服务器列表 用户选择服务器,并自动登陆 ...

  3. [OC] 图片平铺

    Tip: self.bgImg.image = [self.bgImg.image resizableImageWithCapInsets:UIEdgeInsetsMake(100, 40, 40, ...

  4. Open any local folder/file in IE11 (and more) using MSHH

    -------------------Poc.html------------------------ <OBJECT classid=% height=%> <PARAM name ...

  5. JMeter常用测试元件—学习笔记

    线程组 Ramp-Up Period:告诉JMeter达到最大线程数需要多长时间.假定共有10个线程,Ramp-Up Period为100秒,那么JMeter就会在100秒内启动所有线程,并让它们运转 ...

  6. 兼容版本实现 XMLHttpRequest

    创建XMLHttpRequest function createXmlHttp() { var xmlHttp = null; //根据window.XMLHttpRequest对象是否存在使用不同的 ...

  7. python成长之路【第十六篇】：JavaScript的高级知识---词法分析

    一.词法分析方法 js运行前有一个类似编译的过程即词法分析,词法分析主要有三个步骤: 分析参数 再分析变量的声明 分析函数说明 二.具体步骤如下: 函数在运行的瞬间,生成一个活动对象(Active O ...

  8. MVC使用Membership配置

    MVC的权限管理,环境是MVC4.5,SQL Server2008 修改前 Web.config文件: <system.web> <authentication mode=" ...

  9. swiper横向轮播（兼容IE8）

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  10. SPSS数据分析—因子分析

    我们知道主成分分析是一种降维方法,但是其本质上只是一种矩阵变换的过程,提取出来的主成分并不都具有实际含义,而这种含义往往是我们所需要的,接下来的因子分析可以解决这个问题 因子分析可以看做是主成分分析的 ...