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新特性弹性盒子

转载于:https://www.cnblogs.com/leigepython/p/9230478.html