浮动Float

.fl 元素向左浮动
.fr 元素向右浮动
.fc 元素居中浮动

CSS:
.fl {float:left;}
.fr {float:right !important;}
.fc {float:none !important;margin-left:auto;margin-right:auto;}

转换元素Element

.ib 转换为内联元素
.show 显示被隐藏的元素
.hide 隐藏元素
.hidei 隐藏元素优先级

CSS:
.ib {display:inline-block;}
.show {display:block !important;}
.hide {display:none;}
.hidei {display:none !important;}

外间距Margin

被赋予!important优先权

.mt0 向上外间距0
.mt1 向上外间距0.25rem
.mt2 向上外间距0.375rem
.mt3 向上外间距0.5rem
.mt4 向上外间距0.75rem
.mt5 向上外间距1rem
.mt6 向上外间距1.25rem
.mt7 向上外间距1.5rem
.mt8 向上外间距1.75rem
.mt9 向上外间距2rem

.mr0~.mr9 向右内间距
.mb0~.mb9 向下内间距
.ml0~.ml9 向左内间距

CSS:
.mt0 {margin-top:0 !important;}
.mt1 {margin-top:.25rem !important;}
.mt2 {margin-top:.375rem !important;}
.mt3 {margin-top:.5rem !important;}
.mt4 {margin-top:.75rem !important;}
.mt5 {margin-top:1rem !important;}
.mt6 {margin-top:1.25rem !important;}
.mt7 {margin-top:1.5rem !important;}
.mt8 {margin-top:1.75rem !important;}
.mt9 {margin-top:2rem !important;}

内间距Padding

被赋予!important优先权

.pt0 向上内间距0
.pt1 向上内间距0.25rem
.pt2 向上内间距0.375rem
.pt3 向上内间距0.5rem
.pt4 向上内间距0.75rem
.pt5 向上内间距1rem
.pt6 向上内间距1.25rem
.pt7 向上内间距1.5rem
.pt8 向上内间距1.75rem
.pt9 向上内间距2rem

.pr0~.pr9 向右内间距
.pb0~.pb9 向下内间距
.pl0~.pl9 向左内间距

CSS:
.pt0 {padding-top:0 !important;}
.pt1 {padding-top:.25rem !important;}
.pt2 {padding-top:.375rem !important;}
.pt3 {padding-top:.5rem !important;}
.pt4 {padding-top:.75rem !important;}
.pt5 {padding-top:1rem !important;}
.pt6 {padding-top:1.25rem !important;}
.pt7 {padding-top:1.5rem !important;}
.pt8 {padding-top:1.75rem !important;}
.pt9 {padding-top:2rem !important;}

内容对齐Text align

被赋予!important优先权

.tl 内容向左对齐
.tr 内容向右对齐
.tc 内容居中对齐

CSS:
.tl {text-align:left !important;}
.tr {text-align:right !important;}
.tc {text-align:center !important;}

格式Format

被赋予!important优先权

.del 删除的文本
.ins 引用的文本
.capItaliZe 首字母大写
.uppErcaSe 全部大写字母
.lowErcaSe 全部小写字母
.b 粗体的文本
.i 斜体的文本
CSS:
.del {text-decoration:line-through !important;}
.ins {text-decoration:underline !important;}
.capitalize {text-transform:capitalize !important;}
.uppercase {text-transform:uppercase !important;}
.lowercase {text-transform:lowercase !important;}
.b {font-weight:bold !important;}
.i {font-style:italic !important;}

字号Font size

被赋予!important优先权

.fs1 font-size:0.875rem
.fs2 font-size:1rem
.fs3 font-size:1.125rem
.fs4 font-size:1.25rem
.fs5 font-size:1.5rem
.fs6 font-size:1.75rem
.fs7 font-size:2rem
.fs8 font-size:2.25rem
.fs9 font-size:2.5rem
CSS:
.fs1 {font-size:.875rem !important;}
.fs2 {font-size:1rem !important;}
.fs3 {font-size:1.125rem !important;}
.fs4 {font-size:1.25rem !important;}
.fs5 {font-size:1.5rem !important;}
.fs6 {font-size:1.75rem !important;}
.fs7 {font-size:2rem !important;}
.fs8 {font-size:2.25rem !important;}
.fs9 {font-size:2.5rem !important;}

