Bootstrap页面布局16 - BS导航菜单和其响应式布局以及导航中的下拉菜单

代码：

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

如图：