響應式導航欄

效果圖：

CSS

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

HTML

<span class="sr-only">
            1.導航欄類的解析
            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。

            
            .dropdown :下拉菜單組件
            data-toggle :dropdown 觸發下拉事件
            caret:三角形
            dropdown-menu :當下拉菜單組件被觸發時這個類才顯示 
            給下拉菜單添加 min-width:100%;
                  
    </span>
        <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 " style="font-size:15px;">
                        <img src="images/flower.png" alt="">
                          。。。
                    </a>
                </div>

                <!-- 當屏幕小於768時按鈕數據源，collapse 默認display :none -->
                <div class="collapse navbar-collapse" id="navbar-menu">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">Java</a></li>
                        <li><a href="#">c#</a></li>
                        <li><a href="#">sql</a></li>
                  
                        <li class="dropdown">
                            <a href="#"  data-toggle="dropdown" >
                                前端開發 <b class="caret"></b>
                            </a>
                            <ul class="dropdown-menu"   style="min-width:100%;">
                                <li><a href="#">HTML</a></li>
                                <li><a href="#">JS</a></li>
                                <li><a href="#">CSS</a></li>
                                <li class="divider"></li>
                                <li><a href="#">bootstrap</a></li>
                            </ul>
                        </li>
                        
                    </ul>
                </div>

            </div>
        </nav>