学习内容

bootstrap

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

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

bootstrap的下载和引入

全局样式

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版本的使用方法不同
点赞