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

面包屑导航

水平导航栏

学会手写响应式!!!!!!

心得

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

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

学会手写响应式!!!!!!

标签

评论

this is is footer