呆错后台管理框架常用CSS样式表（不定期更新）

基于呆错后台管理框架开发的应用常用CSS，适用于Bootstrap4，代码如下，不定期更新。

参考文档

• 点击查看[bootstrap4.6]官方文档

响应式布局

@media (max-width:1200px) {
}

@media (min-width:576px) {
}

Bootstrap 4 网格系统有以下 5 个类:

.col- 针对所有设备
.col-sm- 平板 - 屏幕宽度等于或大于 576px
.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)
.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)
.col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)
.col-auto
.col

常用容器

.container
.container-fluid
.jumbotron
.jumbotron-fluid
.navbar
.navbar-dark
.navbar-light
.offset-4 
.offset-md-4

宽、高、填充、边框、圆角

.w-25
.h-25
.w-25, .w-50, .w-75, .w-100, .mw-100
.ml-auto
.mr-auto
.mt-auto
.mb-auto
.mx-auto 
.mx-sm|md|lg|xl-auto
.my-2
.my-sm-0
.mb-5
.pt-5
.custom-select
.border-0
.rounded-0
.rounded-circle
.rounded-pill

阴影

.shadow
.shadow-sm
.shadow-lg
.shadow-none
.box-shadow

位置定位

.pull-left
.pull-right
.float-none
.float-left
.float-sm|md|lg|xl-left
.float-right
.float-sm|md|lg|xl-right
.position-static
.position-relative
.position-absolute
.position-fixed
.position-sticky
.fixed-top
.fixed-bottom
.sticky-top

按钮

.btn-outline-primary
.btn-outline-secondary
.btn-outline-success
.btn-outline-danger
.btn-outline-warning
.btn-outline-info
.btn-outline-light
.btn-outline-dark
.btn-link
.disabled
.active

隐藏显示

.d-none
.d-inline
.d-inline-block
.d-sm|md|lg|xl-block
.d-sm|md|lg|xl-table
.d-sm|md|lg|xl-table-cell
.d-sm|md|lg|xl-table-row
.d-sm|md|lg|xl-flex
.d-sm|md|lg|xl-inline-flex
.overflow-auto
.overflow-hidden

字体、字号

.font-weight-bold    加粗文本    
.font-weight-normal    普通文本    
.font-weight-light    更细的文本    
.font-italic    斜体文本

.text-break  英文单词换行处理
.text-wrap    自动换行
.text-nowrap    段落中超出屏幕部分不换行
.text-truncate    不换行自动省略
.text-justify   设定文本对齐,段落中超出屏幕部分文字自动换行
.text-lowercase    设定文本小写
.text-uppercase    设定文本大写
.text-capitalize 设定单词首字母大写
.text-decoration-none 去除下划线

.text-left
.text-center
.text-right
.text-sm-left
.text-md-left
.text-lg-left
.text-xl-left

.text-muted 柔和的文本
.text-primary 重要的文本
.text-success 执行成功的文本
.text-info 代表一些提示信息的文本
.text-warning 警告文本
.text-danger 危险操作文本
.text-secondary 副标题
.text-dark 深灰色文字
.text-light 浅灰色文本（白色背景上看不清楚）
.text-white 白色文本（白色背景上看不清楚）

段落

.lead    让段落更突出    
.small    指定更小文本 (为父元素的 85% )        
.initialism 显示在 <abbr> 元素中的文本以小号字体展示，且可以将小写字母转换为大写字母    
.list-unstyled    移除默认的列表样式，列表项中左对齐 ( <ul> 和 <ol> 中)。     
.list-inline    将所有列表项放置同一行    
.pre-scrollable 使 <pre> 元素可滚动，代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条

分页

.pagination
.pagination-lg

垂直示例

<a class="position-absolute d-flex justify-content-center align-items-center" href="#">垂直浮动居中</a>

字体图标

<i class="fa fa-chevron-down"></i>
<i class="fa fa-chevron-up"></i>
<i class="fa fa-chevron-right"></i>
<i class="fa fa-chevron-left"></i>

无序列表

<ul class="list-unstyled list-inline">
<li class="list-inline-item">新闻</li>
<li class="list-inline-item">新闻</li>
</ul>
<ul class="list-unstyled">
  <li class="list-item">常规</li>
  <li class="list-item">路径</li>
  <li class="list-item">缓存</li>
</ul>

对话框

.modal-sm
.modal-lg
.modal-xl
.modal-dialog-centered
.modal-dialog-scrollable

FLEX布局

.d-flex
.d-inline-flex
.d-sm-flex
.d-sm-inline-flex
.d-md-flex
.d-md-inline-flex
.d-lg-flex
.d-lg-inline-flex
.d-xl-flex
.d-xl-inline-flex

FLEX响应式布局

.flex-fill
.flex-sm-fill
.flex-md-fill
.flex-lg-fill
.flex-xl-fill

垂直与反方向也存在响应变化

