20200819 岳浩天

知识：bootstrap

使用前提：

1.html5

2.设置视口

注意：boot是依赖于jquery的

css样式修改：

1.如果我们能够保障这个样式在页面中只使用一次，那么就可以直接修改原类名 .btn .btn-success...

2.我们添加一个新的类名进行修改

使用bootstrap

容器

.container：定宽容器，左右内边距15px，水平居中，每种不同的分辨率下，有不同的最大宽度(max-width)

.container-fluid：变宽容器，宽度永远是父级的100%

注意：使用boot，元素必须写在.container、.container-fluid

按钮

btn 按钮基本类

按钮颜色

.btn-danger红色

.btn-warning黄色

.btn-success绿色

.btn-primary亮蓝

.btn-secondary浅灰

.btn-info藏蓝

.btn-dark黑色，深色

.btn-light浅色，白色

带边框的按钮

.btn-outline-success绿色边框按钮

.btn-outline-danger红色边框按钮

*btn-outline-颜色 颜色和按钮颜色相同

按钮大小

.btn-sm小按钮

.btn-lg大按钮

特殊按钮

.btn-block块级按钮

.btn-link链接按钮

激活和禁用按钮

.active 类可以设置按钮是可用的

disabled 属性可以设置按钮是不可点击的

图片相关的class

.rounded0.25rem(4px)的圆角

.rounded-circle50%的圆角

img-thumbnail缩略图，有白色内边距和灰色边框的图片

img-fluid响应式图片，图片可以等比缩放，但是最大不能超过自己原始大小

图片对齐方式.float-left 类设置图片左对齐.float-right 类来设置图片右对齐

字体颜色和按钮颜色相同

字体

.text-uppercase英文字母大写

.text-lowercase英文字母小写

.text-capitalize首字母大写

.font-weight-bold字体加粗

.font-weight-light字体变细

.font-weight-normal字体正常

.h1~.h6不同字号大小

文本的对齐方式

.text-right、.text-center、.text-left

.text-justify文本两端对齐

列表相关的class

ul的class

.list-unstyled去除标志符，左内边距清0

.list-group列表组(弹性，主轴为y轴)

.list-inline水平排序列表项，boot4中不支持，不同版本的boot使用方法不同

li的class

.list-group-item列表组的列表项，给整个列表组添加了4个圆角

.list-group-item-danger/warning/info...列表项背景色

.list-group-item-action链接列表项.active激活项

边框.border

单边设置.border-left

清除4个方向的边框.border-0

清除单个方向的边框.border-left-0

边框圆角

.rounded0.25rem的圆角

.rounded-0清除圆角

.rounded-top设置上圆角为0.25rem

.rounded-circle50%的圆角

显示与隐藏

.d-block

.visible显示

边距

.m设置四条边的外边距

.m-auto设置元素水平居中对齐

.mt上侧外边距

.mx左右外边距

.my上下外边距

p内边距

尺寸

宽度.w-25/50/75/100 width：25%/50%/75%/100%

.mw-100最大宽度

心得

今天所学的东西boot是原来完全没有接触的新知识，但是有css的底子还是比较好理解，就是写huawei官网的作业，调布局的时候心态有点炸裂。