今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin） 

开始任务8

首先学习和了解了bootstrap

Bootstrap是当前世界最受欢迎的用于建立响应式、移动设备优先的站点和应用的框架。

- -先进行bootstrap下载和环境配置

https://getbootstrap.com/docs/4.1/getting-started/download/

进行环境配置需要导入三个文件。

 Bootstrap4 核心 CSS 文件 bootstrap.min.css

jQuery文件jquery.js

Bootstrap4 核心 JavaScript 文件bootstrap.min.js

需要先添加jQuery，因为bootstrap依赖于它。

- -首先简单了解了一下bootstrap。。

感觉他就是一个已经写好的css样式。。。。我们只需要设定对应的class进行样式调用。。。

Bootstrap的栅格系统会默认把一行，分成12列。

运用Bootstrap的栅格系统，首选需要准备一个class=container的div

紧接着需要一个class=row的 div，表示行

再挨着的div，就是列了。

通过class="col-xs-占据的列数 "来设定这一列占据了多少列。

col- 列针对所有设备

.col-sm- 平板 - 屏幕宽度等于或大于 576px

.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)

.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)

.col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)

xs-maxsmall，超小；sm-small，小；md-medium，中等；lg-large，大；

比如

<div class="col-xs-6 ">6列</div>

<div class="col-xs-6 ">6列</div>

就是这一行分两列。一列占了百分之50

<div class="col-xs-8 ">8列</div>

<div class="col-xs-6 ">6列</div>

当这一行超过了12列时，会自动换行，这样就是两行、一行8列、一行6列

然后熟悉和学习了text- left top bottom right 几个样式。。

还有栅格布局的简单语句，- -由于bootstrap4是依据flex布局，所以很多flex布局语句在bootstrap4中可以直接使用。。不过还有些不太熟练。

比如align-items-center、但是语句生效必须要有高度.

今天主要看了下轮播图。

这里.carousel-inner决定了轮播图盒子的大小。然后 内部的img大小决定了占据轮播图盒子的大小。所以需要对.carousel-inner进行高度的设置。

.carousel-indicators是轮播图指示标记的盒子。由于任务是原型，而bootstrap默认是长方形，所以需要对其进行重写- -

- -这里有个问题，在页面缩小时可以通过设置不同的col

.col-sm-

.col-md- 

.col-lg- 

.col-xl- 

来对不同分辨率的设备进行列的显示，但是如果将纵向显示的列表最后归到一个按钮，通过按钮进行菜单选择，没找到怎么搞。

明天计划的事情：（一定要写非常细致的内容） 

看看bootstrap的标签- -
遇到的问题：（遇到什么困难，怎么解决的） 

感觉这周玩不成任务了...

收获：（通过今天的学习，学到了什么知识）

了解和初步学习了bootstrap。