CSS常用类名汇总（参考elemen/iview等UI组件）

// 外边距
.m-0 { margin: 0;}
.m-1 { margin: 4px;}
.m-auto { margin: auto; }
.mx-0 {
  margin-right: 0;
  margin-left: 0;
}
.mx-auto {
  margin-right: auto;
  margin-left: auto;
}
.my-0 {
  margin-top: 0;
  margin-bottom: 0;
}
.my-auto {
  margin-top: auto;
  margin-bottom: auto;
}
.mt-0 { margin-top: 0; }
.mt-auto { margin-top: auto; }
.me-0 {margin-right: 0;}
.me-auto { margin-right: auto;}
.mb-0 { margin-bottom: 0; }
.mb-auto { margin-bottom: auto; }
.ms-0 { margin-left: 0; }
.ms-auto { margin-left: auto; }
// 内间距
.p-0 { padding: 0; }
.p-1 { padding: 0.25rem; }
.px-0 {
  padding-right: 0;
  padding-left: 0;
}
.py-0 {
  padding-top: 0;
  padding-bottom: 0;
}
.pt-0 { padding-top: 0; }
.pe-0 { padding-right: 0; }
.pb-0 { padding-bottom: 0; }
.ps-0 { padding-left: 0; }
// 位移
.translate-middle { transform: translate(-50%, -50%); }
.translate-middle-x { transform: translateX(-50%); }
.translate-middle-y { transform: translateY(-50%); }

// 活跃的
.active {}
div[active] {}

// 表情
.emoji {}
// 图片：img+语言化
.img-add {}
.img-delete {}

// 块引用
.blockquote {
  > :last-child {}
}
// 块引用: 页脚
.blockquote-footer {
  ::before {}
}
// 图形
.figure {
  // 图片
  .figure-img {}
  // 图片说明
  .figure-caption {}
}
// 说明文字
.caption {}
// 不可用
div[disabled] {}
.disabled {}
// 输出
.output {}
// 框架
.iframe {}
.summary {}
// 隐藏
.hidden {}
// 选中
.selected {}
div[selected] {}

// 标题
.title {}
// 导语
.lead {}
// 容器
.container {}
.container-fluid {}
// 加载中
.loading {}


// 图标: icon + 语义化名称
.icon-clear { }
.icon-edit { }
// 如果外面是个圆，可以加个circle,如icon-add-circle，
// 如果是实心的，可以加个fill或者solid,如icon-add-circle-fill或者icon-add-circle-solid
// 如果是空心的，可以加个outline, 如 icon-add-circle-outline
// fill和outline只写一个，比如空心写icon-add-circle-outline,那么实心就写 icon-add-circle；
// 优先级：outline > fill = solid
// 图标字体:font-awesome简称fa
.fa { }
// 图片
.image {
  .image-img {}
  .image-mask {
    .image-mask-info {}
  }
}
// 左右浮动
.pull-left{float:left;}
.pull-right{float:right;}
.float-start { float: left;}
.float-end { float: right;}
.float-none {float: none;}
.top-0 {top: 0;}
.top-50 { top: 50%;}
.top-100 {top: 100%;}
.bottom-0 { bottom: 0;}
.bottom-50 {bottom: 50%;}
.bottom-100 {bottom: 100%;}
.start-0 {left: 0;}
.start-50 {left: 50%;}
.start-100 {left: 100%;}
.end-0 {right: 0;}
.end-50 {right: 50%;}
.end-100 {right: 100%;}
// 地址
.address {}

// 邮件
.email {}
.strong {}
.mark {}
.small {}
.sub,sup
// 文本对齐
.text-left {text-align:left;}
.text-right {text-align:right;}
.text-center {text-align:center;}
// 文本大小写
.text-lowercase {text-transform: lowercase;}
.text-uppercase {text-transform: uppercase;}
.text-capitalize {text-transform: capitalize;}

// 文本修饰
.text-decoration-none {text-decoration: none ;}
.text-decoration-underline {text-decoration: underline;}
.text-decoration-line-through {text-decoration: line-through;}

// 文本颜色
.text-primary {}
.text-secondary {}
.text-success {}
.text-info {}
.text-warning {}
.text-danger {}
.text-light {}
.text-dark {}
.text-black {}
.text-white {}
.text-body {}
.text-muted {}

// 文本截断
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 字重
.fw-lighter {font-weight: 100;}
.fw-light { font-weight: 300;}
.fw-normal {font-weight: 400;}
.fw-bold {font-weight: 700;}

// 字体样式
.fst-italic {font-style: italic;}
.fst-normal {font-style: normal;}

