代码：
<div class='container-fluid'>
<h2 class='page-header'>导航</h2>
<!--
.navrbar navbar-fixed-top:导航固定显示在顶部，对应的navbar-fixed-bottom:导航固定显示在页面底部
.brand:提示文字或者主题
.active:激活选中
.navbar-search:导航搜索
搜索表单：
<form class='navbar-search'>
<input type='text' placeholder='输入搜索内容' class='search-query' />
</form>
.nav pull-right:在导航右边
.nav pull-right：显示一个分割线
-->
<div class='navbar navbar-fixed-top'>
<div class='navbar-inner'>
<div class='container'>
<a class='brand' href='#'>Bootstrap</a>
<ul class='nav'>
<li class='active'><a href='javascript:;'>首页</a></li>
<li><a href='javascript:;'>新闻</a></li>
<li><a href='javascript:;'>军事</a></li>
<li><a href='javascript:;'>体育</a></li>
</ul>
<form class='navbar-search'>
<input type='text' placeholder='输入搜索内容' class='search-query' />
</form>
<ul class='nav pull-right'>
<li><a href='javascript:;'>登录</a></li>
<li class='divider-vertical'></li>
<li><a href='javascript:;'>注册</a></li>
</ul>
</div>
</div>
</div>
</div> <!--这行代码用来演示高度的变化不会改变导航的位置-->
<div style='height:1800px'></div>
<!--这行代码用来演示高度的变化不会改变导航的位置-->
说明:
.navrbar navbar-fixed-top:导航固定显示在顶部，对应的navbar-fixed-bottom:导航固定显示在页面底部
.brand:提示文字或者主题
.active:激活选中
.navbar-search:导航搜索
搜索表单：
<form class='navbar-search'>
<input type='text' placeholder='输入搜索内容' class='search-query' />
</form>
.nav pull-right:在导航右边
.nav pull-right：显示一个分割线
如图：
-----------------------------------------------------------------------------------------------------------------------------------------------------
导航菜单的响应式设计
代码如下
<div class='navbar navbar-fixed-top'>
<div class='navbar-inner'>
<div class='container'>
<!--
①给这个导航菜单添加一个按钮，当浏览器窗口小于某个值时(940px)按钮自动代替.nav-collapse类包围的元素显示出来
②按钮中要添加2个属性 1、data-toggle='collapse' data-target='.nav-collapse'(指向这个类名)
③三组 <span class='icon-bar'></span> 组成一个三道杠的按钮
-->
<a href='javascript:;' class='btn btn-navbar' data-toggle='collapse' data-target='.nav-collapse'>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
</a>
<a class='brand' href='#'>Bootstrap</a>
<!--
.nav-collapse:表示当浏览器窗口小于某个值时（940px），被这个类包围的元素会隐藏起来
-->
<div class='nav-collapse'>
<ul class='nav'>
<li class='active'><a href='javascript:;'>首页</a></li>
<li><a href='javascript:;'>新闻</a></li>
<li><a href='javascript:;'>军事</a></li>
<li><a href='javascript:;'>体育</a></li>
</ul>
<form class='navbar-search'>
<input type='text' placeholder='输入搜索内容' class='search-query input-medium' />
</form>
<ul class='nav pull-right'>
<li><a href='javascript:;'>登录</a></li>
<li class='divider-vertical'></li>
<li><a href='javascript:;'>注册</a></li>
</ul>
</div>
</div>
</div>
</div>
如图：
完成了响应式的布局
-----------------------------------------------------------------------------------------------------------------------------------------------------
导航菜单中的下拉列表
我们给上面制作的导航条中的“体育”栏目增加下拉列表
代码：
<div class='container-fluid'>
<h2 class='page-header'>导航</h2> <div class='navbar navbar-fixed-top'>
<div class='navbar-inner'>
<div class='container'>
<a href='javascript:;' class='btn btn-navbar' data-toggle='collapse' data-target='.nav-collapse'>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
</a>
<a class='brand' href='#'>Bootstrap</a>
<div class='nav-collapse'>
<ul class='nav'>
<li class='active'><a href='javascript:;'>首页</a></li>
<li><a href='javascript:;'>新闻</a></li>
<li><a href='javascript:;'>军事</a></li>
<li class='dropdown'><a class='dropdown-toggle' data-toggle='dropdown' href='javascript:;'>体育 <span class='caret'></span></a>
<ul class='dropdown-menu'>
<li><a href='#'>足球赛事</a></li>
<li><a href='#'>NBA</a></li>
<li><a href='#'>网球公开赛</a></li>
</ul>
</li>
</ul>
<form class='navbar-search'>
<input type='text' placeholder='输入搜索内容' class='search-query input-medium' />
</form>
<ul class='nav pull-right'>
<li><a href='javascript:;'>登录</a></li>
<li class='divider-vertical'></li>
<li><a href='javascript:;'>注册</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
如图：
