2020-8.19易科

boot使用前提:

1.html5

2.设置视口

注意:boot是依赖于jQuery的

css样式修改

1.如果我们保证这个样式只在页面中使用一次,就可以在原类名中修改

2.添加一个新类名进行样式修改

全局样式

容器

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

container-fluid:变宽容器,宽度永远是父级的100%

按钮

基本类.btn

颜色.btn-*

镂空按钮.btn-outline-*

大小.btn-sm/lg

特殊按钮.btn-link/.btn-block

禁用和激活.btn-active/.btn-disable

图片

.rounded:0.25rem(4px)的圆角

.rounded-circle:50%的圆角

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

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

文字

字体颜色.text-*

字体大小写

字体权重

字号大小:h1~h6/display-1~6

文本对齐方式

文本样式:.font-italic/lead/small/text-nowrap/pre-scrollable

背景

bg-*

列表

ul的class:.list-unstyled去除标志符,左内边距清0/.list-inline水平排序列表项,boot4中不支持,不同版本的boot使用方法不同

li的class:.list-group-item列表组的列表项,给整个列表组添加了4个圆角/.list-group-item-danger/warning/info…列表项背景色/.list-group-item-action链接列表项/.active激活项/.disabled

表格

.table基本类,对table元素和table元素的后代做布局,进行修饰

.table-bordered:设置边框

.table-*:边框背景色

.table-striped:隔行换色

.table-hover:悬停换色

.table-sm:较小的表格

.thead-dark/light:表头颜色

.table-resonsive-xl/lg/md/sm:响应式

表单

堆叠表单:.form-group堆叠表单,默认,控件垂直方向排列

内联表单:.form-inline在

元素上添加 .form-inline类,称为内联表单,水平方向排列,弹性,内联表单中的元素都是左对齐的

表单元素:input元素的基本类/文本框大小

辅助

边框

浮动

显示与隐藏

内外边距

尺寸

标签

评论

this is is footer