Bootstrap導航欄自適應效果制作

Q：想做出一種導航條，在網頁寬度超過一定限制的時候，會顯示所有的導航條，如圖1所示，當網頁縮小到一定尺寸的時候就會把導航條隱藏，顯示出一個選擇按鈕，如圖二所示。

圖1

圖2

A：實現效果代碼

        <nav class="navbar navbar-default navbar-fixed-top">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collaplsed" data-toggle="collapse" data-target="#navigation" 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>
                    </button>

                    <div class="headerleft">
                        <p>F2E</p>
                        <p>個人簡歷</p>
                    </div>
                </div>

                <div class="collapse navbar-collapse" id="navigation">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#home">首頁</a></li>
                        <li><a href="#about">關於我</a></li>
                        <li><a href="#skills">專業技能</a></li>
                        <li><a href="#experience">我的經歷</a></li>
                        <li><a href="#project">我的作品</a></li>
                        <li><a href="#contact">聯系我</a></li>
                    </ul>
                </div>
            </div>
        </nav>