参考手册
Bootstrap 3 教程
Bootstrap 3 胶囊式菜单
Bootstrap 3 表单

Bootstrap 导航条（导航栏）

导航条

导航条是位于页面顶部的导航标题:

使用 Bootstrap，导航条可以扩展或折叠，具体取决于屏幕大小。使用 <nav class="navbar navbar-default"> 创建标准导航条。

下面的实例演示如何在页面顶部添加导航条:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>Bootstrap 实例</title>
  5.   <meta charset="utf-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">
  7.   <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
  8.   <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  9.   <script src="https://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
  10. </head>
  11. <body>
  13. <nav class="navbar navbar-default">
  14.   <div class="container-fluid">
  15.     <div class="navbar-header">
  16.       <a class="navbar-brand" href="#">我的网站</a>
  17.     </div>
  18.     <ul class="nav navbar-nav">
  19.       <li class="active"><a href="#">首页</a></li>
  20.       <li><a href="#">页面 1</a></li>
  21.       <li><a href="#">页面 2</a></li>
  22.       <li><a href="#">页面 3</a></li>
  23.     </ul>
  24.   </div>
  25. </nav>
  27. <div class="container">
  28.   <h3>基础导航条实例</h3>
  29.   <p>导航条是位于页面顶部的导航标题</p>
  30. </div>
  32. </body>
  33. </html>
运行一下
注意：本页上的所有实例都会显示一个导航条，该导航条在小屏幕上占用了太多空间（但是，在大屏幕上，导航条将位于一行上，因为 Bootstrap 是响应式的）。这个问题（小屏幕）将在本页最后一个实例中解决。

反向导航条

如果您不喜欢默认导航条的样式，Bootstrap 会提供一个可选的黑色导航条：

您仅需要将 .navbar-default 修改为 .navbar-inverse:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>Bootstrap 实例</title>
  5.   <meta charset="utf-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">
  7.   <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
  8.   <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  9.   <script src="https://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
  10. </head>
  11. <body>
  13. <nav class="navbar navbar-inverse">
  14.   <div class="container-fluid">
  15.     <div class="navbar-header">
  16.       <a class="navbar-brand" href="#">我的网站</a>
  17.     </div>
  18.     <ul class="nav navbar-nav">
  19.       <li class="active"><a href="#">首页</a></li>
  20.       <li><a href="#">页面 1</a></li>
  21.       <li><a href="#">页面 2</a></li>
  22.       <li><a href="#">页面 3</a></li>
  23.     </ul>
  24.   </div>
  25. </nav>
  27. <div class="container">
  28.   <h3>反向导航条</h3>
  29.   <p>反向的导航条是黑色而不是灰色。</p>
  30. </div>
  32. </body>
  33. </html>
运行一下

带下拉菜单的导航条

导航条也可以保持下拉菜单。

下面的实例为 "第 1 页" 按钮添加了一个下拉菜单:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>Bootstrap 实例</title>
  5.   <meta charset="utf-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">
  7.   <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
  8.   <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  9.   <script src="https://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
  10. </head>
  11. <body>
  13. <nav class="navbar navbar-inverse">
  14.   <div class="container-fluid">
  15.     <div class="navbar-header">
  16.       <a class="navbar-brand" href="#">我的网站</a>
  17.     </div>
  18.     <ul class="nav navbar-nav">
  19.       <li class="active"><a href="#">首页</a></li>
  20.       <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
  21.         <ul class="dropdown-menu">
  22.           <li><a href="#">页面 1-1</a></li>
  23.           <li><a href="#">页面 1-2</a></li>
  24.           <li><a href="#">页面 1-3</a></li>
  25.         </ul>
  26.       </li>
  27.       <li><a href="#">页面 2</a></li>
  28.       <li><a href="#">页面 3</a></li>
  29.     </ul>
  30.   </div>
  31. </nav>
  33. <div class="container">
  34.   <h3>带下拉菜单的导航条</h3>
  35.   <p>本例为导航栏中的 "第1页" 按钮添加了一个下拉菜单。</p>
  36. </div>
  38. </body>
  39. </html>
运行一下

右对齐的导航条

.navbar-right 类用于右对齐导航条按钮。

在下面的实例中，我们在导航条的右侧插入一个 "注册" 按钮和一个 "登录" 按钮。我们还在两个新按钮中的上添加一个字形图标:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>Bootstrap 实例</title>
  5.   <meta charset="utf-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">
  7.   <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
  8.   <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  9.   <script src="https://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
  10. </head>
  11. <body>
  13. <nav class="navbar navbar-inverse">
  14.   <div class="container-fluid">
  15.     <div class="navbar-header">
  16.       <a class="navbar-brand" href="#">我的网站</a>
  17.     </div>
  18.     <ul class="nav navbar-nav">
  19.       <li class="active"><a href="#">首页</a></li>
  20.       <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">页面 1 <span class="caret"></span></a>
  21.         <ul class="dropdown-menu">
  22.           <li><a href="#">页面 1-1</a></li>
  23.           <li><a href="#">页面 1-2</a></li>
  24.           <li><a href="#">页面 1-3</a></li>
  25.         </ul>
  26.       </li>
  27.       <li><a href="#">页面 2</a></li>
  28.     </ul>
  29.     <ul class="nav navbar-nav navbar-right">
  30.       <li><a href="#"><span class="glyphicon glyphicon-user"></span> 注册</a></li>
  31.       <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 登录</a></li>
  32.     </ul>
  33.   </div>
  34. </nav>
  36. <div class="container">
  37.   <h3>右对齐的导航条</h3>
  38.   <p>.navbar-right 类用于右对齐导航条按钮</p>
  39. </div>
  41. </body>
  42. </html>
