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官网的作业,调布局的时候心态有点炸裂。

标签

评论