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="#">网站名称</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">页面 1</a></li>
<li><a href="#">页面 2</a></li>
<li><a href="#">页面 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="#">网站名称</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">页面 1</a></li>
<li><a href="#">页面 2</a></li>
<li><a href="#">页面 3</a></li>
</ul>
</div>
</nav>
自己动手试一试 »
带下拉菜单的导航栏
导航栏也可以包含下拉菜单。
下面的示例为“页面 1”按钮添加了一个下拉菜单
示例
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">网站名称</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">页面 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">页面 1-1</a></li>
<li><a href="#">页面 1-2</a></li>
<li><a href="#">页面 1-3</a></li>
</ul>
</li>
<li><a href="#">页面 2</a></li>
<li><a href="#">页面 3</a></li>
</ul>
</div>
</nav>
自己动手试一试 »
右对齐导航栏
.navbar-right 类用于右对齐导航栏按钮。
在下面的示例中，我们在导航栏的右侧插入了一个“注册”按钮和一个“登录”按钮。我们还在两个新按钮上添加了 glyphicon
示例
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">网站名称</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">页面 1</a></li>
<li><a href="#">页面 2</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> 注册</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 登录</a></li>
</ul>
</div>
</nav>
自己动手试一试 »
导航栏按钮
要在导航栏中添加按钮，请在 Bootstrap 按钮上添加 .navbar-btn 类
示例
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">网站名称</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">链接</a></li>
<li><a href="#">链接</a></li>
</ul>
<button class="btn btn-danger navbar-btn">按钮</button>
</div>
</nav>
自己动手试一试 »
导航栏表单
要在导航栏中添加表单元素，请将 .navbar-form 类添加到表单元素并添加输入项。请注意，我们已将 .form-group 类添加到包含输入项的 div 容器中。如果您有多个输入项，这将添加适当的间距（您将在表单章节中了解更多关于此信息）。
示例
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">网站名称</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">页面 1</a></li>
<li><a href="#">页面 2</a></li>
</ul>
<form class="navbar-form navbar-left" action="/action_page.php">
<div class="form-group">
<input type="text" class="form-control" placeholder="搜索">
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
</div>
</nav>
自己动手试一试 »
您还可以使用 .input-group 和 .input-group-addon 类来在输入字段旁边附加图标或帮助文本。您将在 Bootstrap 输入章节中了解更多关于这些类的信息。
示例
<form class="navbar-form navbar-left" action="/action_page.php">
<div class="input-group">
<input type="text" class="form-control" placeholder="搜索">
<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="#">链接</a></li>
<li><a href="#">链接</a></li>
</ul>
<p class="navbar-text">一些文本</p>
</nav>
自己动手试一试 »
固定导航栏
导航栏也可以固定在页面顶部或底部。
固定的导航栏在固定位置（顶部或底部）可见，与页面滚动无关。
.navbar-fixed-top 类使导航栏固定在顶部
示例
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">网站名称</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">页面 1</a></li>
<li><a href="#">页面 2</a></li>
<li><a href="#">页面 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="#">网站名称</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">页面 1</a></li>
<li><a href="#">页面 2</a></li>
<li><a href="#">页面 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="#">网站名称</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">页面 1</a></li>
<li><a href="#">页面 2</a></li>
<li><a href="#">页面 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> 注册</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 登录</a></li>
</ul>
</div>
</div>
</nav>
自己动手试一试 »
