Bootstrap 响应式导航栏

效果图：

CSS

.navbar-collapse .navbar-nav li a:hover,
.navbar-collapse .navbar-nav li a:focus{
color:#000;
background:#fff;
}

HTML

        <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
            <div class="container">
                <!-- 导航栏头部 -->
                <div class="navbar-header">           
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a href="#" class="navbar-brand">标题</a>
                </div>

                <!-- 当屏幕小于768时按钮数据源 .collapse 默认display :none -->
                <div class="collapse navbar-collapse" id="navbar-menu">
                    <ul class="nav navbar-nav navbar-right">
                        <li ><a href="#">Home</a></li>
                        <li ><a href="#">About</a></li>
                        <li><a href="#">Portfolio</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>

            </div>
        </nav>

导航栏解析

    <span class="sr-only">         
            sr-only:在这个类的代码块不显示在页面上
            navbar-default：改变导航栏背景色，默认为白色
            navbar-fixed-top：表示导航栏会跟着页面滚动，不会在页面往下移后就不见了，相同的还有navbar-fixed-bottom
            navbar-header ：当屏幕宽度小于768时float:left;

            navbar-toggle:当屏幕宽度小于768时按钮显示，
            button 里的：date-toggle:以什么事件绑定  collapse为折叠事件
            data-target:事件绑定源的数据在什么位置 用id绑定
            navbar-right：这个的作用是将导航栏上的组件定位到最右边，同样的还有navbar-left。
    </span>