2018.6.24

今天完成的事情:

1.完成任务八的切图

2.学习了bootstrap

2.开始任务八

明天计划的事情:

1.任务七的总结

2.继续任务八

遇到的问题:

收获:

首先学习和了解了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的栅格系统，首选需要准备一个

紧接着需要一个

再挨着的div，就是列了。

通过

col- 列针对所有设备

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

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

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

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

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

比如

<div

<div

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

<div

<div

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

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

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

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