Bootstrap4用法

#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">&times;</button>            <strong>信息!</strong> 请注意这个信息。      </div>

      动画      <div class="alert alert-info alert-dismissable fade show">          <button type="button" class="close" data-dismiss="alert">&times;</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新特性弹性盒子