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>

如图：