// 字体大小
.fs-lg {}
.fs-base {}
.fs-sm {}
.fs-xs {}

// 背景颜色
.bg-primary {}
.bg-secondary {}
.bg-success {}
.bg-info {}
.bg-warning {}
.bg-danger {}
.bg-light {}
.bg-dark {}
.bg-black {}
.bg-white {}
// 比例
.ratio {
  ::before {
    display: block;
    padding-top: var(--bs-aspect-ratio);
    content: "";
  }
}
.ratio-1x1 { --bs-aspect-ratio: 100%; }
.ratio-4x3 { --bs-aspect-ratio: 75%; }
.ratio-16x9 { --bs-aspect-ratio: 56.25%; }
.ratio-21x9 { --bs-aspect-ratio: 42.8571428571%; }
// 打印
.print {}

// 表单相关
.form-text {}
.form-check {}
.form-check .form-check-input {}
.form-check-input {}
.form-check-input[type=checkbox] {}
.form-check-input[type=radio] {}
.form-check-input:active {}
.form-check-input:focus {}
.form-check-input:checked {}
.form-check-input:checked[type=checkbox] {}
.form-check-input:checked[type=radio] {}
.form-check-input[type=checkbox]:indeterminate {}
.form-check-input:disabled {}
.form-check-input[disabled] ~ .form-check-label, .form-check-input:disabled ~ .form-check-label {}
.form-switch {}
.form-switch .form-check-input {}
.form-switch .form-check-input:focus {}
.form-switch .form-check-input:checked {}
.form-check-inline {}
.btn-check {}
.btn-check[disabled] + .btn, .btn-check:disabled + .btn {}
.form-range {}
.form-range:focus {}
.form-range:focus::-webkit-slider-thumb {}
.form-range:focus::-moz-range-thumb {}
.form-range::-moz-focus-outer {}
.form-range::-webkit-slider-thumb {}
.form-range::-webkit-slider-thumb:active {}
.form-range::-webkit-slider-runnable-track {}
.form-range::-moz-range-thumb {}
.form-range::-moz-range-thumb:active {}
.form-range::-moz-range-track {}
.form-range:disabled {}
.form-range:disabled::-webkit-slider-thumb {}
.form-range:disabled::-moz-range-thumb {}
.form-floating {}
.form-floating > .form-control,
.form-floating > .form-select {}
.form-floating > label {}
.form-floating > .form-control {}
.form-floating > .form-control::placeholder {}
.form-label {}
// 下拉列表
.form-select {}
.form-select:focus {}
.form-select:disabled {}

// 滑块
.form-range {}
.form-slider {}

// 输入框
.form-control {}
.form-control[type=file] { overflow: hidden;}
.form-control:focus {}
.form-control::placeholder {}
.form-control:disabled {}
.form-control[readonly] {}
.form-control-plaintext {} // 纯文本
.form-control-color {} // 颜色
.input-group {
  .input-group-text {}
  .form-control {}
}
textarea {}
fieldset {
  legend { }
}
// 文件上传按钮
.file-upload-button {}
.file-selector-button {}
.valid-feedback { display: none; }
.valid-tooltip { position: absolute; }
.was-validated :valid ~ .valid-feedback,
.was-validated :valid ~ .valid-tooltip,
.is-valid ~ .valid-feedback,
.is-valid ~ .valid-tooltip {}
.was-validated .form-control:valid, .form-control.is-valid {}
.was-validated .form-control:valid:focus, .form-control.is-valid:focus {}
.was-validated textarea.form-control:valid, textarea.form-control.is-valid {}
.was-validated .form-select:valid, .form-select.is-valid {}
.was-validated .form-select:valid:not([multiple]):not([size]), .was-validated .form-select:valid:not([multiple])[size="1"], .form-select.is-valid:not([multiple]):not([size]), .form-select.is-valid:not([multiple])[size="1"] {}
.was-validated .form-select:valid:focus, .form-select.is-valid:focus {}
.was-validated .form-check-input:valid, .form-check-input.is-valid {}
.was-validated .form-check-input:valid:checked, .form-check-input.is-valid:checked {}
.was-validated .form-check-input:valid:focus, .form-check-input.is-valid:focus {}
.was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label {}
.form-check-inline .form-check-input ~ .valid-feedback {}
.was-validated .input-group .form-control:valid, .input-group .form-control.is-valid,
.was-validated .input-group .form-select:valid,
.input-group .form-select.is-valid {}
.was-validated .input-group .form-control:valid:focus, .input-group .form-control.is-valid:focus,
.was-validated .input-group .form-select:valid:focus,
.input-group .form-select.is-valid:focus {}
.invalid-feedback {}
.invalid-tooltip {}
.was-validated :invalid ~ .invalid-feedback,
.was-validated :invalid ~ .invalid-tooltip,
.is-invalid ~ .invalid-feedback,
.is-invalid ~ .invalid-tooltip {}