运行一下

导航条按钮

要在导航栏中添加按钮，请在 Bootstrap 按钮上添加 .navbar-btn 类:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>Bootstrap 实例</title>
  5.   <meta charset="utf-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">
  7.   <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
  8.   <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  9.   <script src="https://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
  10. </head>
  11. <body>
  13. <nav class="navbar navbar-inverse">
  14.   <div class="container-fluid">
  15.     <div class="navbar-header">
  16.       <a class="navbar-brand" href="#">我的网站</a>
  17.     </div>
  18.     <ul class="nav navbar-nav">
  19.       <li class="active"><a href="#">首页</a></li>
  20.       <li><a href="#">链接</a></li>
  21.       <li><a href="#">链接</a></li>
  22.     </ul>
  23.     <button class="btn btn-danger navbar-btn">按钮</button>
  24.   </div>
  25. </nav>
  27. <div class="container">
  28.   <h2>导航条按钮</h2>
  29. </div>
  31. </body>
  32. </html>
运行一下

导航条表单

要在导航栏中添加表单元素，请将 .navbar-form 单类添加到表单元素并添加 input 元素。请注意，我们对 div 容器添加了一个 .form-group 类。如果您有多个 input 元素，这会添加适当的填充（您将在表单一章了解更多信息）。

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>Bootstrap 实例</title>
  5.   <meta charset="utf-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">
  7.   <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
  8.   <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  9.   <script src="https://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
  10. </head>
  11. <body>
  13. <nav class="navbar navbar-inverse">
  14.   <div class="container-fluid">
  15.     <div class="navbar-header">
  16.       <a class="navbar-brand" href="#">我的网站</a>
  17.     </div>
  18.     <ul class="nav navbar-nav">
  19.       <li class="active"><a href="#">首页</a></li>
  20.       <li><a href="#">页面 1</a></li>
  21.       <li><a href="#">页面 2</a></li>
  22.     </ul>
  23.     <form class="navbar-form navbar-left" action="/action_page.php">
  24.       <div class="form-group">
  25.         <input type="text" class="form-control" placeholder="Search" name="search">
  26.       </div>
  27.       <button type="submit" class="btn btn-default">提交</button>
  28.     </form>
  29.   </div>
  30. </nav>
  32. <div class="container">
  33.   <h3>导航表单</h3>
  34. </div>
  36. </body>
  37. </html>
运行一下

您还可以使用 .input-group 和 .input-group-addon 类在输入字段旁边附加图标或帮助文本。在 Bootstrap input 一章中，您将了解有关这些类的更多信息。

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>Bootstrap 实例</title>
  5.   <meta charset="utf-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">
  7.   <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
  8.   <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  9.   <script src="https://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
  10. </head>
  11. <body>
  13. <nav class="navbar navbar-inverse">
  14.   <div class="container-fluid">
  15.     <div class="navbar-header">
  16.       <a class="navbar-brand" href="#">我的网站</a>
  17.     </div>
  18.     <ul class="nav navbar-nav">
  19.       <li class="active"><a href="#">首页</a></li>
  20.       <li><a href="#">页面 1</a></li>
  21.       <li><a href="#">页面 2</a></li>
  22.     </ul>
  23.     <form class="navbar-form navbar-left" action="/example/html/action_page.ashx">
  24.       <div class="input-group">
  25.         <input type="text" class="form-control" placeholder="Search" name="search">
  26.         <div class="input-group-btn">
  27.           <button class="btn btn-default" type="submit">
  28.             <i class="glyphicon glyphicon-search"></i>
  29.           </button>
  30.         </div>
  31.       </div>
  32.     </form>
  33.   </div>
  34. </nav>
  36. <div class="container">
  37.   <h3>导航条表单</h3>
  38.   <p>.input-group 类是一个容器，通过在其前面或后面添加图标、文本或按钮来增强输入</p>
  39.   <p>.input-group-btn 类在输入字段旁边附加一个按钮。通常用作搜索栏:</p>
  40. </div>
  42. </body>
  43. </html>
运行一下

导航条文本

使用 .navbar-text 类垂直对齐导航栏中非链接的任何元素（确保正确的填充和文本颜色）。

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>Bootstrap 实例</title>
  5.   <meta charset="utf-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">
  7.   <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
  8.   <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  9.   <script src="https://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
  10. </head>
  11. <body>
  13. <nav class="navbar navbar-inverse">
  14.   <ul class="nav navbar-nav">
  15.     <li><a href="#">链接</a></li>
  16.     <li><a href="#">链接</a></li>
  17.   </ul>
  18.   <p class="navbar-text">一些文本</p>
  19. </nav>
  21. <div class="container">
  22.   <h3>导航条文本</h3>
  23.   <p>使用 .navbar-text 类垂直对齐导航栏中非链接的任何元素（确保正确的填充）</p>
  24. </div>
  26. </body>
  27. </html>
