1,今天完成的事情：把Bootstrap响应式导航自己一个一个敲打下来了，task7的第一个页面在调整pad页面。

2，明天的计划：继续自己没做完的任务10，不说了。写完继续撸。

3，遇到的问题：总是先把自己的样式写完一段在套用bootstrap后，手机页面可以栅格，就是自己看的时候也觉得不满意，居中才好看，最后请请教师兄们，才知道，原来：不用自己设定宽度和高度，高度元素自己用padding撑开，宽度由bootstrap调整。一开始我做的时候是为了更好的约束元素的位置，到最后没有删除，造成的混乱的结果。

4，收获：在用栅格时候，先考虑一下块内容在大屏幕和超大屏幕上是每一个占用多少格子，在小屏幕和超小屏幕是占用多少格子。要考虑周全，都写上，才能到多少分辨率显示你要布置的格子。一下就是一个图片说明：

下面是响应式导航的代码：也有图片随后附上：

<div class="navbar navbar-inverse" role="navigation">

 <div class="container">

  <div class="navbar-header">

   <button type="button" class="navbar-toggle" data-toggle="coolapse" data-target=".navbar-collapse">

     <span class="sr- only">导航条</span>

     <span class="icon-bar"></sapn>

     <span class="icon-bar"></sapn>

     <sapn class="icon-bar"></sapn>

    </button>

    <a class="navbar-brand" href="#">导向条的标题</a>

   </div>

   <div class="collapse navbar-collapse">

     <ul>

       <li class="active"><a gref="#">首页</a></li>

　     <li class="active"><a gref="#">职业</a></li>

       <li class="active"><a gref="#">推荐</a></li>

       <li class="active"><a gref="#">关于</a></li>

     </ul>

    </div>

   </div>

</div>

第一句就是：用了一个Html5新的语义化标题，导航条，之后的navbar-inverse是一个导航背景和字体颜色，黑色背景和白色字体。role="navigation"为了增加浏览器的兼容，更好的实现响应式导航。

第二句就是：<div class="container">一个容器，这个单词的中文。。盒子，装下面的东西用的。

第三句就是：导航条的头部。

第四句核心内容：做了一个按钮，这个按钮做好了之后导航在小于768px的时候就显示出来，反之就隐藏。从而点击之后出现<div class="collapse navbar-collapse">里面的内容。

第五条核心内容：<div class="collapse navbar-collapse">在导航宽度大于等于768px，显示出来，反之就隐藏。

这个前提是你是必须导入成功bootstrap里面的js和jq插件，和css插件。不然没有用的。

图片附上：