今天完成：

今天本来想一次搞定task8的第一个页面，然后一直在纠结bootstrap的nav导航栏，真是着急上火，相同了，慢慢熟悉吧，不可能一次搞定所有。

1、关于雪碧图的小图标的问题，之前光想着定位，最后在别的浏览器上看了以后发现，关于这种雪碧图图片的大小，位置，以及定位，都要使用px这种定宽才行，还是对font-size这种属性与单位之间的关系不太了解，这个还是要多想；

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

<nav class="navbar navbar-default" role="navigation">

<div class="container-fluid"> 

<div class="navbar-header">

<button type="button" class="navbar-toggle" data-toggle="collapse"

data-target="#example-navbar-collapse">

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

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

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

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

</button>

</div>

<div class="collapse navbar-collapse" id="example-navbar-collapse">

<ul class="nav navbar-nav">

<li class="active"><a href="#">iOS</a></li>

<li><a href="#">SVN</a></li>

</ul>

</li>

</ul>

</div>

</div>

</nav>

实际上这个倒是不难，主要是通过类来改变式样，就是bootstrap的类太多了，很多应该会对日常的布局很有帮助，这个我找了一圈也没什么办法，大佬都说多做做就熟悉了；

最后贴一个媒体查询的模板吧，这是响应式布局的灵魂，我就是卡在这儿了，熟悉了这个就很容易了：

3、bootstrap用一些模块就很方便，比如轮播图：

这里只要简单的改一下图片的位置就能完成了。

<div id="myCarousel" class="carousel slide">
    <!-- 轮播（Carousel）指标 -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        <li data-target="#myCarousel" data-slide-to="3"></li>
        <li data-target="#myCarousel" data-slide-to="4"></li>
    </ol>
    <!-- 轮播（Carousel）项目 -->
    <div class="carousel-inner">
        <div class="item active">
            <img src="images/headimg1.png" alt="First slide">
        </div>
        <div class="item">
            <img src="images/headimg2.png" alt="Second slide">
        </div>
        <div class="item">
            <img src="images/headimg3.png" alt="Third slide">
        </div>
        <div class="item">
            <img src="images/headimg4.jpg" alt="Third slide">
        </div>
        <div class="item">
            <img src="images/headimg5.jpeg" alt="Third slide">
        </div>
    </div>
    <!-- 轮播（Carousel）导航 -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

明天完成：

不说什么明天不明天了，我今天晚上必须把这个搞完了，用bootstrap的栅格系统，已经了解过师兄的做法了，做起来应该很快。