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>