bootstrap4学习知识点整理（一）

页面创建基础

    <meta name="viewport" content="
    width=device-width,  //宽度=设备宽度
    initial-scale=1.0,  //初始缩放比例=1
    shrink-to-fit="no" > //自动适应手机屏幕宽度

网格系统:

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   //使 <pre> 元素可滚动，代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条
.list-unstyle
.list-inline
.pre-scrollable //使 <pre> 元素可滚动，代码块区域最大高度为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  //图片对齐方式