.flex-row
.flex-row-reverse
.flex-column
.flex-column-reverse
.flex-sm-row
.flex-sm-row-reverse
.flex-sm-column
.flex-sm-column-reverse
.flex-md-row
.flex-md-row-reverse
.flex-md-column
.flex-md-column-reverse
.flex-lg-row
.flex-lg-row-reverse
.flex-lg-column
.flex-lg-column-reverse
.flex-xl-row
.flex-xl-row-reverse
.flex-xl-column
.flex-xl-column-reverse

内容也存在响应变化

.justify-content-start
.justify-content-end
.justify-content-center
.justify-content-between
.justify-content-around
.justify-content-sm-start
.justify-content-sm-end
.justify-content-sm-center
.justify-content-sm-between
.justify-content-sm-around
.justify-content-md-start
.justify-content-md-end
.justify-content-md-center
.justify-content-md-between
.justify-content-md-around
.justify-content-lg-start
.justify-content-lg-end
.justify-content-lg-center
.justify-content-lg-between
.justify-content-lg-around
.justify-content-xl-start
.justify-content-xl-end
.justify-content-xl-center
.justify-content-xl-between
.justify-content-xl-around

对于对齐项目也存在响应变化

.align-items-start
.align-items-end
.align-items-center
.align-items-baseline
.align-items-stretch
.align-items-sm-start
.align-items-sm-end
.align-items-sm-center
.align-items-sm-baseline
.align-items-sm-stretch
.align-items-md-start
.align-items-md-end
.align-items-md-center
.align-items-md-baseline
.align-items-md-stretch
.align-items-lg-start
.align-items-lg-end
.align-items-lg-center
.align-items-lg-baseline
.align-items-lg-stretch
.align-items-xl-start
.align-items-xl-end
.align-items-xl-center
.align-items-xl-baseline
.align-items-xl-stretch

自水平垂直基准也存在响应变化。

.align-self-start
.align-self-end
.align-self-center
.align-self-baseline
.align-self-stretch
.align-self-sm-start
.align-self-sm-end
.align-self-sm-center
.align-self-sm-baseline
.align-self-sm-stretch
.align-self-md-start
.align-self-md-end
.align-self-md-center
.align-self-md-baseline
.align-self-md-stretch
.align-self-lg-start
.align-self-lg-end
.align-self-lg-center
.align-self-lg-baseline
.align-self-lg-stretch
.align-self-xl-start
.align-self-xl-end
.align-self-xl-center
.align-self-xl-baseline
.align-self-xl-stretch

FLEX自增长和收缩的使用

.flex-{grow|shrink}-0
.flex-{grow|shrink}-1
.flex-sm-{grow|shrink}-0
.flex-sm-{grow|shrink}-1
.flex-md-{grow|shrink}-0
.flex-md-{grow|shrink}-1
.flex-lg-{grow|shrink}-0
.flex-lg-{grow|shrink}-1
.flex-xl-{grow|shrink}-0
.flex-xl-{grow|shrink}-1

d-flex flex-nowrap 子元素不换行
d-flex flex-wrap 子元素自动换行
d-flex flex-wrap-reverse 子元素自动换行相反

d-flex flex-row 子元素水平左对齐
d-flex flex-row-reverse 子元素水平右对齐
d-flex flex-column 子元素垂直从上至下
d-flex flex-column-reverse 子元素垂直相反
d-flex flex-column align-items-end 垂址底部对齐 水平居右
d-flex flex-column align-items-start 垂址底部对齐 水平居左

d-flex justify-content-start 子元素水平居左对齐
d-flex justify-content-end 子元素水平居右对齐
d-flex justify-content-center 子元素水平居中对齐
d-flex justify-content-between 子元素水平两端对齐
d-flex justify-content-around 子元素水平铺满
d-flex justify-content-center justify-content-md-end

d-flex align-items-start 子元素整个内容垂直顶部（即同一行后需要用这个align-items）
d-flex align-items-end 子元素垂直底部对齐
d-flex align-items-cenetr 子元素垂直剧中
d-flex align-items-baseline 子元素素垂直顶部
d-flex align-items-stretch 子元素垂直平均分配高度

d-flex align-content-start flex-wrap （即自动换行后需要用这个align-content）
d-flex align-content-end flex-wrap
d-flex align-content-between flex-wrap
d-flex align-content-around flex-wrap
d-flex align-content-stretch flex-wrap

.d-flex
.d-flex .align-self-start
.d-flex .align-self-end
.d-flex .align-self-center
.d-flex .align-self-baseline
.d-flex .align-self-stretch

.d-flex .flex-fill
.d-flex .flex-sm-fill
.d-flex .flex-md-fill
.d-flex .flex-lg-fill
.d-flex .flex-xl-fill

.d-flex .mr-auto
.d-flex .ml-auto
.d-flex .flex-grow-1 左侧网格1
.d-flex .flex-shrink-1 右侧网络1

.d-flex .order-3
.d-flex .order-2
.d-flex .order-1