#Bootstrap4
## 网格系统- .col- 针对所有设备- .col-sm- 平板 - 屏幕宽度等于或大于 576px- .col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)- .col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)- .col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)
##文字排版- Bootstrap 4 默认的 font-size 为 16px, line-height 为 1.5。- 此外，所有的 <p\> 元素 margin-top: 0 、 margin-bottom: 1rem (16px)。- h1.display-[1-4] 可以显示更大的更粗的字体- small 可以显示更小的字体(通常用于副标题)- mark为黄色背景有且一定边距- abbr标签+title属性：HTML <abbr> 元素的样式为显示在文本底部的一条虚线边框:- blockquote[blockquote\][blockquote-footer\]- dl dt dd - code- kbd标签- pre标签- .font-weight-bold 加粗文本 尝试一下- .font-weight-normal 普通文本 尝试一下- .font-weight-light 更细的文本 尝试一下- .font-italic 斜体文本 尝试一下- .lead 让段落更突出 尝试一下- .small 指定更小文本 (为父元素的 85% ) 尝试一下- .text-left 左对齐 尝试一下- .text-center 居中 尝试一下- .text-right 右对齐 尝试一下- .text-justify 设定文本对齐,段落中超出屏幕部分文字自动换行 尝试一下- .text-nowrap 段落中超出屏幕部分不换行 尝试一下- .text-lowercase 设定文本小写 尝试一下- .text-uppercase 设定文本大写 尝试一下- .text-capitalize 设定单词首字母大写 尝试一下- .initialism 显示在 <abbr> 元素中的文本以小号字体展示，且可以将小写字母转换为大写字母 尝试一下- .list-unstyled 移除默认的列表样式，列表项中左对齐 ( <ul> 和 <ol> 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式) 尝试一下- .list-inline 将所有列表项放置同一行 尝试一下- .pre-scrollable 使 <pre> 元素可滚动，代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条
##颜色 ###字体颜色 - class="text-muted柔和的文本。- class="text-primary重要的文本。- class="text-success执行成功的文本。- class="text-info代表一些提示信息的文本。- class="text-warning警告文本。- class="text-danger危险操作文本。- class="text-secondary副标题。- class="text-dark深灰色文字。- class="text-light浅灰色文本（白色背景上看不清楚）。- class="text-white白色文本（白色背景上看不清楚）。
### 背景颜色- class="bg-primary text-white">重要的背景颜色。- class="bg-success text-white">执行成功背景颜色。- class="bg-info text-white">信息提示背景颜色。- class="bg-warning text-white">警告背景颜色- class="bg-danger text-white">危险背景颜色。- class="bg-secondary text-white">副标题背景颜色。- class="bg-dark text-white">深灰背景颜色。- class="bg-light text-dark">浅灰背景颜色。
## 表格- .table thead tbody tfooter- .table-bordered- .table-hover- .table-striped- .table-dark- .table-danger,waring,info,active,success- .table-sm- .table-responsive-sm/md/lg/xl
## 图片形状- .rounded 类可以让图片显示圆角效果：- .rounded-circle 类可以设置椭圆形图片- .img-thumbnail 类用于设置图片缩略图(图片有边框)- .float-right 类来设置图片右对齐，使用 .float-left 类设置图片左对齐- .img-fluid 类设置了 max-width: 100%; 、 height: auto; :
## 大屏- .jumbotron jumbotron-fluid
## 信息提示框- .alter alert-danger- .alter alert-success- .alter alert-info- .alter alert-warning- .alter alert-primary- .alter alert-dark- .alter alert-secondary### 关闭报警框 ``` <div class="alert alert-info alert-dismissable"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>信息!</strong> 请注意这个信息。 </div>
动画 <div class="alert alert-info alert-dismissable fade show"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>信息!</strong> 请注意这个信息。 </div>
```## 按扭 <button type="button" class="btn btn-primary">主要按钮</button> <button type="button" class="btn btn-secondary">次要按钮</button> <button type="button" class="btn btn-success">成功</button> <button type="button" class="btn btn-info">信息</button> <button type="button" class="btn btn-warning">警告</button> <button type="button" class="btn btn-danger">危险</button> <button type="button" class="btn btn-dark">黑色</button> <button type="button" class="btn btn-light">浅色</button> <button type="button" class="btn btn-link">链接</button>
可以设置边框 <button type="button" class="btn btn-outline-primary">主要按钮</button> <button type="button" class="btn btn-outline-secondary">次要按钮</button> <button type="button" class="btn btn-outline-success">成功</button> <button type="button" class="btn btn-outline-info">信息</button> <button type="button" class="btn btn-outline-warning">警告</button> <button type="button" class="btn btn-outline-danger">危险</button> <button type="button" class="btn btn-outline-dark">黑色</button> <button type="button" class="btn btn-outline-light text-dark">浅色</button> ### 禁用按扭 ### 按扭组 ### 下来菜单
## 徽章 普通徽章 <span class="badge badge-primary">主要</span> <span class="badge badge-secondary">次要</span> <span class="badge badge-success">成功</span> <span class="badge badge-danger">危险</span> <span class="badge badge-warning">警告</span> <span class="badge badge-info">信息</span> <span class="badge badge-light">浅色</span> <span class="badge badge-dark">深色</span>
药丸形状徽章 使用 .badge-pill 类来设置药丸形状徽章:
实例 <span class="badge badge-pill badge-default">默认</span> <span class="badge badge-pill badge-primary">主要</span> <span class="badge badge-pill badge-success">成功</span> <span class="badge badge-pill badge-info">信息</span> <span class="badge badge-pill badge-warning">警告</span> <span class="badge badge-pill badge-danger">危险</span
徽章插入到元素内 以下实例将徽章嵌入到按钮内：
实例 <button type="button" class="btn btn-primary"> Messages <span class="badge badge-light">4</span> </button>## 进度条 （自行查看文档 ，easy）
##卡片- .card .card-header .card-title .card-link .card-footer- .card-img-top .card-img-bottom- .card-img-overlay
## 下拉菜单(easy 跟bs3一样)
## 折叠(easy 可以不用学，直接用jquery来写)
## 导航(跟bs3一样)
## 导航条
## 轮播图
## flex css3新特性弹性盒子