<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>

<!--这行代码用来演示高度的变化不会改变导航的位置-->

<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>