水平导航条浮动布局（响应式导航条PC和移动端同时布局）
水平导航条浮动布局（响应式导航条PC和移动端同时布局）2、在导航标题内添加一个按钮，用于触发菜单项的显示和隐藏，该段代码基本固定，其中涉及了data-toggle等属性用于触发按钮的相关事件。（依赖Bootstrap.js库）3、为导航条标题中的<button>添加data-target=""，这个属性的值为class选择器或者id选择器（jQuery中的选择器，Bootstrap依赖于jQuery）。根据以上几个步骤我们就可以很快地制作出一个这样比较炫的响应式导航条，<span class="icon-bar"></span>包含在<button>内，这就是导航条中的右侧图标按钮。
导航条都是在宽屏的情况下展示的（屏幕宽度>768px），随着移动互联网的发展，在移动设备上出现了很多小屏幕设备，如果还是以之前的那种方式来制作页面的话，那么在小屏幕上将乱成一团。然而出现了响应式相关的内容，下面要讲的内容是响应式，只是案例略复杂些，我们先来看看效果图，如图所示。
屏幕大于768px下显示的导航条，其中包含了一个导航条标题（包含了一个brand）是在小于768px屏幕下显示的效果图，此时导航条只剩下了导航标题，而菜单项消失了，并且在导航条的最右侧多出了一个按钮。我们单击该按钮后出现如图所示的效果，导航菜单在下方堆叠显示出来，这个效果相对复杂一些，实现代码如下：
此效果在手机应用中非常常见，制作此效果需要以下几个步骤：
1、保证在窄屏时需要折叠的内容必须包裹在一个<div>内，并且为这个div加入collapse、navbar-collapse两个类名。最后为这个<div>添加一个class类名或者id名。本案例中新增了class="navbar-responsive-collapse"（随便定义的）样式。
2、在导航标题内添加一个按钮，用于触发菜单项的显示和隐藏，该段代码基本固定，其中涉及了data-toggle等属性用于触发按钮的相关事件。（依赖Bootstrap.js库）
3、为导航条标题中的<button>添加data-target=""，这个属性的值为class选择器或者id选择器（jQuery中的选择器，Bootstrap依赖于jQuery）。
根据以上几个步骤我们就可以很快地制作出一个这样比较炫的响应式导航条，<span class="icon-bar"></span>包含在<button>内，这就是导航条中的右侧图标按钮。
