bootstrap 布局容器 导航栏

布局容器：为页面内容和栅格系统包裹一个.container容器
         .container类 用于固定宽度并支持响应式布局的容器
         .container-fluid类 用于设置100%宽度，占据全部视口的容器
          两种容器类不能相互嵌套
导航栏：基础导航栏   添加一个<nav>/<div>标签，使用.navbar类和.navbar-default类，并且添加role="navigation"(增加访问性)
             <nav class="navbar navbar-default" role="navigation">
                <div class="navbar-header">
                    <a class="navbar-brand" href="" id="">网站首页(可添加图片)</a>
                </div>
                <ul class="navbar navbar-nav">
                    <li class="active"><a href="">***</a></li>
                      .......
                </ul>
             </nav> 
        实现响应式  当浏览器小到一定程度时，菜单将被折叠。把小屏幕显示时需要折叠的内容包裹在一个<div>标签内并使用.collapse和.navbar-collapse类，并且添加id 
                    添加在小屏幕时，要显示的汉堡按钮


             <nav class="navbar navbar-default" role="navigation">
                <button type="button" class="navbar-toggle collapse" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false"(元素展开状态)>
                     <span class="sr-only">汉堡按钮</span>
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                </button>
                <div class="navbar-header">
                    <a class="navbar-brand" href="" id=" ">网站首页(可添加图片)</a>
                </div>
                <div class="collapse navbar-collapse" id="navbar-collapse">
                  <ul class="navbar navbar-nav">
                    <li class="active"><a href="">***</a></li>
                      .......
                  </ul>
                </div>
             </nav>