bootstrap 響應式導航條（navigation）

<!--bootstrap navigation響應式導航欄--><nav class="navbar navbar-default">    <div class="container-fluid">        <!--Brand and toggle get grouped for better mobile display-->        <!--響應式導航欄必須包含.collapse .navbar-collapse            摺疊起來的導航欄其實是由class .navbar-toggle 以及兩個data-組成            第一個data-用於告訴JavaScript要作什麼，第二個data-用於指定切換到哪個元素,爲了更具體化的顯示摺疊以後的展現頁面            用了三個class屬性爲.icon-bar 的<span>建立了所謂的漢堡按鈕(能夠更改成任意喜歡樣式。-->        <div class="navbar-header">            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"                    data-target="#example-navbar-collapse"                    aria-expanded="false">                <!--只用於屏幕閱讀器，普通瀏覽器不顯示，給沒法看到屏幕顯示的人士（好比盲人）提供方便-->                <span class="sr-only">Toggle Navigation</span>                <!--漢堡按鈕-->                <span class="icon-bar"></span>                <span class="icon-bar"></span>                <span class="icon-bar"></span>                <!--.navbar-brand默認是添加文字的，也能夠添加圖片，必須是小圖片，圖片太大位置就會靠下-->            </button>            <!--.navbar-brand會讓文本更大一號-->            <a class="navbar-brand" href="#">Brand</a>        </div>        <!--Collect the nav links,forms,and other content for toggling-->        <div class="collapse navbar-collapse" id="example-navbar-collapse">            <!--嚮導航欄添加連接，只須要簡單添加帶有.nav .navbar-nav的無序列表便可            注意此處：寫成.nav .navbar僅僅只是展現爲列表，不會在導航條進行展現-->            <ul class="nav navbar-nav">                <li class="active"><a href="#">Link<span class="sr-only">(Current)</span></a></li>                <li><a href="#">Link</a></li>                <li class="dropdown">                    <!--.aria-haspopup表示點擊會出現菜單或是浮動元素 .aria-expanded表示展開狀態-->                    <a type="button" class="dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">                        Dropdown                        <span class="caret"></span>                    </a>                    <ul class="dropdown-menu">                        <li><a href="#">Action</a></li>                        <li><a href="#">Action another</a></li>                        <li><a href="#">Action more</a></li>                        <!--分隔符-->                        <li class="divider" role="separator"></li>                        <li><a href="#">Action</a></li>                        <li class="divider" role="separator"></li>                        <li><a href="#">Action</a></li>                    </ul>                </li>            </ul>            <form class="navbar-form navbar-left">                <div class="form-group">                    <input class="form-control" type="text" placeholder="Search">                </div>                <button class="btn btn-default" type="submit">Submit</button>            </form>            <ul class="nav navbar-nav navbar-right">                <li><a href="#">Link</a></li>                <li class="dropdown">                    <!--.aria-haspopup表示點擊會出現菜單或是浮動元素 .aria-expanded表示展開狀態-->                    <a type="button" class="dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">                        Dropdown                        <span class="caret"></span>                    </a>                    <ul class="dropdown-menu">                        <li><a href="#">Action</a></li>                        <li><a href="#">Action another</a></li>                        <li><a href="#">Action more</a></li>                        <!--分隔符-->                        <li class="divider" role="separator"></li>                        <li><a href="#">Action</a></li>                        <li class="divider" role="separator"></li>                        <li><a href="#">Action</a></li>                    </ul>                </li>            </ul>        </div>    </div></nav>