.was-validated .form-control:invalid, .form-control.is-invalid {}
.was-validated .form-control:invalid:focus, .form-control.is-invalid:focus {}

.was-validated textarea.form-control:invalid, textarea.form-control.is-invalid {}
.was-validated .form-select:invalid, .form-select.is-invalid {}
.was-validated .form-select:invalid:not([multiple]):not([size]), .was-validated .form-select:invalid:not([multiple])[size="1"], .form-select.is-invalid:not([multiple]):not([size]), .form-select.is-invalid:not([multiple])[size="1"] {}
.was-validated .form-select:invalid:focus, .form-select.is-invalid:focus {}
.was-validated .form-check-input:invalid, .form-check-input.is-invalid {}
.was-validated .form-check-input:invalid:checked, .form-check-input.is-invalid:checked {}
.was-validated .form-check-input:invalid:focus, .form-check-input.is-invalid:focus {}
.was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label {}
.form-check-inline .form-check-input ~ .invalid-feedback {}

.was-validated .input-group .form-control:invalid, .input-group .form-control.is-invalid,
.was-validated .input-group .form-select:invalid,
.input-group .form-select.is-invalid {}
.was-validated .input-group .form-control:invalid:focus, .input-group .form-control.is-invalid:focus,
.was-validated .input-group .form-select:invalid:focus,
.input-group .form-select.is-invalid:focus {}
// 显示
.d-inline { display: inline;}
.d-inline-block { display: inline-block;}
.d-block { display: block;}
.d-grid { display: grid;}
.d-table { display: table;}
.d-table-row { display: table-row;}
.d-table-cell { display: table-cell;}
.d-flex { display: flex;}
.d-none { display: none;}

// 阴影
.shadow { box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);}
.shadow-none { box-shadow: none;}

// 定位
.position-static { position: static; }
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.position-fixed { position: fixed; }
.position-sticky {position: sticky;}
.fixed-top {}
.fixed-bottom {}
.sticky-top {}
// 水平：
.hstack {}
// 垂直：
.vstack {}

// 溢出
.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-visible { overflow: visible; }
.overflow-scroll { overflow: scroll; }

// 不透明度
.opacity-0 { opacity: 0;}
.opacity-100 { opacity: 1;}
.text-opacity-25 {opacity: 0.25;}
.text-opacity-50 {opacity: 0.5;}
.text-opacity-75 {opacity: 0.75;}
.text-opacity-100 {opacity: 1;}

// 纯文本
.plaintext {}

// 视觉显示
.visually-hidden {visibility: hidden;}
.visible { visibility: visible;}
.invisible { visibility: hidden;}
[hidden] { display: none !important;}

// 圆角
.rounded { border-radius: 0.25rem;}
.rounded-0 { border-radius: 0;}
.rounded-circle { border-radius: 50%;}
.rounded-pill { border-radius: 50rem;}

