Bootstrap 导航栏
导航栏
导航栏是位于页面顶部的导航标题：
使用 Bootstrap，导航栏可以根据屏幕尺寸扩展或折叠。
标准导航栏是用以下命令创建的<nav class="navbar navbar-default">。
以下示例展示了如何将导航栏添加到页面顶部：
示例
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
...
亲自试一试 »
笔记：本页上的所有示例都将显示一个导航栏，该导航栏在小屏幕上占用太多空间（但是，导航栏在大屏幕上将位于一行上 - 因为 Bootstrap 是响应式的）。这个问题（对于小屏幕）将在本页的最后一个示例中得到解决。
倒置导航栏
如果您不喜欢默认导航栏的样式，Bootstrap 提供了替代的黑色导航栏：
只需更改.navbar-default类进入.navbar-inverse:
示例
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
亲自试一试 »
带下拉菜单的导航栏
导航栏还可以包含下拉菜单。
以下示例为 "Page 1" 按钮添加一个下拉菜单：
示例
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
亲自试一试 »
右对齐导航栏
这个.navbar-right类用于右对齐导航栏按钮。
在以下示例中，我们在导航栏右侧插入一个 "Sign Up" 按钮和一个 "Login" 按钮。我们还在两个新按钮上添加了一个字形图标：
示例
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</nav>
亲自试一试 »
导航栏按钮
要在导航栏中添加按钮，请添加.navbar-btnBootstrap 按钮上的类：
示例
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<button class="btn btn-danger navbar-btn">Button</button>
</div>
</nav>
亲自试一试 »
导航栏表格
要在导航栏中添加表单元素，请添加.navbar-form类到表单元素并添加输入。请注意，我们添加了一个.form-groupclass 到保存输入的 div 容器。如果您有多个输入，这会添加适当的填充（您将在“表单”一章中了解更多相关信息）。
示例
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>
<form class="navbar-form navbar-left" action="/action_page.html">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</nav>
亲自试一试 »
您还可以使用.input-group和.input-group-addon用于在输入字段旁边附加图标或帮助文本的类。您将在“Bootstrap输入”一章中了解有关这些类的更多信息。
示例
<form class="navbar-form navbar-left" action="/action_page.html">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
亲自试一试 »
导航栏文本
使用.navbar-text类垂直对齐导航栏中非链接的任何元素（确保正确的填充和文本颜色）。
示例
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<p class="navbar-text">Some text</p>
</nav>
亲自试一试 »
固定导航栏
导航栏也可以固定在页面的顶部或底部。
固定导航栏在固定位置（顶部或底部）保持可见，与页面滚动无关。
这个.navbar-fixed-topclass 使导航栏固定在顶部：
示例
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
亲自试一试 »
这个.navbar-fixed-bottom类使导航栏停留在底部：
示例
<nav class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
亲自试一试 »
折叠导航栏
在小屏幕上，导航栏通常会占用太多空间。
我们应该隐藏导航栏；并且仅在需要时才显示。
在以下示例中，导航栏被右上角的按钮替换。只有点击按钮时，才会显示导航栏：
示例
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</nav>
亲自试一试 »