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元素的基本类/文本框大小

辅助

边框

浮动

显示与隐藏

内外边距

尺寸

点赞