CSS 实用类

样式

类名 效果
.ibps-card 使 el-card 组件样式跟随主题变化
  • .ibps-card 示例
<el-card shadow="never" class="ibps-card">
  <template slot="header">header</template>
  body
</el-card>
<!-- 快看 我的边框和 header 边框会随着主题切换样式！ -->

文字

类名 效果
.ibps-text-center 文字水平居中

浮动

类名 效果
.ibps-fl 左浮动
.ibps-fr 右浮动

边距

类名 效果
.ibps-m-0 外边距 0px
.ibps-mt-0 上外边距 0px
.ibps-mr-0 右外边距 0px
.ibps-mb-0 下外边距 0px
.ibps-ml-0 左外边距 0px
.ibps-p-0 内边距 0px
.ibps-pt-0 上内边距 0px
.ibps-pr-0 右内边距 0px
.ibps-pb-0 下内边距 0px
.ibps-pl-0 左内边距 0px
.ibps-m-5 外边距 5px
.ibps-mt-5 上外边距 5px
.ibps-mr-5 右外边距 5px
.ibps-mb-5 下外边距 5px
.ibps-ml-5 左外边距 5px
.ibps-p-5 内边距 5px
.ibps-pt-5 上内边距 5px
.ibps-pr-5 右内边距 5px
.ibps-pb-5 下内边距 5px
.ibps-pl-5 左内边距 5px
.ibps-m-10 外边距 10px
.ibps-mt-10 上外边距 10px
.ibps-mr-10 右外边距 10px
.ibps-mb-10 下外边距 10px
.ibps-ml-10 左外边距 10px
.ibps-p-10 内边距 10px
.ibps-pt-10 上内边距 10px
.ibps-pr-10 右内边距 10px
.ibps-pb-10 下内边距 10px
.ibps-pl-10 左内边距 10px
.ibps-m-15 外边距 15px
.ibps-mt-15 上外边距 15px
.ibps-mr-15 右外边距 15px
.ibps-mb-15 下外边距 15px
.ibps-ml-15 左外边距 15px
.ibps-p-15 内边距 15px
.ibps-pt-15 上内边距 15px
.ibps-pr-15 右内边距 15px
.ibps-pb-15 下内边距 15px
.ibps-pl-15 左内边距 15px
.ibps-m-20 外边距 20px
.ibps-mt-20 上外边距 20px
.ibps-mr-20 右外边距 20px
.ibps-mb-20 下外边距 20px
.ibps-ml-20 左外边距 20px
.ibps-p-20 内边距 20px
.ibps-pt-20 上内边距 20px
.ibps-pr-20 右内边距 20px
.ibps-pb-20 下内边距 20px
.ibps-pl-20 左内边距 20px

边距简写

20px 设定为通用边距 可以如下简写

类名 效果
.ibps-m 外边距 20px
.ibps-mt 上外边距 20px
.ibps-mr 右外边距 20px
.ibps-mb 下外边距 20px
.ibps-ml 左外边距 20px
.ibps-p 内边距 20px
.ibps-pt 上内边距 20px
.ibps-pr 右内边距 20px
.ibps-pb 下内边距 20px
.ibps-pl 左内边距 20px
文档更新时间: 2022-06-21 11:34   作者：hugh