今天完成的事情：

       1.使用栅格布局页眉。

       2.导航栏：bootstrap

       3.轮播图：bootstrap

       4.学习特色和人数：栅格布局

       5.如何学习：栅格布局

       6.学员介绍：轮播图

       7.企业介绍：5个div并排

问题：

      导航栏如何垂直居中？

计划：

       继续写

收获：

      .container 类用于固定宽度并支持响应式布局的容器。

       .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。.container-fluid自动设置为外层视窗的100%，如果外层视窗为body，那么它将全屏显示，无论        屏幕大小，并且自动实现响应式布局。

       所谓固定宽度并不是允许开发者自己设置容器的宽度，而是bootstrap内部根据屏幕宽度利用媒体查询，帮我们设置了固定宽度，并且是能够自适应的。所以，无论何种情况        下，请不要手动为响应式布局中的外层布局容器设置固定宽度值。

导航栏写法：

1、保证在窄屏时需要折叠的内容必须包裹在带一个div内，并且为这个div加入collapse、navbar-collapse两个类名。最后为这个div添加一个class类名或者id名。

2、保证在窄屏时要显示的图标样式（固定写法）：

<button class="navbar-toggle" type="button" data-toggle="collapse">
  <span class="sr-only">Toggle Navigation</span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>

3、并为button添加data-target=".类名/#id名"，究竞是类名还是id名呢？由需要折叠的div来决定。如：

需要折叠的div代码段：

<div class="collapse navbar-collapse" id="example">
      <ul class="nav navbar-nav">
      …
      </ul>
</div>

窄屏时显示的图标代码段：

<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#example">
  ...
</button>

也可以这么写，需要折叠的div代码段：

<div class="collapse navbar-collapse example" >
      <ul class="nav navbar-nav">
      …
      </ul>
</div>