20200819卢雨杰

学习内容

bootstrap

:BootStrap是一个用于快速快发Web应用程序和网站的前端框架,BootStrap是基于HTML、CSS、JAVASCRIPT的

https://www.bootcss.com/,中文网址

bootstrap的下载和引入

1597839199101

全局样式

container和container-fluid的区别

container-fluid所占宽度永远是父级的百分之百,container宽度左右内边距各15px,且处于水平居中的状态

按钮Button相关的类

bth

按钮颜色
.btn-danger
红色
.btn-warning
黄色
.btn-success
绿色
.btn-primary
亮蓝
.btn-secondary
浅灰
.btn-info
藏蓝
.btn-dark
黑色,深色
.btn-light
浅色,白色

带边框的按钮
.btn-outline-success
绿色边框按钮
.btn-outline-danger
红色边框按钮
.btn-outline-warning
黄色边框按钮
.btn-outline-primary
亮蓝边框按钮
.btn-outline-secondary
浅灰边框按钮
.btn-outline-info
藏蓝色边框按钮
.btn-outline-dark
黑色,深色边框按钮
.btn-outline-light
浅色,白色边框按钮

按钮的大小 :1:bth-sm,bth-lg;

背景相关的class:

rounded-circle设置百分之五十的圆角,在图片高度宽度相同的情况下,会以图片中心形成一张圆形的图片

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

图片的对齐方式:

.float-left 类设置图片左对齐

.float-right 类来设置图片右对齐

文字相关的class

字体大小写
.text-uppercase
英文字母大写
.text-lowercase
英文字母小写
.text-capitalize
首字母大写

文本样式

​ .font-italic
​ 斜体文本
​ .lead
​ 段落突出
​ .small
​ 指定更小文本 (为父元素的 85% )
​ .text-nowrap
​ 段落中超出屏幕部分不换行
​ .pre-scrollable
​ 使

 元素可滚动,代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条

背景相关的class

.bg-transparent
透明,背景透明

与列表相关的class

ul:.list-unstyled
去除标志符,左内边距清0

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

表单相关的class

边框背景色
.table-primary
蓝色: 指定这是一个重要的操作
.table-success
绿色: 指定这是一个允许执行的操作
.table-danger
红色: 指定这是可以危险的操作
.table-info
浅蓝色: 表示内容已变更
.table-warning
橘色: 表示需要注意的操作
.table-active
灰色: 用于鼠标悬停效果
.table-secondary
灰色: 表示内容不怎么重要
.table-light
浅灰色,可以是表格行的背景
.table-dark
深灰色,可以是表格行的背景

隔行换色
.table-striped
隔行变色

表头颜色
.thead-dark
用于给表头添加黑色背景
.thead-inverse 类用于给表头添加黑色背景,不同boot版本的使用方法不同
.thead-light
用于给表头添加灰色背景
.thead-default 类用于给表头添加灰色背景,不同boot版本的使用方法不同

标签

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1