bootstrap中的响应式导航栏

如下所示的bootstrap样式，定义了一个导航栏，当浏览器宽度变窄时，列表项自动折叠，在右边边会出现一个button，点击按钮列表项会下拉出现：

    
    

      


        

          
          
          
              Learning Log
        

        

          

            
Topics
          

          

            {% if user.is_authenticated %}
              
Hello, {{ user.username }}.
              
log out
            {% else %}
              
register
              
log in
            {% endif %}
          
        


      
    

满屏时：

满屏

窄屏时：

窄屏

标签是导航栏，中间的样式可以网上查。
.navbar-header样式使头部的文字看起来大一些，而且也是导航栏的头部，当在小屏幕上时是唯一能够显示的导航栏内容之一。

botton按钮定义的就是小屏幕右边的东西。其样式class=“navbar-toggle collapsed”是必不可少的。navbar-toggle样式是控制按钮的，
collapsed是为了响应折叠插件的。
data-toggle=“collapse”表明这个button是一个折叠控件，其折叠的内容指向data-target="#navbar"，即是id为navbar的内容。
aria-expanded=“false”表示初始控件是折叠的。

中的class="navbar-collapse collapse"，nvabar-collapse是导航栏的折叠样式，collapse这是表示初始时是折叠的，没有collapse样式，那么缩放后导航栏元素将是展开的。