今天完成的事情： 

1.搞明白怎么修改bootstrap的默认样式，

为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有 class .collapse、.navbar-collapse 的 <div> 中。折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮。第一个是 data-toggle，用于告诉 JavaScript 需要对按钮做什么，第二个是 data-target，指示要切换到哪一个元素。三个带有 class .icon-bar 的 <span> 创建所谓的汉堡按钮。这些会切换为 .nav-collapse <div> 中的元素。

通过浏览器找到相应的类名在css里面进行修改，如果调整后没有效果就需要调整权重来修改来得到需要的样式。

修改前：

修改后：

2.多媒体查询：

在HTML文件中头部链接不同的适应对应屏幕大小的css文件，用户屏幕页面尺寸改变时，多媒体查询功能会直接根据用户界面尺寸的变化来选择调用其适用的css文件，在写某条需要随着屏幕尺寸改变而变化的样式时，直接在css里应用多媒体查询代码。

1. 最大宽度max-width

“max-width”是媒体特性中最常用的一个特性，其意思是指媒体类型小于或等于指定的宽度时，样式生效。如：

@media screen and (max-width:480px){ .ads {   display:none;  } }

上面表示的是：当屏幕小于或等于480px时,页面中的广告区块（.ads）都将被隐藏。

2.最小宽度min-width

“min-width”与“max-width”相反，指的是媒体类型大于或等于指定宽度时，样式生效。

@media screen and (min-width:900px){ .wrapper{width: 980px;} }

上面表示的是：当屏幕大于或等于900px时，容器“.wrapper”的宽度为980px。

其实基本上就是样式覆盖~，判断设备，然后引用不同的样式文件覆盖。
要注意的是由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要，否则会出现横向滚动条。

明天计划的事情：继续任务8.9的布局
遇到的问题：

1.汉堡导航的使用

解决：找到对应的类名调整，（还比较生疏）

2.多媒体的使用方法（应用还没有很熟练明天加油)

收获：对于dootstrap不在抗拒可以平常心面对了。（没事还得多问问师兄啊)