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在
近期评论