行间距Line height

被赋予!important优先权

.lh100 行间距100%
.lh125 行间距125%
.lh150 行间距150%
.lh175 行间距175%
.lh200 行间距200%

CSS:
.lh100 {line-height:1 !important;}
.lh125 {line-height:1.25 !important;}
.lh150 {line-height:1.5 !important;}
.lh175 {line-height:1.75 !important;}
.lh200 {line-height:2 !important;}

颜色Color

被赋予!important优先权

.c-000 #000000
.c-333 #333333
.c-666 #666666
.c-999 #999999
.c-fff #ffffff
.c-red
.c-orange
.c-yellow
.c-tan
.c-brown
.c-marron
.c-lime
.c-green
.c-forest
.c-lightblue
.c-blue
.c-navy
.c-pink
.c-magenta
.c-purple
CSS:
.c-000 {color:#000000 !important;}
.c-333 {color:#333333 !important;}
.c-666 {color:#666666 !important;}
.c-999 {color:#999999 !important;}
.c-fff {color:#ffffff !important;}
.c-red {color:#d22020 !important;}
.c-orange {color:#ff6a13 !important;}
.c-yellow {color:#ffd400 !important;}
.c-tan {color:#d8c69d !important;}
.c-brown {color:#905b35 !important;}
.c-marron {color:#752438 !important;}
.c-lime {color:#abd83e !important;}
.c-green {color:#269c35 !important;}
.c-forest {color:#224e35 !important;}
.c-lightblue {color:#4ecff7 !important;}
.c-blue {color:#2077d2 !important;}
.c-navy {color:#1c406d !important;}
.c-pink {color:#fd6298 !important;}
.c-magenta {color:#ec2292 !important;}
.c-purple {color:#852dd6 !important;}

背景颜色Background color

被赋予!important优先权

.bg-000 #000000
.bg-333 #333333
.bg-666 #666666
.bg-999 #999999
.c-fff #ffffff
.bg-red
.bg-orange
.bg-yellow
.bg-tan
.bg-brown
.bg-marron
.bg-lime
.bg-green
.bg-forest
.bg-lightblue
.bg-blue
.bg-navy
.bg-pink
.bg-magenta
.bg-purple
CSS:
.bg-000 {background-color:#000000 !important;}
.bg-333 {background-color:#333333 !important;}
.bg-666 {background-color:#666666 !important;}
.bg-999 {background-color:#999999 !important;}
.bg-fff {background-color:#ffffff !important;}
.bg-red {background-color:#d22020 !important;}
.bg-orange {background-color:#ff6a13 !important;}
.bg-yellow {background-color:#ffd400 !important;}
.bg-tan {background-color:#d8c69d !important;}
.bg-brown {background-color:#905b35 !important;}
.bg-marron {background-color:#752438 !important;}
.bg-lime {background-color:#abd83e !important;}
.bg-green {background-color:#269c35 !important;}
.bg-forest {background-color:#224e35 !important;}
.bg-lightblue {background-color:#4ecff7 !important;}
.bg-blue {background-color:#2077d2 !important;}
.bg-navy {background-color:#1c406d !important;}
.bg-pink {background-color:#fd6298 !important;}
.bg-magenta {background-color:#ec2292 !important;}
.bg-purple {background-color:#852dd6 !important;}

不透明度Opacity

添加class="o1"~"o9"改变元素的不透明度

10%不透明度
20%不透明度
30%不透明度
40%不透明度
50%不透明度
60%不透明度
70%不透明度
80%不透明度
90%不透明度
<div class="o1">10%不透明度</div>
<div class="o2">20%不透明度</div>
<div class="o3">30%不透明度</div>
<div class="o4">40%不透明度</div>
<div class="o5">50%不透明度</div>
<div class="o6">60%不透明度</div>
<div class="o7">70%不透明度</div>
<div class="o8">80%不透明度</div>
<div class="o9">90%不透明度</div>

去色Gray

添加class="gray"使元素去色

<img src="imgurl" class="gray">
or:
<div class="gray"><img src="imgurl"></div>

模糊Blur

添加class="blur"使元素模糊

<img src="imgurl" class="blur">
or:
<div class="blur"><img src="imgurl"></div>