在很长的一段时间里，我都很羡慕一个一些大神的个人网站。这些网站有一个共同特点，同时支持PC端显示和手机端显示。
当使用手机打开时，导航栏会自动折叠为一个按钮，效果棒极了。
后来学会了Bootstrap才知道，偶买噶，Bootstrap提供的导航栏原来天生就带这效果。厉害！
2. 响应式导航栏导航栏的创建还是比较复杂的，但是不要担心，我们来一步步分析创建过程。
第1步，创建一个导航栏navbar。
第2步，添加.container-fluid类的容器，这样可以让导航栏内容按容器规则显示。
第3步，添加导航栏头部navbar-header，并在头部放置品牌栏navbar-brand，品牌蓝内放置网站图标和标题文字。
第4步，添加导航菜单栏，使用nav navbar-nav类设置。
经过上面的步骤，即可创建一个响应式的导航栏，当容器宽度较大时，显示如下：
当容器宽度较小时，则自动变换为：
虽然上面创建的导航栏，已经可以实现在手机等小屏幕设备上完整展示菜单了。
但是菜单占用的地方比较大，会遮住内容部分，此时就可以考虑使用可折叠导航栏了，当容器宽度不足时，菜单栏会折叠为一个按钮，当点击按钮时才弹出完整菜单。
首先，在导航栏的头部添加一个折叠按钮，代码如下。
解释下，class="navbar-toggle collapsed"用来设置折叠样式，data-toggle="collapse"是通过Javascript实现折叠效果，data-target="#collapsed-nav"则指向折叠的容器元素。
然后，我们将菜单部分修为：
解释下，class="collapse navbar-collapse"设置了容器折叠样式，id="collapsed-nav"呼应按钮指向的id。
如此一来，当容器宽度不足时，菜单部分就折叠为一个按钮，点击按钮时弹出折叠的菜单，效果如下：
深色导航栏就比较简单了，直接添加navbar-inverse类即可。
效果如下：
有时候网页内容较多，当我们浏览完内容想要点击导航栏时，需要回到顶部，比较麻烦。
有一种效果是将导航栏固定到顶部，就算网页向下滑动，导航栏一直显示在顶部。
实现也相当简单，添加navbar-fixed-top类即可，代码如下：
效果如下，当页面滑动时，导航栏固定不动。
Bootstrap导航栏非常灵活，可以添加下拉菜单，同时可以添加使用navbar-form类修饰的表单，代码如下：
效果如下：
Bootstrap提供的导航栏可以说功能非常全面，而且稳定，而且优雅。非常好~
