Bootstrap中响应式导航条

响应式导航条：在PC和平板中默认要显示所有的内容；但在手机中导航条中默认只显示“LOGO/Brand”，以及一个“菜单折叠展开按钮”，只有单击折叠按钮后才显示所有的菜单项。

  基础class： .navbar   

  Bootstrap中导航条的按位置：

1. 顶部导航条
2. 底部导航条

  Bootstrap中导航条的按颜色：

1. 浅色底深色的字           .navbar-default
2. 深色底浅色的字           .navbar-inverse

  Bootstrap中导航条的按定位：

1. 相对定位position: relative         默认值

1. 固定定位position: fixed      .navbar-fixed-top/bottom

  导航条的结构：

<div class="navbar  颜色 定位">  
    <div class="container">
        <!--导航条的头部：商标+按钮-->
        <div class="navbar-header">
            <a class="navbar-brand">
            <button class="navbar-toggle">
        </div>
        <!--导航条折叠菜单：菜单、按钮、搜索框、链接、文本...-->
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
            <form class="navbar-form">
            <button class="navbar-btn">
            <span class="navbar-text">
            <a class="navbar-link  navbar-text">
        </div>
    </div>
</div>