代码：
<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>
如图：
 --转)
