今天完成的事情：了解了任务8相关，以及响应式布局相关
明天计划的事情：继续进行任务吧
遇到的问题：了解不定宽布局时不明白什么意义花费较长时间
收获：了解利用bootstrap的响应式布局的方法，非常强大，例如

<div class="container-fluid">

<!--定义一行-->

<div class="row">

<!--xs代表手机小屏幕，md代表平板中屏幕，lg代表PC大屏幕-->

<!--同一对的元素之和必须等于12，否则出现错误，如A的col-xs-2+B的col-xs-10是等于12的-->

<!--bg-warning是定义浅黄色的背景色-->

<div class="col-xs-2 col-md-8 col-lg-4 bg-warning">

A

</div>

<div class="col-xs-10 col-md-4 col-lg-8 bg-primary">

B

</div>

</div>

<div class="row">

<!--这里的道理与上面的一样，A的col-xs-1+B的col-xs-1+C的col-xs-10是等于12的-->

<div class="col-xs-1 col-md-10 col-lg-1 bg-warning">

A

</div>

<div class="col-xs-1 col-md-1 col-lg-10 bg-primary">

B

</div>

<div class="col-xs-10 col-md-1 col-lg-1 bg-success">

C

</div>

</div>

</div>

实际效果图

当屏幕缩小时

关键是col-md和col-lg这两项代码代表了屏幕不同的情况下栅格的不同布局，这是以bootstrap栅格的响应式布局

另外了解了响应式布局媒体查询的方式进行布局的代码，例如

@media screen and (min-width: 1000px)

.parent {

                width: 960px;

                margin: 0 auto;

            }

            .side {

                width: 300px;

                height: 300px;

                background-color: #4eb3b9;

                float: left;

            }

            .main {

                width: 650px;

                height: 300px;

                margin-left: 10px;

                background-color: #ff0097;

                float: left;

            }

这条代码表示在屏幕大于等于1000px才适用

效果图

同理代码

@media screen and (min-width: 400px) and (max-width: 1000px) 

 .parent {

                display: flex;

            }

            .side {

                width: 300px;

            }

            .main {

                flex: 1;

                margin-left: 10px;

            }

表示宽度在400px至1000px之间适用此项布局

效果图

@media screen and (max-width: 400px)

.parent {

                display: flex;

                flex-flow: column wrap;

            }

            .side {

                flex: 1;

                margin-bottom: 10px;

            }

            .main {

                flex: 1;

            }

代码表示400px一下时适用此项布局

效果图

这是以媒体查询的方式进行响应式布局，明天继续任务八