// 边框
.border-1 { border-width: 1px; }
.border-2 { border-width: 2px; }
.border-3 { border-width: 3px; }
.border-4 { border-width: 4px; }
.border-5 { border-width: 5px; }
.border-primary { border-color: #0d6efd; }
.border-secondary { border-color: #6c757d;}
.border-success { border-color: #198754; }
.border-info { border-color: #0dcaf0; }
.border-warning { border-color: #ffc107; }
.border-danger { border-color: #dc3545; }
.border-light { border-color: #f8f9fa; }
.border-dark { border-color: #212529; }
.border-white { border-color: #fff;}
.border { border: 1px solid #dee2e6; }
.border-0 { border: 0; }
.border-top { border-top: 1px solid #dee2e6;}
.border-top-0 { border-top: 0; }
.border-end { border-right: 1px solid #dee2e6; }
.border-end-0 { border-right: 0; }
.border-bottom { border-bottom: 1px solid #dee2e6; }
.border-bottom-0 { border-bottom: 0; }
.border-start { border-left: 1px solid #dee2e6; }
.border-start-0 { border-left: 0;}
// 是否对鼠标事件做出反应
.pe-none { pointer-events: none;}
.pe-auto { pointer-events: auto;}
// 链接颜色
.link-primary {color: #333;}
.link-primary:hover, .link-primary:focus {color: #333;}
.link-secondary {color: #333;}
.link-success {color: #333;}
.link-info {color: #333;}
.link-warning {color: #333;}
.link-danger {color: #333;}
.link-light {color: #333;}
.link-dark {color: #333; }

// 换行
.text-wrap { white-space: normal; }
.text-nowrap { white-space: nowrap;}
.text-break {
  word-wrap: break-word;
  word-break: break-word;
}
// 垂直对齐
.align-baseline { vertical-align: baseline; }
.align-top { vertical-align: top; }
.align-middle { vertical-align: middle; }
.align-bottom { vertical-align: bottom; }
.align-text-bottom { vertical-align: text-bottom; }
.align-text-top { vertical-align: text-top; }

// 表格
.table {}
.caption-top { caption-side: top; }
.table-sm {}
.table-bordered {}
.table-borderless {}
.table-striped {}
.table-active {}
.table-hover {}
.table-primary {}
.table-secondary {}
.table-success {}
.table-info {}
.table-warning {}
.table-danger {}
.table-light {}
.table-dark {}
.table-responsive {}

// 宽度
.w-25 { width: 25%; }
.w-50 { width: 50%; }
.w-75 { width: 75%; }
.w-100 { width: 100%; }
.w-auto { width: auto;}
.mw-100 {max-width: 100%; }
.vw-100 { width: 100vw; }
.min-vw-100 { min-width: 100vw; }
// 高度
.h-25 { height: 25%; }
.h-50 { height: 50%; }
.h-75 { height: 75%; }
.h-100 { height: 100%; }
.h-auto { height: auto; }
.mh-100 { max-height: 100%; }
.vh-100 { height: 100vh; }
.min-vh-100 { min-height: 100vh; }
// 行间距
.lh-1 { line-height: 1; }
.lh-sm { line-height: 1.25; }
.lh-base { line-height: 1.5; }
.lh-lg { line-height: 2; }
// 盒子flex
// 方向
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-column-reverse { flex-direction: column-reverse; }
// 主轴对齐方式
.justify-content-start {justify-content: flex-start; }
.justify-content-end { justify-content: flex-end; }
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.justify-content-around { justify-content: space-around; }
.justify-content-evenly { justify-content: space-evenly ; }
// 侧轴对齐方式
.align-items-start { align-items: flex-start ; }
.align-items-end { align-items: flex-end ; }
.align-items-center { align-items: center ; }
.align-items-baseline { align-items: baseline ; }
.align-items-stretch { align-items: stretch ; }

.align-content-start { align-content: flex-start; }
.align-content-end { align-content: flex-end ; }
.align-content-center { align-content: center ; }
.align-content-between { align-content: space-between ; }
.align-content-around { align-content: space-around ; }
.align-content-stretch { align-content: stretch ; }
.align-self-auto { align-self: auto ; }
.align-self-start { align-self: flex-start ; }
.align-self-end { align-self: flex-end ; }
.align-self-center { align-self: center ; }
.align-self-baseline { align-self: baseline; }
.align-self-stretch { align-self: stretch ; }

.flex-fill { flex: 1 1 auto;}
.flex-grow-0 { flex-grow: 0; }
.flex-grow-1 { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-shrink-1 { flex-shrink: 1; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-wrap-reverse { flex-wrap: wrap-reverse; }
// 盒子内容顺序
.order-first { order: -1;}
.order-0 { order: 0;}
.order-1 { order: 1;}
.order-last {  order: 6;}

// 占位符
.placeholder {}
.placeholder.btn::before {}
.placeholder-glow .placeholder {}
.placeholder-wave {}

// 间隔
.gap-0 { gap: 0; }
.gap-1 { gap: 0.25rem; }
// 图片：响应式
.img-fluid {}
// 图片：略图
.img-thumbnail {}
// user-select 属性规定是否能选取元素的文本。
.user-select-all { user-select: all; }
.user-select-auto { user-select: auto; }
.user-select-none { user-select: none; }
/**
以下是组件
**/
// 卡片:内容容器
.card {}
.card > hr {}
.card > .list-group {}
.card > .list-group:first-child {}
.card > .list-group:last-child {}
.card > .card-header + .list-group,
.card > .list-group + .card-footer {}
.card-body {}
.card-title {}
.card-subtitle {}
.card-text:last-child {}
.card-link + .card-link {}
.card-header {}
.card-header:first-child {}
.card-footer {}
.card-footer:last-child {}
.card-header-tabs {}
.card-header-pills {}
.card-img-overlay {}
.card-img,
.card-img-top,
.card-img-bottom {}
.card-img,
.card-img-top {}
.card-img,
.card-img-bottom {}
.card-group > .card {}

.card {
  .card-header {}
  .card-extra {}
  .card-body {}
  .card-footer {}
}
.card-bordered {}
// 面板 panel
.panel {
  .panel-heading {
    .panel-title {}
  }
  .panel-body {}
  .panel-footer {}
}
.panel-default {}
.panel-primary {}
.panel-success {}
.panel-info {}
.panel-warning {}
.panel-danger {}

// ---------列表组 list-group ------------
.list-group {}
.list-group-numbered {}
.list-group-numbered > li::before {}
.list-group-item-action {}
.list-group-item-action:hover, .list-group-item-action:focus {}
.list-group-item-action:active {}
.list-group-item {}
.list-group-item:first-child {}
.list-group-item:last-child {}
.list-group-item.disabled, .list-group-item:disabled {}
.list-group-item.active {}
.list-group-item + .list-group-item {}
.list-group-item + .list-group-item.active {}
.list-group-horizontal {}
.list-group-horizontal > .list-group-item:first-child {}
.list-group-horizontal > .list-group-item:last-child {}
.list-group-horizontal > .list-group-item.active {}
.list-group-horizontal > .list-group-item + .list-group-item {}
.list-group-horizontal > .list-group-item + .list-group-item.active {}
.list-group-flush {}
.list-group-flush > .list-group-item {}
.list-group-flush > .list-group-item:last-child {}
.list-group-item-primary {}
.list-group-item-secondary {}
.list-group-item-success {}
.list-group-item-info {}
.list-group-item-warning {}
.list-group-item-danger {}
.list-group-item-light {}
.list-group-item-dark {}
// ---------列表组 list-group ------------

// 警告框: 静态地呈现一些警告信息，可手动关闭
.alert {}
.alert-heading {}
.alert-link {}
.alert-dismissible {}
.alert-dismissible .btn-close {}
.alert-primary {}
.alert-primary .alert-link {}
.alert-secondary {}
.alert-secondary .alert-link {}
.alert-success {}
.alert-success .alert-link {}
.alert-info {}
.alert-info .alert-link {}
.alert-warning {}
.alert-warning .alert-link {}
.alert-danger {}
.alert-danger .alert-link {}
.alert-light {}
.alert-light .alert-link {}
.alert-dark {}
.alert-dark .alert-link {}

// 徽章 badge
.badge {}
.badge:empty {}
.btn .badge {}
// 进度条
.progress {
  .progress-bar { background-color: #0d6efd; }
}
.progress-bar-striped {}
.progress-bar-animated {}
.progress-bar-stripes {}
// 手风琴
.accordion {
  .accordion-item {
    .accordion-header {}
    .accordion-body {}

  }
}
.accordion-button {}
.accordion-button:not(.collapsed) {}
.accordion-button:not(.collapsed)::after {}
.accordion-button::after {}
.accordion-button:hover {}
.accordion-button:focus {}
.accordion-item:first-of-type {}
.accordion-item:first-of-type .accordion-button {}
.accordion-item:not(:first-of-type) {}
.accordion-item:last-of-type {}
.accordion-item:last-of-type .accordion-button.collapsed {}
.accordion-item:last-of-type .accordion-collapse {}
// 手风琴：移除了border和圆角
.accordion-flush {
  .accordion-item {
    :first-child {}
    :last-child {}
    .accordion-button {}
  }
}
// 手风琴：打开
.accordion-collapse {}


// 分页
.pagination {}
.page-link {}
.page-link:hover {}
.page-link:focus {}
.page-item:not(:first-child) .page-link {}
.page-item.active .page-link {}
.page-item.disabled .page-link {}
.page-link {}
.page-item:first-child .page-link {}
.page-item:last-child .page-link {}



// 视频容器
.video {
  .video-content-container {
    .video-cell {}
  }
  // 视频控件类
  .video-control-container {
    .video-control-logo {
  
    }
  }
}
// 分隔线
.divider-horizontal {}
// 竖分隔线
.divider-vertical {}
// 分隔线：带文本
.divider-with-text {
  ::before {}
  ::after {}
  .divider-inner-text {}
}
// ---------btn 按钮 start -----------
.btn {}
.btn:hover {}
// 按钮颜色
.btn-warning,
.btn-error,
.btn-success,
.btn-primary,
.btn-secondary,
.btn-info, 
.btn-danger,
.btn-dark,
.btn-default,
.btn-link,
.btn-primary:hover,
.btn-link:disabled {}
// 按钮空心
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-info,
.btn-outline-warning,
.btn-outline-danger,
.btn-outline-light,
.btn-outline-dark,
.btn-outline-success:disabled,
.btn-outline-primary:hover {}
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}
button:not(:disabled),
[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled) {
  cursor: pointer;
}
// 关闭按钮
.btn-close {
  :hover {}
  :focus {}
  :disabled {}
}
.btn-close.disabled {}


.btn-close-white {}
// btn-group 按钮组
.btn-group,
.btn-group-vertical {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}
.btn-toolbar {}
.btn-toolbar .input-group {}
.dropdown-toggle-split {}
.dropstart {}
.btn-group-vertical {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.btn-group-vertical > .btn,
.btn-group-vertical > .btn-group {}
// ---------btn 按钮 end-----------

// ------  列表 start--------
// 列表 list 组
.list-group {
  .list-group-item {}
}
.list {
  // 表头
  .list-header {}
  // 表容器
  .list-container {
    // 多个条款
    .list-items {
      // 条款
      .list-item {
        // 条款主要内容
        .list-item-main {}
        // 条款额外内容
        .list-item-extra {}
      }
    }
  }
  // 列表尾部
  .list-footer {}
}
// ------  列表 end--------
// 圆形
.rounded-circle {
  border-radius: 50%;
}
// 环形
.chart-circle {
  .chart-circle-inner {}
}
// 相对定位
.position-relative {
  position: relative;
}
// 标记
.markdown {}
// API容器
.api-container {}
// 贡献者列表
.contributors-list {}
// 空值
.empty {
  .empty-image {}
  .empty-description {}
}
// 评论
.comment {
  .comment-inner {
    .comment-avatar {}
    .comment-content {
      .comment-content-author {
        .comment-content-author-name {}
        .comment-content-author-time {}
      }
      .comment-content-detail {}
      .comment-actions {}
    }
  }
}


// 加载中
.spin {
  .spin-loading {}
  .spin-text {}
  .spin-dot {}
}
.spinner-border {}
.spinner-border-sm {}
.spinner-grow {}
.spinner-grow-sm {}

// 返回顶部
.back-top {}
.back-top-show {}
// 图钉
.affix {
	left: 20px;
	top: 20px;
}
// 时间轴
.timeline {
  .timeline-item {
    .ivu-timeline-item-head {}
    .timeline-item-content {}
    .timeline-item-tail {}
  }
}
// 弹框全局提示
.message {
  .message-content {
    .message-icon {}
    .message-text {}
  }
}

// 弹框 toast: 和ce-message相似
.toast {}
.toast.showing { opacity: 0;}
.toast:not(.show) { display: none;}
.toast-container {}
.toast-container > :not(:last-child) {}
.toast-header {}
.toast-header .btn-close {}
.toast-body {}
// 警告提示
.alert {
  .alert-icon {}
  .alert-content {
    .alert-message {}
    .alert-description {}
  }
}
.alert-info {}
.alert-success {}
.alert-warning {}
.alert-error {}
.alert-info {}
.alert-with-description {}
// 统计数值
.statistic {
  // 标题
  .statistic-title {}
  // 内容
  .statistic-content {
    // 前缀
    .statistic-content-prefix {
      // 上下箭头
      .arrow-up {}
      .arrow-down {}
    }
    // 值
    .statistic-content-value {
      // 整数部分
      .statistic-content-value-int {}
      // 小数部分
      .statistic-content-value-decimal {}
    }
     // 百分比
     .statistic-content-suffix {}
  }
}


// 图片预览
.image-preview {
  .image-preview-body {
    .image-preview-img {}
  }
  .image-preview-control {}
}
// 提示工具 tooltip (文字提示)文字提示气泡框，在鼠标悬停时显示，代替了系统的title提示。
.tooltip {}
.tooltip.show {}
.tooltip .tooltip-arrow {}
.tooltip .tooltip-arrow::before {}
.tooltip-top, .bs-tooltip-auto[data-popper-placement^=top] {}
.bs-tooltip-top .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow {}
.bs-tooltip-top .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {}
.bs-tooltip-end, .bs-tooltip-auto[data-popper-placement^=right] {}
.bs-tooltip-end .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow {}
.bs-tooltip-end .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {}
.bs-tooltip-bottom, .bs-tooltip-auto[data-popper-placement^=bottom] {}
.bs-tooltip-bottom .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow {}
.bs-tooltip-bottom .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {}
.bs-tooltip-start, .bs-tooltip-auto[data-popper-placement^=left] {}
.bs-tooltip-start .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow {}
.bs-tooltip-start .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {}
.tooltip-inner {}
// 气泡提示 popover
// Poptip 与 Tooltip 类似，具有很多相同配置，不同点是 Poptip 以卡片的形式承载了更多的内容，比如链接、表格、按钮等。
// Poptip 还 confirm 确认框，与 Modal 不同的是，它会出现在就近元素，相对轻量。
.popover {
  .popover-arrow {
    ::before {}
    ::after {}
  }
  .popover-header {}
  .popover-header:empty {}
  .popover-body {}
}
.bs-popover-top > .popover-arrow, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow {}
.bs-popover-top > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before {}
.bs-popover-top > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after {}
.bs-popover-end > .popover-arrow, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow {}
.bs-popover-end > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before {}
.bs-popover-end > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after {}
.bs-popover-bottom > .popover-arrow, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow {}
.bs-popover-bottom > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before {}
.bs-popover-bottom > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after {}
.bs-popover-bottom .popover-header::before, .bs-popover-auto[data-popper-placement^=bottom] .popover-header::before {}
.bs-popover-start > .popover-arrow, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow {}
.bs-popover-start > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before {}
.bs-popover-start > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after {}

// 对话框 modal
.modal {
  .modal-close {
    .modal-close-x {}
  }
  .modal-header {
    .modal-title {}
  }
  .modal-body {}
  .modal-footer {}
}
// 对话框
.modal {}
.modal-dialog {}
.modal.fade .modal-dialog {}
.modal.show .modal-dialog {}
.modal.modal-static .modal-dialog {}
.modal-dialog-scrollable {}
.modal-dialog-scrollable .modal-content {}
.modal-dialog-scrollable .modal-body {}
.modal-dialog-centered {}
.modal-content {}
.modal-backdrop {}
.modal-backdrop.fade {}
.modal-backdrop.show {}
.modal-header {}
.modal-header .btn-close {}
.modal-title {}
.modal-body {}
.modal-footer {}
.modal-fullscreen {}
.modal-fullscreen .modal-content {}
.modal-fullscreen .modal-header {}
.modal-fullscreen .modal-body {}
.modal-fullscreen .modal-footer {}

// 侧边栏(可隐藏,类似于抽屉)
.offcanvas {
  .offcanvas-header {
    .offcanvas-title {}
    .btn-close {}
  }
  .offcanvas-body {}
}
.offcanvas-start {}
.offcanvas-end {}
.offcanvas-top {}
.offcanvas-bottom {}
.offcanvas.show {}
.offcanvas-backdrop {}
.offcanvas-backdrop.fade {}
.offcanvas-backdrop.show {}

// 走马灯：图片或卡片轮播 Carousel 
.carousel {}
.carousel.pointer-event {}
.carousel-inner {
  ::after {}
}
.carousel-item {}
.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {}
.carousel-item-next:not(.carousel-item-start),
.active.carousel-item-end {}
.carousel-item-prev:not(.carousel-item-end),
.active.carousel-item-start {}
.carousel-fade .carousel-item {}
.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next.carousel-item-start,
.carousel-fade .carousel-item-prev.carousel-item-end {}
.carousel-fade .active.carousel-item-start,
.carousel-fade .active.carousel-item-end {}
.carousel-control-prev,
.carousel-control-next {}
.carousel-control-prev:hover, .carousel-control-prev:focus,
.carousel-control-next:hover,
.carousel-control-next:focus {}
.carousel-control-prev {}
.carousel-control-next {}
.carousel-control-prev-icon {}
.carousel-control-next-icon {}
.carousel-indicators {}
.carousel-indicators [data-bs-target] {}
.carousel-indicators .active {}
.carousel-caption {}
.carousel-dark .carousel-control-prev-icon,
.carousel-dark .carousel-control-next-icon {}
.carousel-dark .carousel-indicators [data-bs-target] {}
.carousel-dark .carousel-caption {}
// 基础导航
.nav {
  .nav-item {
    .nav-link {
      :hover {}
      :focus {}
    }
    .nav-link.disabled {}
  }
}
// 导航：标签页
.nav-tabs {
  .nav-item {
    .nav-link {
      :hover {}
      :focus {}
    }
    .nav-link.disabled {}
    .nav-link.active {}
    
  }
  .nav-item.show {
    .nav-link {}
  }
  .dropdown-menu {}
}
// 导航：药丸
.nav-pills {
  .nav-link {}
  .nav-link.active {}
  .show {
    .nav-link {}
  }
}
// 导航：填充
.nav-fill {
  .nav-item {
    .nav-link {}
  }
}
.nav-justified {
  .nav-item {
    .nav-link {}
  }
}
.tab-content {
  .tab-pane { }
  .active { }
}
// 导航条
.navbar {}
.navbar > .container,
.navbar > .container-fluid {}
.navbar-brand {}
.navbar-nav {
  .nav-link { }
  .dropdown-menu {}
}
.navbar-text {}
.navbar-collapse {}
.navbar-toggler {
  :hover { }
  :focus { }
}
.navbar-toggler-icon {}
.navbar-nav-scroll {}
.navbar-expand {}
.navbar-expand .navbar-nav {}
.navbar-expand .navbar-nav .dropdown-menu {}
.navbar-expand .navbar-nav .nav-link {}
.navbar-expand .navbar-nav-scroll {}
.navbar-expand .navbar-collapse {}
.navbar-expand .navbar-toggler {}
.navbar-expand .offcanvas-header {}
.navbar-expand .offcanvas {}
.navbar-expand .offcanvas-top,
.navbar-expand .offcanvas-bottom {}
.navbar-expand .offcanvas-body {}
.navbar-light .navbar-brand {}
.navbar-light .navbar-brand:hover, .navbar-light .navbar-brand:focus {}
.navbar-light .navbar-nav .nav-link {}
.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {}
.navbar-light .navbar-nav .nav-link.disabled {}
.navbar-light .navbar-nav .show > .nav-link,
.navbar-light .navbar-nav .nav-link.active {}
.navbar-light .navbar-toggler {}
.navbar-light .navbar-toggler-icon {}
.navbar-light .navbar-text {}
.navbar-light .navbar-text a,
.navbar-light .navbar-text a:hover,
.navbar-light .navbar-text a:focus {}
.navbar-dark {
  .navbar-brand {
    :hover {}
    :focus {}
  }
  .navbar-nav {
    .nav-link {
      :hover {}
      :focus {}
    }
    .nav-link.disabled {}
  }
  .navbar-toggler {}
  .navbar-toggler-icon {}
}
.navbar-dark .navbar-nav .show > .nav-link,
.navbar-dark .navbar-nav .nav-link.active {
  color: #fff;
}
.navbar-dark .navbar-text {
  color: rgba(255, 255, 255, 0.55);
}
.navbar-dark .navbar-text a,
.navbar-dark .navbar-text a:hover,
.navbar-dark .navbar-text a:focus {
  color: #fff;
}
// 下拉菜单 dropdown
.dropup,
.dropend,
.dropdown,
.dropstart {}
.dropdown-toggle {}
.dropdown-toggle::after {}
.dropdown-toggle:empty::after {}
.dropdown {
  .btn {}
  .dropdown-menu {
    .dropdown-header {}
    .dropdown-item-text {}
    .dropdown-item {
      &:hover {}
      &:focus {}
    }
    .dropdown-divider {}
  }
}
.dropdown-menu[data-bs-popper] {}
.dropdown-menu-start {}
.dropdown-menu-start[data-bs-popper] {}
.dropdown-menu-end {}
.dropdown-menu-end[data-bs-popper] {}
.dropup .dropdown-menu[data-bs-popper] {}
.dropup .dropdown-toggle::after {}
.dropup .dropdown-toggle:empty::after {}
.dropend .dropdown-menu[data-bs-popper] {}
.dropend .dropdown-toggle::after {}
.dropend .dropdown-toggle:empty::after {]
.dropend .dropdown-toggle::after {}
.dropstart .dropdown-menu[data-bs-popper] {}
.dropstart .dropdown-toggle::after {}
.dropstart .dropdown-toggle::after {}
.dropstart .dropdown-toggle::before {}
.dropstart .dropdown-toggle:empty::after {}
.dropstart .dropdown-toggle::before {}
.dropdown-item.active, .dropdown-item:active {}
.dropdown-item.disabled, .dropdown-item:disabled {}
.dropdown-menu.show {}
.dropdown-menu-dark {
  .dropdown-item-text {}
  .dropdown-header { }
  .dropdown-item {
    :hover {}
    :focus {}
   }
   .dropdown-divider {}
   .dropdown-item.active {}
   .dropdown-item:active {}
   .dropdown-item.disabled {}
   .dropdown-item:disabled {}
} 
// 布局
// layout 布局
.layout {
  .layout-header {}
  .layout-aside {}
  .layout-content {}
  .layout-footer {}
}
// 巨幕
.jumbotron {}
// 容器
.container {}