页面创建基础
//自动适应手机屏幕宽度
网格系统:
1、col- 针对所有设备
2、col-sm- 平板 - 屏幕宽度等于或大于 576px
3、col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)
4、col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)
5、col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)
偏移列
偏移列通过 offset-- 类来设置。第一个星号( * )可以是 sm、md、lg、xl，表示屏幕设备类型，第二个星号( * )可以是 1 到 11 的数字。
：.offset-md-4 是把.col-md-4 往右移了四列格。
排版类
.font-weight-bold
.font-weidth-normal
.font-weight-light
.font-italic
.lead
.small
.text-left
.text-right
.text-justify
.text-center
.text-nowarp
.text-lowercase
.text-uppercase
.text-capitalize
.initialism //使 元素可滚动，代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条
.list-unstyle
.list-inline
.pre-scrollable //使 元素可滚动，代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条
颜色
.text-muted //柔和 灰
.text-primary //重要 蓝
.text-success //成功 绿
.text-warning // 警告 黄
.text-danger // 危险 红
.text-info //提示信息 墨蓝
.text-secondary //副标题 浅灰
.text-dark // 深灰
.text-light // 浅灰（白色背景几乎看不到）
.text-white //白色
表格
Table
必要
.table
组合
.table-striped //条纹
.table-border //表格边框
.table-hover //鼠标悬浮效果
.table-dark //黑色背景
.table-sm //通过减少内边距来设置较小的表格
.table-response //在屏幕宽度小于 992px
.table-responsive-sm < 576px
.table-responsive-md < 768px
.table-responsive-lg < 992px
.table-responsive-xl < 1200px时会创建水平滚动条，
如果可视区域宽度大于 992px 则显示不同效果（没有滚动条）
tr
.table-primary 蓝色: 指定这是一个重要的操作
.table-success 绿色: 指定这是一个允许执行的操作
.table-danger 红色: 指定这是可以危险的操作
.table-info 浅蓝色: 表示内容已变更
.table-warning 橘色: 表示需要注意的操作
.table-active 灰色: 用于鼠标悬停效果
.table-secondary 灰色: 表示内容不怎么重要
.table-light 浅灰色，可以是表格行的背景
.table-dark 深灰色，可以是表格行的背景
thead
.thead-dark //表头添加黑色背景
.thead-default //表头添加灰色背景
图片
.rounded //圆角效果
.rounded-circle //椭圆形图片
.img-thumbnail //设置图片缩略图(图片有边框)
.img-fluid //响应式图片 设置了 max-width: 100%; 、 height: auto
.float-right/float-left //图片对齐方式
按钮
主要用于 button a input标签
按钮边框
默认白色背景，边框文本同色
.border-outline-primary
.border-outline-secondary
.border-outline-success
.border-outline-danger
.border-outline-warning
.border-outline-info
.border-outline-dark
.border-outline-light .txt-dark
按钮大小
.btn-lg
.btn-sm
块级按钮
.btn-block
按钮禁用&激活
.active
.disable
按钮组
类
用于div>>>
必需
.btn-group 或 .btn-group-vertical //水平或垂直
按钮大小（组合）
.btn-group-lg
.btn-group-sm
.bgn-group-xs
列表组
ul标签
.list-group
li标签
.list-gropu-item
.active
.disable
链接列表项
div 替换 ul —— a 替换 li
.list-group-item-action 鼠标悬停灰色背景效果
列表颜色
.list-group-item-success
.list-group-item-secondary
.list-group-item-info
.list-group-item-warning
.list-group-item-danger
.list-group-item-dark
.list-group-item-light
Bootstrap小工具
border类
border边框颜色
Eg:
.border-primary
.border-secondary
.border-success
.border-danger
.border-warning
.border-info
.border-light
.border-dark
.border-white
rounded边框圆角设置
float浮动类
.clearfix用于清除浮动
.float-left/.float-right 向左向右浮动
左浮动
右浮动
响应式浮动
.float--left|right , 为 sm, md, lg 或 xl
在大于小屏幕尺寸上右浮动
在大于中等屏幕尺寸上右浮动
在大于大屏幕尺寸上右浮动
在大于超大屏幕尺寸上右浮动
没有浮动
居中对齐
使用 .mx-auto 类来设置居中对齐:
居中显示
宽度
元素上使用 w-* 类 (.w-25, .w-50, .w-75, .w-100, .mw-100) 来设置宽度:
宽度 25%
宽度 50%
宽度 75%
宽度 100%
最大宽度 100%
高度
元素上使用 h-* 类 (.h-25, .h-50, .h-75, .h-100, .mh-100) 来设置高度:
高度 25%
高度 50%
高度 75%
高度 100%
最大高度 100%