运行一下

固定导航条

导航条也可以固定在页面的顶部或底部。

固定导航条在固定位置（顶部或底部）保持可见，与页面滚动无关。

.navbar-fixed-top 类使导航条固定在顶部:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>Bootstrap 实例</title>
  5.   <meta charset="utf-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">
  7.   <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
  8.   <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  9.   <script src="https://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
  10. </head>
  11. <body style="height:1500px">
  13. <nav class="navbar navbar-inverse navbar-fixed-top">
  14.   <div class="container-fluid">
  15.     <div class="navbar-header">
  16.       <a class="navbar-brand" href="#">我的网站</a>
  17.     </div>
  18.     <ul class="nav navbar-nav">
  19.       <li class="active"><a href="#">首页</a></li>
  20.       <li><a href="#">页面 1</a></li>
  21.       <li><a href="#">页面 2</a></li>
  22.       <li><a href="#">页面 3</a></li>
  23.     </ul>
  24.   </div>
  25. </nav>
  27. <div class="container" style="margin-top:50px">
  28.   <h3>Fixed Navbar</h3>
  29.   <div class="row">
  30.     <div class="col-md-4">
  31.       <p>固定导航栏在固定位置（顶部或底部）保持可见，与页面滚动无关。</p>
  32.       <p>固定导航栏在固定位置（顶部或底部）保持可见，与页面滚动无关。</p>
  33.     </div>
  34.     <div class="col-md-4">
  35.       <p>固定导航栏在固定位置（顶部或底部）保持可见，与页面滚动无关。</p>
  36.       <p>固定导航栏在固定位置（顶部或底部）保持可见，与页面滚动无关。</p>
  37.     </div>
  38.     <div class="col-md-4">
  39.       <p>固定导航栏在固定位置（顶部或底部）保持可见，与页面滚动无关。</p>
  40.       <p>固定导航栏在固定位置（顶部或底部）保持可见，与页面滚动无关。</p>
  41.     </div>
  42.   </div>
  43. </div>
  45. <h2>滚动这个页面观察效果</h2>
  47. </body>
  48. </html>
运行一下

同理，.navbar-fixed-bottom 类使导航条保持在底部。

折叠导航条

导航条通常会在小屏幕上占据太多空间。

这时我们应该隐藏导航条，只在需要的时候才展示。

在下面的实例中，导航条被右上角的一个按钮替换。只有单击按钮时，才会显示出来:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>Bootstrap 实例</title>
  5.   <meta charset="utf-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">
  7.   <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
  8.   <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  9.   <script src="https://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
  10. </head>
  11. <body>
  13. <nav class="navbar navbar-inverse">
  14.   <div class="container-fluid">
  15.     <div class="navbar-header">
  16.       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
  17.         <span class="icon-bar"></span>
  18.         <span class="icon-bar"></span>
  19.         <span class="icon-bar"></span>
  20.       </button>
  21.       <a class="navbar-brand" href="#">我的网站</a>
  22.     </div>
  23.     <div class="collapse navbar-collapse" id="myNavbar">
  24.       <ul class="nav navbar-nav">
  25.         <li class="active"><a href="#">首页</a></li>
  26.         <li class="dropdown">
  27.           <a class="dropdown-toggle" data-toggle="dropdown" href="#">页面 1 <span class="caret"></span></a>
  28.           <ul class="dropdown-menu">
  29.             <li><a href="#">页面 1-1</a></li>
  30.             <li><a href="#">页面 1-2</a></li>
  31.             <li><a href="#">页面 1-3</a></li>
  32.           </ul>
  33.         </li>
  34.         <li><a href="#">页面 2</a></li>
  35.         <li><a href="#">页面 3</a></li>
  36.       </ul>
  37.       <ul class="nav navbar-nav navbar-right">
  38.         <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
  39.         <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
  40.       </ul>
  41.     </div>
  42.   </div>
  43. </nav>
  45. <div class="container">
  46.   <h3>折叠导航条</h3>
  47.   <p>在本例中，导航条隐藏在小屏幕上，并由右上角的一个按钮取代（尝试重新调整此窗口的大小）。
  48.   <p>只有单击按钮时，才会显示导航条。</p>
  49. </div>
  51. </body>
  52. </html>
运行一下
Bootstrap 3 胶囊式菜单
Bootstrap 3 表单

分类导航

HTMLHTML5JAVASCRIPTCSSjQueryBootstrap 3 教程SassReactHTMl 颜色教程JSONXMLXPathTypeScriptAppML 教程XLinkXPointerXQueryXFormsXsltXML SchemaXSL-FOWeb ServiceWSDSOAPW3CSVGDHTMLTCP/IPjQuery Mobile 教程XHTML