使用bootstrap插件写响应式导航条

BS拥有大量样式实例，可以通过参看给出的样式代码改写自己的网页。

从自己写的情况来看，共有以下几点问题需要注意：

1，导航条整体需要写到 .container 容器中，可使整个导航条自适应屏幕变化；

2，导航条一般分为：brand, collapse, 等几部分，以控制导航条的LOGO和折叠。这个框架已经写好，仅需稍改下即可；

3，关于 li 元素放在 a 元素之内还是之外？因为我做的这个 demo，需要给默认栏加背景，而 BS 样式又大量给出 li>a 的颜色样         式。不好修改颜色，所以最终选择将 li 放在 a 标签中。

4，虽然 BS 已经定义啦大量样式，但是实际使用中还需要我们自己再次定义具体样式，所以熟知导航条中每个 class 下的定义内容       是非常有用的。

各class属性控制的样式如下：

1， .container

.container {
  padding-right: 15px;
  padding-left: 15px;    
  margin-right: auto;
  margin-left: auto;    /*设置 margin：0,auto;  以保持居中对其，为什么将二者分开写？*/
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }

}

.container:before,

.container:after,{
display: table;
    content: " ";
}
.navbar:after, {
clear: both;
}

2， .navbar

.navbar {
    display: none;
}
.navbar {
  position: relative;
  min-height: 50px;
  margin-bottom: 20px;
  border: 1px solid transparent;
}
@media (min-width: 768px) {
  .navbar {
    border-radius: 4px;
  }
}
.navbar:before,
.navbar:after, {
display: table;
    content: " ";
}
.navbar:after,{
clear: both;     /*结合上面，清除浮动*/

}

3， .navbar-default

.navbar-default {
  background-color: #f8f8f8;  /*全部都是设置子元素背景，字体颜色*/
  border-color: #e7e7e7;

}

其他样式，接下来编辑。