今天完成的事：task10-1的页面

明天要做的事：task10-2 争取把task11敲完

遇到的问题：

1首页头部在小屏幕的时候会拥挤

问过超帅的‍‍启宸‍‍师兄后知道在小屏幕上要学会取舍，因为尺寸位置不够不可能像电脑上全部显示，参考张孝坤师兄的办法，加入visible属性就看上去好一些

2<nav>导航栏的使用，尤其是下拉按钮的使用会出现点不开的问题

后来发现自己蒙圈了没有在最底部引入bootstap的js文件

<script src="bootstrap-3.3.5/js/tests/vendor/jquery.min.js"></script>
<script src="bootstrap-3.3.5/dist/js/bootstrap.min.js"></script>

3 删格系统的响应式重置问题（就是删格里面列的高度不一样导致的串行问题）

第一行的左边高度高于右边 导致第二行无法对齐正常显示

去官网看的解释是：

响应式列重置

即便有上面给出的四组栅格class，你也不免会碰到一些问题，例如，在某些阈值时，某些列可能会出现比别的列高的情况。为了克服这一问题，建议联合使用 .clearfix 和 响应式工具类。

  <div class="clearfix visible-xs-block"></div>

但是我不知道怎么使用这行代码（每一个地方都尝试过，没效果啊），最后我是把第一行右边的块通过padding拉高让高度和左边一样 才解决的问题

4底部突然多出了空隙

最后问了萌萌哒的基柯师兄知道这是bootstrap的默认属性  最后通过 p{margin:0;}解决了问题

未解决的问题

1 垂直居中的问题

查了一下肯能和 display:table-cell ‍‍有关 ‍

但是没找到什么好的方法去让 圆圈--文字---箭头 保持垂直居中

还有就是文字 有 两行的 和一行的 然后箭头就只能和左边的文字垂直居中

2bootstrap删格---行的问题

第5和第6块直接移到了右侧（并不知道怎么办）   我最后是把上下分成了两行顺序就对了

收货：

今天对bootstrap的使用认识深刻了一些，bootstrap对响应式十分的友好 ，使排版更加地清晰，组件使用比较方便。但是我自己问题还是好多啊。

我的代码地址：http://119.10.57.69/ptt008/task10/task10.html 

今天看到的讲解bootstrap的网站：http://www.runoob.com/bootstrap