20200820 岳浩天

知识：bootstrap

栅格布局

web网页布局方式

table布局

div+css布局

boot中的栅格

工作原理

.container/.container-fluid ----> .row ----> .column

每行12列，通过不同的列来划分元素的占地宽度，内容放置在column中，只有列可以做row的直接子元素

不同屏幕上的兼容性问题

min-width:576px/min-width:768px/min-width:992px/min-width:1200px

栅格的使用

父级要写：.row：当前元素使用栅格布局，当前行被分为相等的12份，主轴为x轴的弹性布局，起点在左侧，可换行，左右为15px外边距

子元素要写：.col-n：设置了子元素的最大宽度，一个col在row中占几份col-n，左右15内边距，n为1~12

响应式栅格布局

列偏移

弹性布局

弹性容器.d-flex/.d-inline-flex

主轴的方向

.flex-row/.flex-row-reverse/.flex-column/.flex-column-reverse

主轴排列方式

.justify-content-start/center/end/between/around

交叉轴排列

.align-items-start/center/end/baseline

主轴换行

.flex-nowrap

.flex-wrap

.flex-wrap-reverse

内容垂直对齐

.align-content-start (默认)

.align-content-end

.align-content-center

.align-content-between

.align-content-around

.align-content-stretch

组件

按钮组

下拉菜单

导航

水平导航

• HTML
• CSS
• JavaScript

选项卡导航

• HTML
• CSS
• JavaScript

胶囊导航

• HTML
• CSS
• JavaScript

面包屑导航

水平导航栏

学会手写响应式！！！！！！

心得

今天所学的东西boot是原来完全没有接触的新知识，总结一下感觉就是学会使用boot就可以，要熟悉boot中的一些类名，遵从一些boot必要的规则

还有，今天就是被微调折磨的一整天

学会手写响应式！！！！！！