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>