Bootstrap - Navbar (响应式导航栏)

导航栏是一个很好的功能，是 Bootstrap 网站的一个突出特点。导航栏在您的应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。在 Bootstrap 导航栏的核心中，导航栏包括了站点名称和基本的导航定义样式。

响应式的导航栏

上面代码就是一个简单的响应式导航栏。什么是响应式了？在浏览器窗口大小变化的情况下，依然保持美观（按照已经设计好的页面）。

上面是当浏览器窗口比较的大的时候的情况，下面是浏览器窗口比较小的时候，旁别有个button,点击以后就出现那些导航元素。

下面是实现代码

    

        

            

                
                    切换导航栏
                    
                    
                    
                
                DeepusAcademy
            
            

                

                   
WHO ARE YOU
                   
GET INVOLVED
                
            
        
    

.navbar-inverse 表示反色的导航栏，是一个带有黑色背景白色文本的反色的导航栏。

.navbar-fixed-top表示固定到头部，也就是不随浏览器页面滚动

.navbar-toggle来修饰button表示这是一个控制切换状态的button

data-toggle='collapse'  这个十分重要，表示切换状态是以折叠形式展现

data-target=''  这个是说明对象的，你要折叠的是谁。

.sr-only 不可见（可以去掉）  下面那三个span 是表示button上面的三条线的

.navbar-brand 的 元素。这会让文本看起来更大一号。

.collapse 表示一开始是隐藏的，换句话说就是button没有被点击

.collagse in 表示一开始是展开的，就是button被点了一下