全局CSS样式

徽章控件

徽章控件主要包括不同色彩的徽章、含有图标的徽章。
添加含有u-badge就可以创建一个徽章,徽章的内容在data-badge中设置。

预定义样式

使用u-badge-primaryu-badge-successu-badge-infou-badge-warningu-badge-dangeru-badge-dark这七个基础类,来显示不同的颜色。

<div class="example-content-edge">
<label class="u-badge u-badge-primary" data-badge="1">
</label>
<label class="u-badge u-badge-success" data-badge="1">
</label>
<label class="u-badge u-badge-info" data-badge="1">
</label>
<label class="u-badge u-badge-warning" data-badge="1">
</label>
<label class="u-badge u-badge-danger" data-badge="1">
</label>
<label class="u-badge u-badge-dark" data-badge="1">
</label>
</div>
.demo .u-badge{
display: inline-block;
}

绝对定位标记

用于推送消息或提醒时,在标签dom元素中添加添加具体的图标即可。

<div class="u-badge w-20 m" data-badge="1">
<i class="uf uf-bell"></i>
</div>
<div class="u-badge u-badge-no-background w-20 m" data-badge="1">
<i class="uf uf-bell"></i>
</div>
.demo .u-badge{
display: inline-block;
}

按钮

为button元素添加.u-button即可实现一个按钮。其他效果的按钮实现只需添加相应的样式。

试一试

多色彩按钮

<button class="u-button ">BUTTON</button>
<button class="u-button u-button-primary">主色按钮</button>
<button class="u-button u-button-accent">辅色按钮</button>
<button class="u-button u-button-success">success</button>
<button class="u-button u-button-info">info</button>
<button class="u-button u-button-danger">danger</button>
<button class="u-button u-button-warning">warning</button>

多尺寸响应

<button class="u-button u-button-primary u-button-xg">特大尺寸</button>
<button class="u-button u-button-primary u-button-lg">大尺寸</button>
<button class="u-button u-button-primary">默认尺寸</button>
<button class="u-button u-button-primary u-button-sm">小尺寸</button>

块级按钮

如果想按钮充满,添加样式 .u-button-block

<button class="u-button u-button-block u-button-primary">块级按钮</button>
<button class="u-button u-button-block u-button-accent">块级按钮</button>

圆角按钮

<button class="u-button u-button-primary u-button-round">椭圆按钮</button>
<button class="u-button u-button-primary u-button-squared">直角按钮</button>
<button class="u-button u-button-primary u-button-floating">
<i class="uf uf-pc"></i>
</button>
<button class="u-button u-button-primary u-button-round u-button-pill-left">左半圆按钮</button>
<button class="u-button u-button-primary u-button-round u-button-pill-right">右半圆按钮</button>

色彩

基础调色板

red
pink
purple
deep-purple
indigo
blue
light-blue
cyan
teal
green
light-green
lime
yellow
amber
orange
deep-orange
brown
grey
blue-grey
black

以上基础调色板均以背景色为示例,对应的字体颜色去掉bg即可。例如:背景色为.bg-grey,字体色为.grey

调色板

调色板包含了主色和不同色阶的颜色

具体使用

1、引入u.css文件

2、背景色使用样式类名为'.bg-颜色的名字',字体使用样式类名为'.颜色的名字'。例如红色A700对应的背景色为.bg-red-A700,字体色为.red-A700

red
  • A700 / #d50000
  • A400 / #ff1744
  • A200 / #ff5252
  • A100 / #ff8a80
  • 900 / #b71c1c
  • 800 / #c62828
  • 700 / #d32f2f
  • 600 / #e53935
  • 500 / #f44336
  • 400 / #ef5350
  • 300 / #e57373
  • 200 / #ef9a9a
  • 100 / #ffcdd2
  • 50 / #ffebee
pink
  • a700 / #c51162
  • a400 / #f50057
  • a200 / #ff4081
  • a100 / #ff80ab
  • 900 / #880e4f
  • 800 / #ad1457
  • 700 / #c2185b
  • 600 / #d81b60
  • 500 / #e91e63
  • 400 / #ec407a
  • 300 / #f06292
  • 200 / #f48fb1
  • 100 / #f8bbd0
  • 50 / #fce4ec
purple
  • a700 / #aa00ff
  • a400 / #d500f9
  • a200 / #e040fb
  • a100 / #ea80fc
  • 900 / #4a148c
  • 800 / #6a1b9a
  • 700 / #7b1fa2
  • 600 / #8e24aa
  • 500 / #9c27b0
  • 400 / #ab47bc
  • 300 / #ba68c8
  • 200 / #ce93d8
  • 100 / #e1bee7
  • 50 / #f3e5f5
deep-purple
  • a700 / #6200ea
  • a400 / #651fff
  • a200 / #7c4dff
  • a100 / #b388ff
  • 900 / #311b92
  • 800 / #4527a0
  • 700 / #512da8
  • 600 / #5e35b1
  • 500 / #673ab7
  • 400 / #7e57c2
  • 300 / #9575cd
  • 200 / #b39ddb
  • 100 / #d1c4e9
  • 50 / #ede7f6
indigo
  • a700 / #304ffe
  • a400 / #3d5afe
  • a200 / #536dfe
  • a100 / #8c9eff
  • 900 / #1a237e
  • 800 / #283593
  • 700 / #303f9f
  • 600 / #3949ab
  • 500 / #3f51b5
  • 400 / #5c6bc0
  • 300 / #7986cb
  • 200 / #9fa8da
  • 100 / #c5cae9
  • 50 / #e8eaf6
blue
  • a700 / #2962ff
  • a400 / #2979ff
  • a200 / #448aff
  • a100 / #82b1ff
  • 900 / #0d47a1
  • 800 / #1565c0
  • 700 / #1976d2
  • 600 / #1e88e5
  • 500 / #2196f3
  • 400 / #42a5f5
  • 300 / #64b5f6
  • 200 / #90caf9
  • 100 / #bbdefb
  • 50 / #e3f2fd
light-blue
  • a700 / #0091ea
  • a400 / #00b0ff
  • a200 / #40c4ff
  • a100 / #80d8ff
  • 900 / #01579b
  • 800 / #0277bd
  • 700 / #0288d1
  • 600 / #039be5
  • 500 / #03a9f4
  • 400 / #29b6f6
  • 300 / #4fc3f7
  • 200 / #81d4fa
  • 100 / #b3e5fc
  • 50 / #e1f5fe
cyan
  • a700 / #00b8d4
  • a400 / #00e5ff
  • a200 / #18ffff
  • a100 / #84ffff
  • 900 / #006064
  • 800 / #00838f
  • 700 / #0097a7
  • 600 / #00acc1
  • 500 / #00bcd4
  • 400 / #26c6da
  • 300 / #4dd0e1
  • 200 / #80deea
  • 100 / #b2ebf2
  • 50 / #e0f7fa
teal
  • a700 / #00bfa5
  • a400 / #1de9b6
  • a200 / #64ffda
  • a100 / #a7ffeb
  • 900 / #004d40
  • 800 / #00695c
  • 700 / #00796b
  • 600 / #00897b
  • 500 / #009688
  • 400 / #26a69a
  • 300 / #4db6ac
  • 200 / #80cbc4
  • 100 / #b2dfdb
  • 50 / #e0f2f1
green
  • a700 / #00c853
  • a400 / #00e676
  • a200 / #69f0ae
  • a100 / #b9f6ca
  • 900 / #1b5e20
  • 800 / #2e7d32
  • 700 / #388e3c
  • 600 / #43a047
  • 500 / #4caf50
  • 400 / #66bb6a
  • 300 / #81c784
  • 200 / #a5d6a7
  • 100 / #c8e6c9
  • 50 / #e8f5e9
light-green
  • a700 / #64dd17
  • a400 / #76ff03
  • a200 / #b2ff59
  • a100 / #ccff90
  • 900 / #33691e
  • 800 / #558b2f
  • 700 / #689f38
  • 600 / #7cb342
  • 500 / #8bc34a
  • 400 / #9ccc65
  • 300 / #aed581
  • 200 / #c5e1a5
  • 100 / #dcedc8
  • 50 / #f1f8e9
lime
  • a700 / #aeea00
  • a400 / #c6ff00
  • a200 / #eeff41
  • a100 / #f4ff81
  • 900 / #827717
  • 800 / #9e9d24
  • 700 / #afb42b
  • 600 / #c0ca33
  • 500 / #cddc39
  • 400 / #d4e157
  • 300 / #dce775
  • 200 / #e6ee9c
  • 100 / #f0f4c3
  • 50 / #f9fbe7
yellow
  • a700 / #ffd600
  • a400 / #ffea00
  • a200 / #ffff00
  • a100 / #ffff8d
  • 900 / #f57f17
  • 800 / #f9a825
  • 700 / #fbc02d
  • 600 / #fdd835
  • 500 / #ffeb3b
  • 400 / #ffee58
  • 300 / #fff176
  • 200 / #fff59d
  • 100 / #fff9c4
  • 50 / #fffde7
amber
  • a700 / #ffab00
  • a400 / #ffc400
  • a200 / #ffd740
  • a100 / #ffe57f
  • 900 / #ff6f00
  • 800 / #ff8f00
  • 700 / #ffa000
  • 600 / #ffb300
  • 500 / #ffc107
  • 400 / #ffca28
  • 300 / #ffd54f
  • 200 / #ffe082
  • 100 / #ffecb3
  • 50 / #fff8e1
orange
  • a700 / #ff6d00
  • a400 / #ff9100
  • a200 / #ffab40
  • a100 / #ffd180
  • 900 / #e65100
  • 800 / #ef6c00
  • 700 / #f57c00
  • 600 / #fb8c00
  • 500 / #ff9800
  • 400 / #ffa726
  • 300 / #ffb74d
  • 200 / #ffcc80
  • 100 / #ffe0b2
  • 50 / #fff3e0
deep-orange
  • a700 / #dd2c00
  • a400 / #ff3d00
  • a200 / #ff6e40
  • a100 / #ff9e80
  • 900 / #bf360c
  • 800 / #d84315
  • 700 / #e64a19
  • 600 / #f4511e
  • 500 / #ff5722
  • 400 / #ff7043
  • 300 / #ff8a65
  • 200 / #ffab91
  • 100 / #ffccbc
  • 50 / #fbe9e7
brown
  • 900 / #3e2723
  • 800 / #4e342e
  • 700 / #5d4037
  • 600 / #6d4c41
  • 500 / #795548
  • 400 / #8d6e63
  • 300 / #a1887f
  • 200 / #bcaaa4
  • 100 / #d7ccc8
  • 50 / #efebe9
grey
  • 900 / #212121
  • 800 / #424242
  • 700 / #616161
  • 600 / #757575
  • 500 / #9e9e9e
  • 400 / #bdbdbd
  • 300 / #e0e0e0
  • 200 / #eeeeee
  • 100 / #f5f5f5
  • 50 / #fafafa
blue-grey
  • 900 / #263238
  • 800 / #37474f
  • 700 / #455a64
  • 600 / #546e7a
  • 500 / #607d8b
  • 400 / #78909c
  • 300 / #90a4ae
  • 200 / #b0bec5
  • 100 / #cfd8dc
  • 50 / #eceff1

图标

图标字体不用依赖任何JavaScript,只要CSS支持,无论颜色、大小或者其它任何效果,都可以轻易展现。

引入图标字体文件

1、引入项目下面生成的fontclass代码

<link rel="stylesheet" type="text/css" href="./iconfont.css">

2、挑选相应图标并获取类名,应用于页面

<i class="uf uf-xxx"></i>

显示某个图标

使用方法

<i class="uf uf-图标字体类名"></i>

例如:显示咨询的图标

<i class="uf uf-advice"></i>

是不是很简单,快上手试试吧!

具体的图标

  • 微信
    .uf-wechat
  • .uf-add-c-o
  • 搜索
    .uf-search
  • 图表 折线图
    .uf-histogram-arrow-up
  • 关闭
    .uf-close-bold
  • 雨伞
    .uf-umbrella
  • QQ
    .uf-qq
  • 分类
    .uf-4square-3
  • 发送
    .uf-send
  • 地图
    .uf-map
  • 标定
    .uf-9square-2
  • 汉堡包
    .uf-navmenu
  • 显示器
    .uf-pc-2
  • zoom
    .uf-search-light-2
  • 任务
    .uf-check-s-2
  • 编辑
    .uf-pencil
  • 撤销
    .uf-repeat
  • 安全
    .uf-security-2
  • .uf-lexi
  • 编辑
    .uf-pencil-s
  • 删除
    .uf-del
  • 比价
    .uf-bi-o
  • 编辑
    .uf-pencil-c
  • 二维码
    .uf-qrcode
  • 免费报价
    .uf-rmb-c-o
  • 搜索
    .uf-search-c-o
  • 铃铛
    .uf-bell
  • 机检通过
    .uf-pass-3
  • 树形线
    .uf-treeline
  • 培训
    .uf-training
  • 组织架构
    .uf-group-2
  • zoom-in
    .uf-zoom-in
  • 安全
    .uf-security-o
  • 报价
    .uf-baojia-c
  • 定制
    .uf-rulerpen
  • erp
    .uf-erpsearch
  • 组织机构
    .uf-group-o
  • 同步中2-同步
    .uf-cloud-o-updown
  • 关闭
    .uf-close-c-o
  • .uf-add-s
  • 工作台
    .uf-pc
  • 空气_雨天
    .uf-rain
  • 无数据
    .uf-nodata
  • 关闭
    .uf-close-c
  • 审批-驳回
    .uf-bohui-s-o
  • 天气
    .uf-cloud
  • 商品
    .uf-bag-s
  • made
    .uf-table-2
  • 箭头
    .uf-anglearrowpointingtoright
  • 叹号
    .uf-exc-c-o
  • 组织机构
    .uf-group
  • 认证激活
    .uf-personin-o
  • gm_日历
    .uf-calendar
  • .uf-add-s-o
  • 同步
    .uf-sync-c-o
  • grid
    .uf-grid
  • 箭头
    .uf-anglepointingtoleft
  • 激活
    .uf-activate-3
  • .uf-caven
  • 返回
    .uf-back
  • 授权
    .uf-pass-2
  • 显示树
    .uf-reduce-s-o
  • 图表图标-面积图
    .uf-area
  • 旗帜
    .uf-flag
  • 购买盒子
    .uf-box-o-2
  • 下架
    .uf-arrow-s-o-down
  • 上架
    .uf-arrow-s-o-up
  • 企业信息
    .uf-building
  • 天气
    .uf-tapp
  • 搜索
    .uf-treefolder
  • 咨询
    .uf-advice
  • 序列布局
    .uf-2collayout
  • 审批
    .uf-check-s
  • 采购合同
    .uf-sign
  • 查看详情
    .uf-listsearch
  • 必填
    .uf-mi
  • 查看
    .uf-eye-c-o
  • 许可
    .uf-check-c-o
  • 审批
    .uf-seal
  • erp
    .uf-erpbox
  • 定制
    .uf-rulerpen-o
  • 角色
    .uf-role
  • 提示叹号
    .uf-exc-c-2
  • pad
    .uf-pad
  • tree-new-sbling-node
    .uf-treefolder-closed
  • 减号
    .uf-reduce-c-o
  • 通过
    .uf-pass-s-o
  • 维护
    .uf-setting
  • ZSX号
    .uf-close-s
  • 地图
    .uf-map-o
  • 移动
    .uf-move
  • 箭头
    .uf-2arrow-down
  • 箭头
    .uf-2arrow-right
  • 箭头
    .uf-arrow-c-o-left
  • plus
    .uf-plus
  • 箭头
    .uf-arrow-c-o-right
  • 箭头
    .uf-arrow-c-o-down
  • 暂无数据
    .uf-list-s-o
  • 云下载
    .uf-cloud-o-down
  • 无效数据
    .uf-nodata-2
  • 文档文件-01
    .uf-file-s
  • 箭头
    .uf-2arrow-up
  • 图表_饼
    .uf-piechart
  • 云_上传
    .uf-cloud-o-up
  • 取消
    .uf-close
  • 对号
    .uf-correct
  • 图表切换
    .uf-histogram-s-o-2
  • 应用中心
    .uf-4square-2
  • 天气
    .uf-sunny
  • 复制链接
    .uf-link
  • 查看
    .uf-eye
  • 查看
    .uf-eye-o
  • .uf-qian
  • 小部件授权
    .uf-widgetab
  • 报价
    .uf-rmb-s
  • 断开链接
    .uf-link-off
  • 上架
    .uf-shang-s
  • 下架
    .uf-xia-s
  • 盒子full
    .uf-box-2
  • 授权
    .uf-pass-o
  • angle-arrow-down
    .uf-arrow-down
  • angle-arrow-pointing-to-right
    .uf-arrow-right
  • angle-pointing-to-left
    .uf-arrow-left
  • archive-black-box
    .uf-box
  • arrowhead-pointing-to-the-right
    .uf-triangle-right
  • bar-graph-on-a-rectangle
    .uf-histogram-s-o
  • book
    .uf-book
  • bookmark-white
    .uf-bookmark-o
  • branch-with-leaves-black-shape
    .uf-leaf
  • bullseye
    .uf-bullseye
  • camera-retro
    .uf-camera-2
  • caret-arrow-up
    .uf-triangle-up
  • caret-down
    .uf-triangle-down
  • cloud-storage-download
    .uf-cloud-down
  • cloud-storage-uploading-option
    .uf-cloud-up
  • comment-black-oval-bubble-shape
    .uf-bubble
  • comment-white-oval-bubble
    .uf-bubble-o
  • copy-document
    .uf-copy
  • correct-symbol
    .uf-correct-2
  • double-left-chevron
    .uf-2arrow-left
  • down-arrow
    .uf-arrow-down-2
  • download-to-storage-drive
    .uf-download
  • earth-globe
    .uf-earth
  • envelope-of-white-paper
    .uf-mail-o
  • envelope
    .uf-mail
  • exclamation
    .uf-exc
  • external-link-symbol
    .uf-externallink
  • facetime-button
    .uf-video
  • film-strip-with-two-photograms
    .uf-films
  • folder-closed-black-shape
    .uf-folder
  • folder-white-shape
    .uf-folder-o
  • four-black-squares
    .uf-4square
  • gift-box
    .uf-gift
  • github-logo
    .uf-github-c
  • github-sign
    .uf-github-s
  • heart-shape-outline
    .uf-heart-o
  • heart-shape-silhouette
    .uf-heart
  • home
    .uf-home
  • information-button
    .uf-i-c-2
  • information-symbol
    .uf-i
  • left-arrow
    .uf-triangle-left
  • listing-option
    .uf-symlist
  • long-arrow-pointing-to-left
    .uf-arrow-left-2
  • long-arrow-pointing-to-the-right
    .uf-arrow-right-2
  • long-arrow-pointing-up
    .uf-arrow-up-2
  • minus-sign-inside-a-black-circle
    .uf-reduce-c
  • minus-sign-inside-a-black-rounded-square-shape
    .uf-reduce-s
  • minus-symbol
    .uf-minus
  • mobile-phone
    .uf-mobile
  • musical-bell-outline
    .uf-bell-o
  • nine-black-tiles
    .uf-9square
  • numbered-list
    .uf-numlist
  • open-folder-outline
    .uf-folderopen-o
  • open-folder
    .uf-treefolderopen
  • open-laptop-computer
    .uf-mac
  • photo-camera
    .uf-camera
  • picture
    .uf-picture
  • play-sign
    .uf-play
  • play-video-button
    .uf-play-o
  • question-mark-on-a-circular-black-background
    .uf-qm-c
  • question-sign
    .uf-qm
  • reorder-option
    .uf-navmenu-light
  • settings
    .uf-settings
  • shopping-cart-black-shape
    .uf-cart
  • signal-bars
    .uf-histogram
  • sort-arrows-couple-pointing-up-and-down
    .uf-finetune
  • sort-by-attributes-interface-button-option
    .uf-sortup
  • sort-by-attributes
    .uf-sortdown
  • sort-by-numeric-order
    .uf-sort19
  • sort-by-order
    .uf-sort91
  • sort-reverse-alphabetical-order
    .uf-za
  • star-1
    .uf-star-o
  • star-half-empty
    .uf-star-2
  • star
    .uf-star
  • suitcase-with-white-details
    .uf-luggage
  • table-grid
    .uf-table
  • telephone-handle-silhouette
    .uf-tel
  • telephone-symbol-button
    .uf-tel-s
  • terminal
    .uf-terminal
  • text-file-1
    .uf-file
  • text-file
    .uf-file-o
  • three-small-square-shapes
    .uf-3dot-h
  • time
    .uf-time-c-o
  • upload
    .uf-upload
  • vertical-ellipsis
    .uf-3dot-v
  • yen-symbol
    .uf-rmb
  • 箭头
    .uf-arrow-c-o-up
  • 驳回
    .uf-reject-2
  • barcode-1
    .uf-barcode
  • zoom-out
    .uf-zoom-out
  • 三角叹号
    .uf-exc-t-o
  • 通过
    .uf-pass
  • 关系网络
    .uf-flow
  • .uf-add-c
  • 箭头
    .uf-arrow-c-o-right-2
  • 上架
    .uf-shelf-on
  • 下架
    .uf-shelf-off
  • 文件
    .uf-file-o-2
  • 到货确认
    .uf-truck-o
  • 功能强大
    .uf-super
  • 设备
    .uf-equipment
  • 箭头
    .uf-arrow-c-o-left-2
  • 资源文件
    .uf-files-o
  • .uf-cloud-o
  • 对账
    .uf-rmb-s-o-2
  • 管理中心
    .uf-3dot-c-o
  • 天气_大风
    .uf-dafeng
  • 天气_暴雪
    .uf-baoxue
  • 天气_冰雹
    .uf-bingbao
  • 天气_风暴
    .uf-fengbao
  • 天气_小雨
    .uf-xiaoyu
  • 天气_阵雪
    .uf-zhenxue
  • 天气_中雨
    .uf-zhongyu
  • ES
    .uf-es
  • 流程
    .uf-flow-o-2
  • 激活-01
    .uf-activate-2
  • 流程
    .uf-flow-o
  • 技术支持
    .uf-bulb-2
  • 必填
    .uf-mi-c
  • 返回顶部
    .uf-top-up
  • credit-card
    .uf-creditcard
  • align-center
    .uf-align-center
  • align-justify
    .uf-align-justify
  • align-left
    .uf-align-left
  • align-right
    .uf-align-right
  • .uf-ju-c-o
  • 货到付款
    .uf-truck
  • 流程
    .uf-setting-c-o
  • 楼宇图标_用户组
    .uf-users-o
  • 商品
    .uf-bag-s-o
  • 采购
    .uf-cai-s
  • 定标
    .uf-listcheck
  • .uf-users
  • 查看详情
    .uf-i-c
  • 企业信息
    .uf-building-o
  • 报价管理
    .uf-rmb-s-o
  • 已驳回
    .uf-reject
  • 菜单
    .uf-9dot
  • 网关
    .uf-gateway
  • 发票
    .uf-ticket-s-o
  • 管理中心
    .uf-userset
  • 组件
    .uf-puzzle-o
  • 物料管理
    .uf-box-o
  • 激活
    .uf-bulb
  • 感叹号_icon
    .uf-exc-t
  • 报价
    .uf-rmb-c
  • 发票
    .uf-table-s-o
  • .uf-umbrella-o
  • dropbox
    .uf-dropbox
  • 搜索-搜索
    .uf-search-light
  • shopping-cart-black-shape
    .uf-cart-o
  • kero
    .uf-kero-col
  • uba
    .uf-uba-col
  • tinperzc
    .uf-tinperzc-col
  • tinperzch
    .uf-tinperzch-col
  • iuap
    .uf-iuap-col
  • iuapdesignz
    .uf-iuapdesign-col
  • bee
    .uf-bee-col
  • neoui
    .uf-neoui-col
  • sparrow
    .uf-sparrow-col
  • tinpercn
    .uf-tinpercn-col
  • tinperen
    .uf-tinperen-col
  • angle-arrow-down
    .uf-arrow-up
  • webmail
    .uf-mailsym
  • 办公用品
    .uf-print
  • 报销
    .uf-ticket-3
  • 借款
    .uf-loan
  • 凭证中心
    .uf-ticket-2
  • 请假
    .uf-offwork
  • 待办
    .uf-todolist
  • 员工入职
    .uf-personin
  • 票务
    .uf-ticket
  • 小icon-图表
    .uf-linechart
  • 应用中心
    .uf-4leaf
  • 信息维护
    .uf-listset
  • 企业认证
    .uf-qi-c-o
  • 叹号
    .uf-exc-c
  • 热拔插
    .uf-plug-o
  • 搜索
    .uf-search-s
  • tree-new-sbling-node
    .uf-treeadd
<ul class="icon_lists clear">
<li>
<i class="icon uf uf-wechat"></i>
<div class="name">微信</div>
<div class="fontclass">.uf-wechat</div>
</li>
<li>
<i class="icon uf uf-add-c-o"></i>
<div class="name"></div>
<div class="fontclass">.uf-add-c-o</div>
</li>
<li>
<i class="icon uf uf-search"></i>
<div class="name">搜索</div>
<div class="fontclass">.uf-search</div>
</li>
<li>
<i class="icon uf uf-histogram-arrow-up"></i>
<div class="name">图表 折线图</div>
<div class="fontclass">.uf-histogram-arrow-up</div>
</li>
<li>
<i class="icon uf uf-close-bold"></i>
<div class="name">关闭</div>
<div class="fontclass">.uf-close-bold</div>
</li>
<li>
<i class="icon uf uf-umbrella"></i>
<div class="name">雨伞</div>
<div class="fontclass">.uf-umbrella</div>
</li>
<li>
<i class="icon uf uf-qq"></i>
<div class="name">QQ</div>
<div class="fontclass">.uf-qq</div>
</li>
<li>
<i class="icon uf uf-4square-3"></i>
<div class="name">分类</div>
<div class="fontclass">.uf-4square-3</div>
</li>
<li>
<i class="icon uf uf-send"></i>
<div class="name">发送</div>
<div class="fontclass">.uf-send</div>
</li>
<li>
<i class="icon uf uf-map"></i>
<div class="name">地图</div>
<div class="fontclass">.uf-map</div>
</li>
<li>
<i class="icon uf uf-9square-2"></i>
<div class="name">标定</div>
<div class="fontclass">.uf-9square-2</div>
</li>
<li>
<i class="icon uf uf-navmenu"></i>
<div class="name">汉堡包</div>
<div class="fontclass">.uf-navmenu</div>
</li>
<li>
<i class="icon uf uf-pc-2"></i>
<div class="name">显示器</div>
<div class="fontclass">.uf-pc-2</div>
</li>
<li>
<i class="icon uf uf-search-light-2"></i>
<div class="name">zoom</div>
<div class="fontclass">.uf-search-light-2</div>
</li>
<li>
<i class="icon uf uf-check-s-2"></i>
<div class="name">任务</div>
<div class="fontclass">.uf-check-s-2</div>
</li>
<li>
<i class="icon uf uf-pencil"></i>
<div class="name">编辑</div>
<div class="fontclass">.uf-pencil</div>
</li>
<li>
<i class="icon uf uf-repeat"></i>
<div class="name">撤销</div>
<div class="fontclass">.uf-repeat</div>
</li>
<li>
<i class="icon uf uf-security-2"></i>
<div class="name">安全</div>
<div class="fontclass">.uf-security-2</div>
</li>
<li>
<i class="icon uf uf-lexi"></i>
<div class="name"></div>
<div class="fontclass">.uf-lexi</div>
</li>
<li>
<i class="icon uf uf-pencil-s"></i>
<div class="name">编辑</div>
<div class="fontclass">.uf-pencil-s</div>
</li>
<li>
<i class="icon uf uf-del"></i>
<div class="name">删除</div>
<div class="fontclass">.uf-del</div>
</li>
<li>
<i class="icon uf uf-bi-o"></i>
<div class="name">比价</div>
<div class="fontclass">.uf-bi-o</div>
</li>
<li>
<i class="icon uf uf-pencil-c"></i>
<div class="name">编辑</div>
<div class="fontclass">.uf-pencil-c</div>
</li>
<li>
<i class="icon uf uf-qrcode"></i>
<div class="name">二维码</div>
<div class="fontclass">.uf-qrcode</div>
</li>
<li>
<i class="icon uf uf-rmb-c-o"></i>
<div class="name">免费报价</div>
<div class="fontclass">.uf-rmb-c-o</div>
</li>
<li>
<i class="icon uf uf-search-c-o"></i>
<div class="name">搜索</div>
<div class="fontclass">.uf-search-c-o</div>
</li>
<li>
<i class="icon uf uf-bell"></i>
<div class="name">铃铛</div>
<div class="fontclass">.uf-bell</div>
</li>
<li>
<i class="icon uf uf-pass-3"></i>
<div class="name">机检通过</div>
<div class="fontclass">.uf-pass-3</div>
</li>
<li>
<i class="icon uf uf-treeline"></i>
<div class="name">树形线</div>
<div class="fontclass">.uf-treeline</div>
</li>
<li>
<i class="icon uf uf-training"></i>
<div class="name">培训</div>
<div class="fontclass">.uf-training</div>
</li>
<li>
<i class="icon uf uf-group-2"></i>
<div class="name">组织架构</div>
<div class="fontclass">.uf-group-2</div>
</li>
<li>
<i class="icon uf uf-zoom-in"></i>
<div class="name">zoom-in</div>
<div class="fontclass">.uf-zoom-in</div>
</li>
<li>
<i class="icon uf uf-security-o"></i>
<div class="name">安全</div>
<div class="fontclass">.uf-security-o</div>
</li>
<li>
<i class="icon uf uf-baojia-c"></i>
<div class="name">报价</div>
<div class="fontclass">.uf-baojia-c</div>
</li>
<li>
<i class="icon uf uf-rulerpen"></i>
<div class="name">定制</div>
<div class="fontclass">.uf-rulerpen</div>
</li>
<li>
<i class="icon uf uf-erpsearch"></i>
<div class="name">erp</div>
<div class="fontclass">.uf-erpsearch</div>
</li>
<li>
<i class="icon uf uf-group-o"></i>
<div class="name">组织机构</div>
<div class="fontclass">.uf-group-o</div>
</li>
<li>
<i class="icon uf uf-cloud-o-updown"></i>
<div class="name">同步中2-同步</div>
<div class="fontclass">.uf-cloud-o-updown</div>
</li>
<li>
<i class="icon uf uf-close-c-o"></i>
<div class="name">关闭</div>
<div class="fontclass">.uf-close-c-o</div>
</li>
<li>
<i class="icon uf uf-add-s"></i>
<div class="name"></div>
<div class="fontclass">.uf-add-s</div>
</li>
<li>
<i class="icon uf uf-pc"></i>
<div class="name">工作台</div>
<div class="fontclass">.uf-pc</div>
</li>
<li>
<i class="icon uf uf-rain"></i>
<div class="name">空气_雨天</div>
<div class="fontclass">.uf-rain</div>
</li>
<li>
<i class="icon uf uf-nodata"></i>
<div class="name">无数据</div>
<div class="fontclass">.uf-nodata</div>
</li>
<li>
<i class="icon uf uf-close-c"></i>
<div class="name">关闭</div>
<div class="fontclass">.uf-close-c</div>
</li>
<li>
<i class="icon uf uf-bohui-s-o"></i>
<div class="name">审批-驳回</div>
<div class="fontclass">.uf-bohui-s-o</div>
</li>
<li>
<i class="icon uf uf-cloud"></i>
<div class="name">天气</div>
<div class="fontclass">.uf-cloud</div>
</li>
<li>
<i class="icon uf uf-bag-s"></i>
<div class="name">商品</div>
<div class="fontclass">.uf-bag-s</div>
</li>
<li>
<i class="icon uf uf-table-2"></i>
<div class="name">made</div>
<div class="fontclass">.uf-table-2</div>
</li>
<li>
<i class="icon uf uf-anglearrowpointingtoright"></i>
<div class="name">箭头</div>
<div class="fontclass">.uf-anglearrowpointingtoright</div>
</li>
<li>
<i class="icon uf uf-exc-c-o"></i>
<div class="name">叹号</div>
<div class="fontclass">.uf-exc-c-o</div>
</li>
<li>
<i class="icon uf uf-group"></i>
<div class="name">组织机构</div>
<div class="fontclass">.uf-group</div>
</li>
<li>
<i class="icon uf uf-personin-o"></i>
<div class="name">认证激活</div>
<div class="fontclass">.uf-personin-o</div>
</li>
<li>
<i class="icon uf uf-calendar"></i>
<div class="name">gm_日历</div>
<div class="fontclass">.uf-calendar</div>
</li>
<li>
<i class="icon uf uf-add-s-o"></i>
<div class="name"></div>
<div class="fontclass">.uf-add-s-o</div>
</li>
<li>
<i class="icon uf uf-sync-c-o"></i>
<div class="name">同步</div>
<div class="fontclass">.uf-sync-c-o</div>
</li>
<li>
<i class="icon uf uf-grid"></i>
<div class="name">grid</div>
<div class="fontclass">.uf-grid</div>
</li>
<li>
<i class="icon uf uf-anglepointingtoleft"></i>
<div class="name">箭头</div>
<div class="fontclass">.uf-anglepointingtoleft</div>
</li>
<li>
<i class="icon uf uf-activate-3"></i>
<div class="name">激活</div>
<div class="fontclass">.uf-activate-3</div>
</li>
<li>
<i class="icon uf uf-caven"></i>
<div class="name"></div>
<div class="fontclass">.uf-caven</div>
</li>
<li>
<i class="icon uf uf-back"></i>
<div class="name">返回</div>
<div class="fontclass">.uf-back</div>
</li>
<li>
<i class="icon uf uf-pass-2"></i>
<div class="name">授权</div>
<div class="fontclass">.uf-pass-2</div>
</li>
<li>
<i class="icon uf uf-reduce-s-o"></i>
<div class="name">显示树</div>
<div class="fontclass">.uf-reduce-s-o</div>
</li>
<li>
<i class="icon uf uf-area"></i>
<div class="name">图表图标-面积图</div>
<div class="fontclass">.uf-area</div>
</li>
<li>
<i class="icon uf uf-flag"></i>
<div class="name">旗帜</div>
<div class="fontclass">.uf-flag</div>
</li>
<li>
<i class="icon uf uf-box-o-2"></i>
<div class="name">购买盒子</div>
<div class="fontclass">.uf-box-o-2</div>
</li>
<li>
<i class="icon uf uf-arrow-s-o-down"></i>
<div class="name">下架</div>
<div class="fontclass">.uf-arrow-s-o-down</div>
</li>
<li>
<i class="icon uf uf-arrow-s-o-up"></i>
<div class="name">上架</div>
<div class="fontclass">.uf-arrow-s-o-up</div>
</li>
<li>
<i class="icon uf uf-building"></i>
<div class="name">企业信息</div>
<div class="fontclass">.uf-building</div>
</li>
<li>
<i class="icon uf uf-tapp"></i>
<div class="name">天气</div>
<div class="fontclass">.uf-tapp</div>
</li>
<li>
<i class="icon uf uf-treefolder"></i>
<div class="name">搜索</div>
<div class="fontclass">.uf-treefolder</div>
</li>
<li>
<i class="icon uf uf-advice"></i>
<div class="name">咨询</div>
<div class="fontclass">.uf-advice</div>
</li>
<li>
<i class="icon uf uf-2collayout"></i>
<div class="name">序列布局</div>
<div class="fontclass">.uf-2collayout</div>
</li>
<li>
<i class="icon uf uf-check-s"></i>
<div class="name">审批</div>
<div class="fontclass">.uf-check-s</div>
</li>
<li>
<i class="icon uf uf-sign"></i>
<div class="name">采购合同</div>
<div class="fontclass">.uf-sign</div>
</li>
<li>
<i class="icon uf uf-listsearch"></i>
<div class="name">查看详情</div>
<div class="fontclass">.uf-listsearch</div>
</li>
<li>
<i class="icon uf uf-mi"></i>
<div class="name">必填</div>
<div class="fontclass">.uf-mi</div>
</li>
<li>
<i class="icon uf uf-eye-c-o"></i>
<div class="name">查看</div>
<div class="fontclass">.uf-eye-c-o</div>
</li>
<li>
<i class="icon uf uf-check-c-o"></i>
<div class="name">许可</div>
<div class="fontclass">.uf-check-c-o</div>
</li>
<li>
<i class="icon uf uf-seal"></i>
<div class="name">审批</div>
<div class="fontclass">.uf-seal</div>
</li>
<li>
<i class="icon uf uf-erpbox"></i>
<div class="name">erp</div>
<div class="fontclass">.uf-erpbox</div>
</li>
<li>
<i class="icon uf uf-rulerpen-o"></i>
<div class="name">定制</div>
<div class="fontclass">.uf-rulerpen-o</div>
</li>
<li>
<i class="icon uf uf-role"></i>
<div class="name">角色</div>
<div class="fontclass">.uf-role</div>
</li>
<li>
<i class="icon uf uf-exc-c-2"></i>
<div class="name">提示叹号</div>
<div class="fontclass">.uf-exc-c-2</div>
</li>
<li>
<i class="icon uf uf-pad"></i>
<div class="name">pad</div>
<div class="fontclass">.uf-pad</div>
</li>
<li>
<i class="icon uf uf-treefolder-closed"></i>
<div class="name">tree-new-sbling-node</div>
<div class="fontclass">.uf-treefolder-closed</div>
</li>
<li>
<i class="icon uf uf-reduce-c-o"></i>
<div class="name">减号</div>
<div class="fontclass">.uf-reduce-c-o</div>
</li>
<li>
<i class="icon uf uf-pass-s-o"></i>
<div class="name">通过</div>
<div class="fontclass">.uf-pass-s-o</div>
</li>
<li>
<i class="icon uf uf-setting"></i>
<div class="name">维护</div>
<div class="fontclass">.uf-setting</div>
</li>
<li>
<i class="icon uf uf-close-s"></i>
<div class="name">ZSX号</div>
<div class="fontclass">.uf-close-s</div>
</li>
<li>
<i class="icon uf uf-map-o"></i>
<div class="name">地图</div>
<div class="fontclass">.uf-map-o</div>
</li>
<li>
<i class="icon uf uf-move"></i>
<div class="name">移动</div>
<div class="fontclass">.uf-move</div>
</li>
<li>
<i class="icon uf uf-2arrow-down"></i>
<div class="name">箭头</div>
<div class="fontclass">.uf-2arrow-down</div>
</li>
<li>
<i class="icon uf uf-2arrow-right"></i>
<div class="name">箭头</div>
<div class="fontclass">.uf-2arrow-right</div>
</li>
<li>
<i class="icon uf uf-arrow-c-o-left"></i>
<div class="name">箭头</div>
<div class="fontclass">.uf-arrow-c-o-left</div>
</li>
<li>
<i class="icon uf uf-plus"></i>
<div class="name">plus</div>
<div class="fontclass">.uf-plus</div>
</li>
<li>
<i class="icon uf uf-arrow-c-o-right"></i>
<div class="name">箭头</div>
<div class="fontclass">.uf-arrow-c-o-right</div>
</li>
<li>
<i class="icon uf uf-arrow-c-o-down"></i>
<div class="name">箭头</div>
<div class="fontclass">.uf-arrow-c-o-down</div>
</li>
<li>
<i class="icon uf uf-list-s-o"></i>
<div class="name">暂无数据</div>
<div class="fontclass">.uf-list-s-o</div>
</li>
<li>
<i class="icon uf uf-cloud-o-down"></i>
<div class="name">云下载</div>
<div class="fontclass">.uf-cloud-o-down</div>
</li>
<li>
<i class="icon uf uf-nodata-2"></i>
<div class="name">无效数据</div>
<div class="fontclass">.uf-nodata-2</div>
</li>
<li>
<i class="icon uf uf-file-s"></i>
<div class="name">文档文件-01</div>
<div class="fontclass">.uf-file-s</div>
</li>
<li>
<i class="icon uf uf-2arrow-up"></i>
<div class="name">箭头</div>
<div class="fontclass">.uf-2arrow-up</div>
</li>
<li>
<i class="icon uf uf-piechart"></i>
<div class="name">图表_饼</div>
<div class="fontclass">.uf-piechart</div>
</li>
<li>
<i class="icon uf uf-cloud-o-up"></i>
<div class="name">云_上传</div>
<div class="fontclass">.uf-cloud-o-up</div>
</li>
<li>
<i class="icon uf uf-close"></i>
<div class="name">取消</div>
<div class="fontclass">.uf-close</div>
</li>
<li>
<i class="icon uf uf-correct"></i>
<div class="name">对号</div>
<div class="fontclass">.uf-correct</div>
</li>
<li>
<i class="icon uf uf-histogram-s-o-2"></i>
<div class="name">图表切换</div>
<div class="fontclass">.uf-histogram-s-o-2</div>
</li>
<li>
<i class="icon uf uf-4square-2"></i>
<div class="name">应用中心</div>
<div class="fontclass">.uf-4square-2</div>
</li>
<li>
<i class="icon uf uf-sunny"></i>
<div class="name">天气 </div>
<div class="fontclass">.uf-sunny</div>
</li>
<li>
<i class="icon uf uf-link"></i>
<div class="name">复制链接</div>
<div class="fontclass">.uf-link</div>
</li>
<li>
<i class="icon uf uf-eye"></i>
<div class="name">查看</div>
<div class="fontclass">.uf-eye</div>
</li>
<li>
<i class="icon uf uf-eye-o"></i>
<div class="name">查看</div>
<div class="fontclass">.uf-eye-o</div>
</li>
<li>
<i class="icon uf uf-qian"></i>
<div class="name"></div>
<div class="fontclass">.uf-qian</div>
</li>
<li>
<i class="icon uf uf-widgetab"></i>
<div class="name">小部件授权</div>
<div class="fontclass">.uf-widgetab</div>
</li>
<li>
<i class="icon uf uf-rmb-s"></i>
<div class="name">报价</div>
<div class="fontclass">.uf-rmb-s</div>
</li>
<li>
<i class="icon uf uf-link-off"></i>
<div class="name">断开链接</div>
<div class="fontclass">.uf-link-off</div>
</li>
<li>
<i class="icon uf uf-shang-s"></i>
<div class="name">上架</div>
<div class="fontclass">.uf-shang-s</div>
</li>
<li>
<i class="icon uf uf-xia-s"></i>
<div class="name">下架</div>
<div class="fontclass">.uf-xia-s</div>
</li>
<li>
<i class="icon uf uf-box-2"></i>
<div class="name">盒子full</div>
<div class="fontclass">.uf-box-2</div>
</li>
<li>
<i class="icon uf uf-pass-o"></i>
<div class="name">授权</div>
<div class="fontclass">.uf-pass-o</div>
</li>
<li>
<i class="icon uf uf-arrow-down"></i>
<div class="name">angle-arrow-down</div>
<div class="fontclass">.uf-arrow-down</div>
</li>
<li>
<i class="icon uf uf-arrow-right"></i>
<div class="name">angle-arrow-pointing-to-right</div>
<div class="fontclass">.uf-arrow-right</div>
</li>
<li>
<i class="icon uf uf-arrow-left"></i>
<div class="name">angle-pointing-to-left</div>
<div class="fontclass">.uf-arrow-left</div>
</li>
<li>
<i class="icon uf uf-box"></i>
<div class="name">archive-black-box</div>
<div class="fontclass">.uf-box</div>
</li>
<li>
<i class="icon uf uf-triangle-right"></i>
<div class="name">arrowhead-pointing-to-the-right</div>
<div class="fontclass">.uf-triangle-right</div>
</li>
<li>
<i class="icon uf uf-histogram-s-o"></i>
<div class="name">bar-graph-on-a-rectangle</div>
<div class="fontclass">.uf-histogram-s-o</div>
</li>
<li>
<i class="icon uf uf-book"></i>
<div class="name">book</div>
<div class="fontclass">.uf-book</div>
</li>
<li>
<i class="icon uf uf-bookmark-o"></i>
<div class="name">bookmark-white</div>
<div class="fontclass">.uf-bookmark-o</div>
</li>
<li>
<i class="icon uf uf-leaf"></i>
<div class="name">branch-with-leaves-black-shape</div>
<div class="fontclass">.uf-leaf</div>
</li>
<li>
<i class="icon uf uf-bullseye"></i>
<div class="name">bullseye</div>
<div class="fontclass">.uf-bullseye</div>
</li>
<li>
<i class="icon uf uf-camera-2"></i>
<div class="name">camera-retro</div>
<div class="fontclass">.uf-camera-2</div>
</li>
<li>
<i class="icon uf uf-triangle-up"></i>
<div class="name">caret-arrow-up</div>
<div class="fontclass">.uf-triangle-up</div>
</li>
<li>
<i class="icon uf uf-triangle-down"></i>
<div class="name">caret-down</div>
<div class="fontclass">.uf-triangle-down</div>
</li>
<li>
<i class="icon uf uf-cloud-down"></i>
<div class="name">cloud-storage-download</div>
<div class="fontclass">.uf-cloud-down</div>
</li>
<li>
<i class="icon uf uf-cloud-up"></i>
<div class="name">cloud-storage-uploading-option</div>
<div class="fontclass">.uf-cloud-up</div>
</li>
<li>
<i class="icon uf uf-bubble"></i>
<div class="name">comment-black-oval-bubble-shape</div>
<div class="fontclass">.uf-bubble</div>
</li>
<li>
<i class="icon uf uf-bubble-o"></i>
<div class="name">comment-white-oval-bubble</div>
<div class="fontclass">.uf-bubble-o</div>
</li>
<li>
<i class="icon uf uf-copy"></i>
<div class="name">copy-document</div>
<div class="fontclass">.uf-copy</div>
</li>
<li>
<i class="icon uf uf-correct-2"></i>
<div class="name">correct-symbol</div>
<div class="fontclass">.uf-correct-2</div>
</li>
<li>
<i class="icon uf uf-2arrow-left"></i>
<div class="name">double-left-chevron</div>
<div class="fontclass">.uf-2arrow-left</div>
</li>
<li>
<i class="icon uf uf-arrow-down-2"></i>
<div class="name">down-arrow</div>
<div class="fontclass">.uf-arrow-down-2</div>
</li>
<li>
<i class="icon uf uf-download"></i>
<div class="name">download-to-storage-drive</div>
<div class="fontclass">.uf-download</div>
</li>
<li>
<i class="icon uf uf-earth"></i>
<div class="name">earth-globe</div>
<div class="fontclass">.uf-earth</div>
</li>
<li>
<i class="icon uf uf-mail-o"></i>
<div class="name">envelope-of-white-paper</div>
<div class="fontclass">.uf-mail-o</div>
</li>
<li>
<i class="icon uf uf-mail"></i>
<div class="name">envelope</div>
<div class="fontclass">.uf-mail</div>
</li>
<li>
<i class="icon uf uf-exc"></i>
<div class="name">exclamation</div>
<div class="fontclass">.uf-exc</div>
</li>
<li>
<i class="icon uf uf-externallink"></i>
<div class="name">external-link-symbol</div>
<div class="fontclass">.uf-externallink</div>
</li>
<li>
<i class="icon uf uf-video"></i>
<div class="name">facetime-button</div>
<div class="fontclass">.uf-video</div>
</li>
<li>
<i class="icon uf uf-films"></i>
<div class="name">film-strip-with-two-photograms</div>
<div class="fontclass">.uf-films</div>
</li>
<li>
<i class="icon uf uf-folder"></i>
<div class="name">folder-closed-black-shape</div>
<div class="fontclass">.uf-folder</div>
</li>
<li>
<i class="icon uf uf-folder-o"></i>
<div class="name">folder-white-shape</div>
<div class="fontclass">.uf-folder-o</div>
</li>
<li>
<i class="icon uf uf-4square"></i>
<div class="name">four-black-squares</div>
<div class="fontclass">.uf-4square</div>
</li>
<li>
<i class="icon uf uf-gift"></i>
<div class="name">gift-box</div>
<div class="fontclass">.uf-gift</div>
</li>
<li>
<i class="icon uf uf-github-c"></i>
<div class="name">github-logo</div>
<div class="fontclass">.uf-github-c</div>
</li>
<li>
<i class="icon uf uf-github-s"></i>
<div class="name">github-sign</div>
<div class="fontclass">.uf-github-s</div>
</li>
<li>
<i class="icon uf uf-heart-o"></i>
<div class="name">heart-shape-outline</div>
<div class="fontclass">.uf-heart-o</div>
</li>
<li>
<i class="icon uf uf-heart"></i>
<div class="name">heart-shape-silhouette</div>
<div class="fontclass">.uf-heart</div>
</li>
<li>
<i class="icon uf uf-home"></i>
<div class="name">home</div>
<div class="fontclass">.uf-home</div>
</li>
<li>
<i class="icon uf uf-i-c-2"></i>
<div class="name">information-button</div>
<div class="fontclass">.uf-i-c-2</div>
</li>
<li>
<i class="icon uf uf-i"></i>
<div class="name">information-symbol</div>
<div class="fontclass">.uf-i</div>
</li>
<li>
<i class="icon uf uf-triangle-left"></i>
<div class="name">left-arrow</div>
<div class="fontclass">.uf-triangle-left</div>
</li>
<li>
<i class="icon uf uf-symlist"></i>
<div class="name">listing-option</div>
<div class="fontclass">.uf-symlist</div>
</li>
<li>
<i class="icon uf uf-arrow-left-2"></i>
<div class="name">long-arrow-pointing-to-left</div>
<div class="fontclass">.uf-arrow-left-2</div>
</li>
<li>
<i class="icon uf uf-arrow-right-2"></i>
<div class="name">long-arrow-pointing-to-the-right</div>
<div class="fontclass">.uf-arrow-right-2</div>
</li>
<li>
<i class="icon uf uf-arrow-up-2"></i>
<div class="name">long-arrow-pointing-up</div>
<div class="fontclass">.uf-arrow-up-2</div>
</li>
<li>
<i class="icon uf uf-reduce-c"></i>
<div class="name">minus-sign-inside-a-black-circle</div>
<div class="fontclass">.uf-reduce-c</div>
</li>
<li>
<i class="icon uf uf-reduce-s"></i>
<div class="name">minus-sign-inside-a-black-rounded-square-shape</div>
<div class="fontclass">.uf-reduce-s</div>
</li>
<li>
<i class="icon uf uf-minus"></i>
<div class="name">minus-symbol</div>
<div class="fontclass">.uf-minus</div>
</li>
<li>
<i class="icon uf uf-mobile"></i>
<div class="name">mobile-phone</div>
<div class="fontclass">.uf-mobile</div>
</li>
<li>
<i class="icon uf uf-bell-o"></i>
<div class="name">musical-bell-outline</div>
<div class="fontclass">.uf-bell-o</div>
</li>
<li>
<i class="icon uf uf-9square"></i>
<div class="name">nine-black-tiles</div>
<div class="fontclass">.uf-9square</div>
</li>
<li>
<i class="icon uf uf-numlist"></i>
<div class="name">numbered-list</div>
<div class="fontclass">.uf-numlist</div>
</li>
<li>
<i class="icon uf uf-folderopen-o"></i>
<div class="name">open-folder-outline</div>
<div class="fontclass">.uf-folderopen-o</div>
</li>
<li>
<i class="icon uf uf-treefolderopen"></i>
<div class="name">open-folder</div>
<div class="fontclass">.uf-treefolderopen</div>
</li>
<li>
<i class="icon uf uf-mac"></i>
<div class="name">open-laptop-computer</div>
<div class="fontclass">.uf-mac</div>
</li>
<li>
<i class="icon uf uf-camera"></i>
<div class="name">photo-camera</div>
<div class="fontclass">.uf-camera</div>
</li>
<li>
<i class="icon uf uf-picture"></i>
<div class="name">picture</div>
<div class="fontclass">.uf-picture</div>
</li>
<li>
<i class="icon uf uf-play"></i>
<div class="name">play-sign</div>
<div class="fontclass">.uf-play</div>
</li>
<li>
<i class="icon uf uf-play-o"></i>
<div class="name">play-video-button</div>
<div class="fontclass">.uf-play-o</div>
</li>
<li>
<i class="icon uf uf-qm-c"></i>
<div class="name">question-mark-on-a-circular-black-background</div>
<div class="fontclass">.uf-qm-c</div>
</li>
<li>
<i class="icon uf uf-qm"></i>
<div class="name">question-sign</div>
<div class="fontclass">.uf-qm</div>
</li>
<li>
<i class="icon uf uf-navmenu-light"></i>
<div class="name">reorder-option</div>
<div class="fontclass">.uf-navmenu-light</div>
</li>
<li>
<i class="icon uf uf-settings"></i>
<div class="name">settings</div>
<div class="fontclass">.uf-settings</div>
</li>
<li>
<i class="icon uf uf-cart"></i>
<div class="name">shopping-cart-black-shape</div>
<div class="fontclass">.uf-cart</div>
</li>
<li>
<i class="icon uf uf-histogram"></i>
<div class="name">signal-bars</div>
<div class="fontclass">.uf-histogram</div>
</li>
<li>
<i class="icon uf uf-finetune"></i>
<div class="name">sort-arrows-couple-pointing-up-and-down</div>
<div class="fontclass">.uf-finetune</div>
</li>
<li>
<i class="icon uf uf-sortup"></i>
<div class="name">sort-by-attributes-interface-button-option</div>
<div class="fontclass">.uf-sortup</div>
</li>
<li>
<i class="icon uf uf-sortdown"></i>
<div class="name">sort-by-attributes</div>
<div class="fontclass">.uf-sortdown</div>
</li>
<li>
<i class="icon uf uf-sort19"></i>
<div class="name">sort-by-numeric-order</div>
<div class="fontclass">.uf-sort19</div>
</li>
<li>
<i class="icon uf uf-sort91"></i>
<div class="name">sort-by-order</div>
<div class="fontclass">.uf-sort91</div>
</li>
<li>
<i class="icon uf uf-za"></i>
<div class="name">sort-reverse-alphabetical-order</div>
<div class="fontclass">.uf-za</div>
</li>
<li>
<i class="icon uf uf-star-o"></i>
<div class="name">star-1</div>
<div class="fontclass">.uf-star-o</div>
</li>
<li>
<i class="icon uf uf-star-2"></i>
<div class="name">star-half-empty</div>
<div class="fontclass">.uf-star-2</div>
</li>
<li>
<i class="icon uf uf-star"></i>
<div class="name">star</div>
<div class="fontclass">.uf-star</div>
</li>
<li>
<i class="icon uf uf-luggage"></i>
<div class="name">suitcase-with-white-details</div>
<div class="fontclass">.uf-luggage</div>
</li>
<li>
<i class="icon uf uf-table"></i>
<div class="name">table-grid</div>
<div class="fontclass">.uf-table</div>
</li>
<li>
<i class="icon uf uf-tel"></i>
<div class="name">telephone-handle-silhouette</div>
<div class="fontclass">.uf-tel</div>
</li>
<li>
<i class="icon uf uf-tel-s"></i>
<div class="name">telephone-symbol-button</div>
<div class="fontclass">.uf-tel-s</div>
</li>
<li>
<i class="icon uf uf-terminal"></i>
<div class="name">terminal</div>
<div class="fontclass">.uf-terminal</div>
</li>
<li>
<i class="icon uf uf-file"></i>
<div class="name">text-file-1</div>
<div class="fontclass">.uf-file</div>
</li>
<li>
<i class="icon uf uf-file-o"></i>
<div class="name">text-file</div>
<div class="fontclass">.uf-file-o</div>
</li>
<li>
<i class="icon uf uf-3dot-h"></i>
<div class="name">three-small-square-shapes</div>
<div class="fontclass">.uf-3dot-h</div>
</li>
<li>
<i class="icon uf uf-time-c-o"></i>
<div class="name">time</div>
<div class="fontclass">.uf-time-c-o</div>
</li>
<li>
<i class="icon uf uf-upload"></i>
<div class="name">upload</div>
<div class="fontclass">.uf-upload</div>
</li>
<li>
<i class="icon uf uf-3dot-v"></i>
<div class="name">vertical-ellipsis</div>
<div class="fontclass">.uf-3dot-v</div>
</li>
<li>
<i class="icon uf uf-rmb"></i>
<div class="name">yen-symbol</div>
<div class="fontclass">.uf-rmb</div>
</li>
<li>
<i class="icon uf uf-arrow-c-o-up"></i>
<div class="name">箭头</div>
<div class="fontclass">.uf-arrow-c-o-up</div>
</li>
<li>
<i class="icon uf uf-reject-2"></i>
<div class="name">驳回</div>
<div class="fontclass">.uf-reject-2</div>
</li>
<li>
<i class="icon uf uf-barcode"></i>
<div class="name">barcode-1</div>
<div class="fontclass">.uf-barcode</div>
</li>
<li>
<i class="icon uf uf-zoom-out"></i>
<div class="name">zoom-out</div>
<div class="fontclass">.uf-zoom-out</div>
</li>
<li>
<i class="icon uf uf-exc-t-o"></i>
<div class="name">三角叹号</div>
<div class="fontclass">.uf-exc-t-o</div>
</li>
<li>
<i class="icon uf uf-pass"></i>
<div class="name">通过</div>
<div class="fontclass">.uf-pass</div>
</li>
<li>
<i class="icon uf uf-flow"></i>
<div class="name">关系网络</div>
<div class="fontclass">.uf-flow</div>
</li>
<li>
<i class="icon uf uf-add-c"></i>
<div class="name"></div>
<div class="fontclass">.uf-add-c</div>
</li>
<li>
<i class="icon uf uf-arrow-c-o-right-2"></i>
<div class="name">箭头</div>
<div class="fontclass">.uf-arrow-c-o-right-2</div>
</li>
<li>
<i class="icon uf uf-shelf-on"></i>
<div class="name">上架</div>
<div class="fontclass">.uf-shelf-on</div>
</li>
<li>
<i class="icon uf uf-shelf-off"></i>
<div class="name">下架</div>
<div class="fontclass">.uf-shelf-off</div>
</li>
<li>
<i class="icon uf uf-file-o-2"></i>
<div class="name">文件</div>
<div class="fontclass">.uf-file-o-2</div>
</li>
<li>
<i class="icon uf uf-truck-o"></i>
<div class="name">到货确认</div>
<div class="fontclass">.uf-truck-o</div>
</li>
<li>
<i class="icon uf uf-super"></i>
<div class="name">功能强大</div>
<div class="fontclass">.uf-super</div>
</li>
<li>
<i class="icon uf uf-equipment"></i>
<div class="name">设备</div>
<div class="fontclass">.uf-equipment</div>
</li>
<li>
<i class="icon uf uf-arrow-c-o-left-2"></i>
<div class="name">箭头</div>
<div class="fontclass">.uf-arrow-c-o-left-2</div>
</li>
<li>
<i class="icon uf uf-files-o"></i>
<div class="name">资源文件</div>
<div class="fontclass">.uf-files-o</div>
</li>
<li>
<i class="icon uf uf-cloud-o"></i>
<div class="name"></div>
<div class="fontclass">.uf-cloud-o</div>
</li>
<li>
<i class="icon uf uf-rmb-s-o-2"></i>
<div class="name">对账</div>
<div class="fontclass">.uf-rmb-s-o-2</div>
</li>
<li>
<i class="icon uf uf-3dot-c-o"></i>
<div class="name">管理中心</div>
<div class="fontclass">.uf-3dot-c-o</div>
</li>
<li>
<i class="icon uf uf-dafeng"></i>
<div class="name">天气_大风</div>
<div class="fontclass">.uf-dafeng</div>
</li>
<li>
<i class="icon uf uf-baoxue"></i>
<div class="name">天气_暴雪</div>
<div class="fontclass">.uf-baoxue</div>
</li>
<li>
<i class="icon uf uf-bingbao"></i>
<div class="name">天气_冰雹</div>
<div class="fontclass">.uf-bingbao</div>
</li>
<li>
<i class="icon uf uf-fengbao"></i>
<div class="name">天气_风暴</div>
<div class="fontclass">.uf-fengbao</div>
</li>
<li>
<i class="icon uf uf-xiaoyu"></i>
<div class="name">天气_小雨</div>
<div class="fontclass">.uf-xiaoyu</div>
</li>
<li>
<i class="icon uf uf-zhenxue"></i>
<div class="name">天气_阵雪</div>
<div class="fontclass">.uf-zhenxue</div>
</li>
<li>
<i class="icon uf uf-zhongyu"></i>
<div class="name">天气_中雨</div>
<div class="fontclass">.uf-zhongyu</div>
</li>
<li>
<i class="icon uf uf-es"></i>
<div class="name">ES</div>
<div class="fontclass">.uf-es</div>
</li>
<li>
<i class="icon uf uf-flow-o-2"></i>
<div class="name">流程</div>
<div class="fontclass">.uf-flow-o-2</div>
</li>
<li>
<i class="icon uf uf-activate-2"></i>
<div class="name">激活-01</div>
<div class="fontclass">.uf-activate-2</div>
</li>
<li>
<i class="icon uf uf-flow-o"></i>
<div class="name">流程</div>
<div class="fontclass">.uf-flow-o</div>
</li>
<li>
<i class="icon uf uf-bulb-2"></i>
<div class="name">技术支持</div>
<div class="fontclass">.uf-bulb-2</div>
</li>
<li>
<i class="icon uf uf-mi-c"></i>
<div class="name">必填</div>
<div class="fontclass">.uf-mi-c</div>
</li>
<li>
<i class="icon uf uf-top-up"></i>
<div class="name">返回顶部</div>
<div class="fontclass">.uf-top-up</div>
</li>
<li>
<i class="icon uf uf-creditcard"></i>
<div class="name">credit-card</div>
<div class="fontclass">.uf-creditcard</div>
</li>
<li>
<i class="icon uf uf-align-center"></i>
<div class="name">align-center</div>
<div class="fontclass">.uf-align-center</div>
</li>
<li>
<i class="icon uf uf-align-justify"></i>
<div class="name">align-justify</div>
<div class="fontclass">.uf-align-justify</div>
</li>
<li>
<i class="icon uf uf-align-left"></i>
<div class="name">align-left</div>
<div class="fontclass">.uf-align-left</div>
</li>
<li>
<i class="icon uf uf-align-right"></i>
<div class="name">align-right</div>
<div class="fontclass">.uf-align-right</div>
</li>
<li>
<i class="icon uf uf-ju-c-o"></i>
<div class="name"></div>
<div class="fontclass">.uf-ju-c-o</div>
</li>
<li>
<i class="icon uf uf-truck"></i>
<div class="name">货到付款</div>
<div class="fontclass">.uf-truck</div>
</li>
<li>
<i class="icon uf uf-setting-c-o"></i>
<div class="name">流程</div>
<div class="fontclass">.uf-setting-c-o</div>
</li>
<li>
<i class="icon uf uf-users-o"></i>
<div class="name">楼宇图标_用户组</div>
<div class="fontclass">.uf-users-o</div>
</li>
<li>
<i class="icon uf uf-bag-s-o"></i>
<div class="name">商品</div>
<div class="fontclass">.uf-bag-s-o</div>
</li>
<li>
<i class="icon uf uf-cai-s"></i>
<div class="name">采购</div>
<div class="fontclass">.uf-cai-s</div>
</li>
<li>
<i class="icon uf uf-listcheck"></i>
<div class="name">定标</div>
<div class="fontclass">.uf-listcheck</div>
</li>
<li>
<i class="icon uf uf-users"></i>
<div class="name"></div>
<div class="fontclass">.uf-users</div>
</li>
<li>
<i class="icon uf uf-i-c"></i>
<div class="name">查看详情</div>
<div class="fontclass">.uf-i-c</div>
</li>
<li>
<i class="icon uf uf-building-o"></i>
<div class="name">企业信息</div>
<div class="fontclass">.uf-building-o</div>
</li>
<li>
<i class="icon uf uf-rmb-s-o"></i>
<div class="name">报价管理</div>
<div class="fontclass">.uf-rmb-s-o</div>
</li>
<li>
<i class="icon uf uf-reject"></i>
<div class="name">已驳回</div>
<div class="fontclass">.uf-reject</div>
</li>
<li>
<i class="icon uf uf-9dot"></i>
<div class="name">菜单</div>
<div class="fontclass">.uf-9dot</div>
</li>
<li>
<i class="icon uf uf-gateway"></i>
<div class="name">网关</div>
<div class="fontclass">.uf-gateway</div>
</li>
<li>
<i class="icon uf uf-ticket-s-o"></i>
<div class="name">发票</div>
<div class="fontclass">.uf-ticket-s-o</div>
</li>
<li>
<i class="icon uf uf-userset"></i>
<div class="name">管理中心</div>
<div class="fontclass">.uf-userset</div>
</li>
<li>
<i class="icon uf uf-puzzle-o"></i>
<div class="name">组件</div>
<div class="fontclass">.uf-puzzle-o</div>
</li>
<li>
<i class="icon uf uf-box-o"></i>
<div class="name">物料管理</div>
<div class="fontclass">.uf-box-o</div>
</li>
<li>
<i class="icon uf uf-bulb"></i>
<div class="name">激活</div>
<div class="fontclass">.uf-bulb</div>
</li>
<li>
<i class="icon uf uf-exc-t"></i>
<div class="name">感叹号_icon</div>
<div class="fontclass">.uf-exc-t</div>
</li>
<li>
<i class="icon uf uf-rmb-c"></i>
<div class="name">报价</div>
<div class="fontclass">.uf-rmb-c</div>
</li>
<li>
<i class="icon uf uf-table-s-o"></i>
<div class="name">发票</div>
<div class="fontclass">.uf-table-s-o</div>
</li>
<li>
<i class="icon uf uf-umbrella-o"></i>
<div class="name"></div>
<div class="fontclass">.uf-umbrella-o</div>
</li>
<li>
<i class="icon uf uf-dropbox"></i>
<div class="name">dropbox</div>
<div class="fontclass">.uf-dropbox</div>
</li>
<li>
<i class="icon uf uf-search-light"></i>
<div class="name">搜索-搜索</div>
<div class="fontclass">.uf-search-light</div>
</li>
<li>
<i class="icon uf uf-cart-o"></i>
<div class="name">shopping-cart-black-shape</div>
<div class="fontclass">.uf-cart-o</div>
</li>
<li>
<i class="icon uf uf-kero-col"></i>
<div class="name">kero</div>
<div class="fontclass">.uf-kero-col</div>
</li>
<li>
<i class="icon uf uf-uba-col"></i>
<div class="name">uba</div>
<div class="fontclass">.uf-uba-col</div>
</li>
<li>
<i class="icon uf uf-tinperzc-col"></i>
<div class="name">tinperzc</div>
<div class="fontclass">.uf-tinperzc-col</div>
</li>
<li>
<i class="icon uf uf-tinperzch-col"></i>
<div class="name">tinperzch</div>
<div class="fontclass">.uf-tinperzch-col</div>
</li>
<li>
<i class="icon uf uf-iuap-col"></i>
<div class="name">iuap</div>
<div class="fontclass">.uf-iuap-col</div>
</li>
<li>
<i class="icon uf uf-iuapdesign-col"></i>
<div class="name">iuapdesignz</div>
<div class="fontclass">.uf-iuapdesign-col</div>
</li>
<li>
<i class="icon uf uf-bee-col"></i>
<div class="name">bee</div>
<div class="fontclass">.uf-bee-col</div>
</li>
<li>
<i class="icon uf uf-neoui-col"></i>
<div class="name">neoui</div>
<div class="fontclass">.uf-neoui-col</div>
</li>
<li>
<i class="icon uf uf-sparrow-col"></i>
<div class="name">sparrow</div>
<div class="fontclass">.uf-sparrow-col</div>
</li>
<li>
<i class="icon uf uf-tinpercn-col"></i>
<div class="name">tinpercn</div>
<div class="fontclass">.uf-tinpercn-col</div>
</li>
<li>
<i class="icon uf uf-tinperen-col"></i>
<div class="name">tinperen</div>
<div class="fontclass">.uf-tinperen-col</div>
</li>
<li>
<i class="icon uf uf-arrow-up"></i>
<div class="name">angle-arrow-down</div>
<div class="fontclass">.uf-arrow-up</div>
</li>
<li>
<i class="icon uf uf-mailsym"></i>
<div class="name">webmail</div>
<div class="fontclass">.uf-mailsym</div>
</li>
<li>
<i class="icon uf uf-print"></i>
<div class="name">办公用品</div>
<div class="fontclass">.uf-print</div>
</li>
<li>
<i class="icon uf uf-ticket-3"></i>
<div class="name">报销</div>
<div class="fontclass">.uf-ticket-3</div>
</li>
<li>
<i class="icon uf uf-loan"></i>
<div class="name">借款</div>
<div class="fontclass">.uf-loan</div>
</li>
<li>
<i class="icon uf uf-ticket-2"></i>
<div class="name">凭证中心</div>
<div class="fontclass">.uf-ticket-2</div>
</li>
<li>
<i class="icon uf uf-offwork"></i>
<div class="name">请假</div>
<div class="fontclass">.uf-offwork</div>
</li>
<li>
<i class="icon uf uf-todolist"></i>
<div class="name">待办</div>
<div class="fontclass">.uf-todolist</div>
</li>
<li>
<i class="icon uf uf-personin"></i>
<div class="name">员工入职</div>
<div class="fontclass">.uf-personin</div>
</li>
<li>
<i class="icon uf uf-ticket"></i>
<div class="name">票务</div>
<div class="fontclass">.uf-ticket</div>
</li>
<li>
<i class="icon uf uf-linechart"></i>
<div class="name">小icon-图表</div>
<div class="fontclass">.uf-linechart</div>
</li>
<li>
<i class="icon uf uf-4leaf"></i>
<div class="name">应用中心</div>
<div class="fontclass">.uf-4leaf</div>
</li>
<li>
<i class="icon uf uf-listset"></i>
<div class="name">信息维护</div>
<div class="fontclass">.uf-listset</div>
</li>
<li>
<i class="icon uf uf-qi-c-o"></i>
<div class="name">企业认证</div>
<div class="fontclass">.uf-qi-c-o</div>
</li>
<li>
<i class="icon uf uf-exc-c"></i>
<div class="name">叹号</div>
<div class="fontclass">.uf-exc-c</div>
</li>
<li>
<i class="icon uf uf-plug-o"></i>
<div class="name">热拔插</div>
<div class="fontclass">.uf-plug-o</div>
</li>
<li>
<i class="icon uf uf-search-s"></i>
<div class="name">搜索</div>
<div class="fontclass">.uf-search-s</div>
</li>
<li>
<i class="icon uf uf-treeadd"></i>
<div class="name">tree-new-sbling-node</div>
<div class="fontclass">.uf-treeadd</div>
</li>
</ul>
</div>
/* 清除浮动 */
.ks-clear:after,
.clear:after {
content: '\20';
display: block;
height: 0;
clear: both;
}
.ks-clear,
.clear {
overflow:hidden;
*zoom: 1;
}
.main {
padding: 30px 100px;
}
.main h1 {
font-size: 36px;
color: #333;
text-align: left;
margin-bottom: 30px;
border-bottom: 1px solid #eee;
}
.helps {
margin-top: 40px;
}
.helps pre {
padding: 20px;
margin: 10px 0;
border: solid 1px #e7e1cd;
background-color: #fffdef;
overflow: auto;
}
.icon_lists li {
float: left;
width: 100px;
height: 100px;
text-align: center;
list-style: none;
}
.icon_lists .icon {
font-size: 32px;
line-height: 60px;
margin: 10px 0;
color: #616161;
-webkit-transition: font-size 0.25s ease-out 0s;
-moz-transition: font-size 0.25s ease-out 0s;
transition: font-size 0.25s ease-out 0s;
}
.icon_lists li .name{
display:none;
}
.icon_lists li .fontclass{
font-size:12px!important;
color:#616161;
}
.icon_lists .icon:hover {
font-size: 50px;
}

图片

一个矩形图片可以显示成圆形图片、圆角图片,除此之外还可以添加多种颜色的边框。这个功能是不是很炫,赶快看下具体的示例吧!

图片形状

img标签上添加img-rounded可以显示成圆角图片,添加img-circle可以显示成圆形图片

... ... ...
<img class="img-rounded" width="150" height="150" src="/assets/static/img/img1.png" alt="...">
<img class="img-circle" width="150" height="150" src="/assets/static/img/img1.png" alt="...">
<img width="150" height="150" src="/assets/static/img/img1.png" alt="...">

边框图片

img标签上添加样式img-bordered即可实现一个灰色边框的图片。在上面的基础添加img-bordered-orange可以显示警告黄色边框,添加img-bordered-green实现成功绿色边框

... ... ...
<img class="img-rounded img-bordered img-bordered-primary" width="150" height="150" src="/assets/static/img/img1.png" alt="...">
<img class="img-circle img-bordered img-bordered-orange" width="150" height="150" src="/assets/static/img/img1.png" alt="...">
<img class="img-rounded img-bordered img-bordered-green" width="150" height="150" src="/assets/static/img/img1.png" alt="...">

输入框

基础

在普通的input元素上添加u-form-control样式

<input type="text" class="u-form-control" id="exampleInput3" placeholder="jane.doe@example.com">

禁止输入

在普通输入框中添加disabled 属性

<input type="text" class="u-form-control" id="exampleInput3" disabled placeholder="jane.doe@example.com">

带后缀

<div class="u-input-group u-has-feedback">
<input type="email" class="u-form-control" placeholder="jane.doe@example.com">
<span class="u-form-control-feedback uf uf-search-light-2"></span>
</div>

必输项

当input框失去焦点时,校验输入的内容,如果内容长度大于0则隐藏必输字符*,否则显示

*
<div class="u-form-group">
<label for="exampleInput3">必输:</label>
<div class="u-input-group u-has-feedback must-in">
<div class="u-input-group-before " style="color: red;">*</div>
<input type="text" class="u-form-control" id="exampleInput3" placeholder="jane.doe@example.com">
<span class="u-form-control-feedback uf uf-search-light-2"></span>
</div>
</div>
var mustinDom=document.querySelectorAll('.must-in input');
var mustinlen=mustinDom.length;
var checkInput=function(){
//console.log(this+'---'+this.previousSibling+'----'+this.previousSibling.innerHTML);
if(this.value.length>0){
this.previousElementSibling.innerHTML='';
}else{
this.previousElementSibling.innerHTML='*';
}
}
if(mustinlen>0){
for(var i=0;i< mustinlen;i++){
u.on(mustinDom[i],'blur',checkInput);
u.on(mustinDom[i],'keydown',function(){
this.previousElementSibling.innerHTML='';
});
}
}

标签

预定义样式

不同背景具有相应的样式名
例如 u-tab-default 默认灰色

Default Primary Success Info Warning Danger Dark
<span class="u-tag u-tag-default">Default</span>
<span class="u-tag u-tag-primary">Primary</span>
<span class="u-tag u-tag-success">Success</span>
<span class="u-tag u-tag-info">Info</span>
<span class="u-tag u-tag-warning">Warning</span>
<span class="u-tag u-tag-danger">Danger</span>
<span class="u-tag u-tag-dark">Dark</span>

圆角

span 标签上添加样式 u-tag-round

Default Primary Success Info Warning Danger Dark
<span class="u-tag u-tag-default u-tag-round">Default</span>
<span class="u-tag u-tag-primary u-tag-round">Primary</span>
<span class="u-tag u-tag-success u-tag-round">Success</span>
<span class="u-tag u-tag-info u-tag-round">Info</span>
<span class="u-tag u-tag-warning u-tag-round">Warning</span>
<span class="u-tag u-tag-danger u-tag-round">Danger</span>
<span class="u-tag u-tag-dark u-tag-round">Dark</span>

边框标签

span 标签上添加样式 u-tag-outline

Default Primary Success Info Warning Danger Dark
<span class="u-tag u-tag-default u-tag-outline">Default</span>
<span class="u-tag u-tag-primary u-tag-outline">Primary</span>
<span class="u-tag u-tag-success u-tag-outline">Success</span>
<span class="u-tag u-tag-info u-tag-outline">Info</span>
<span class="u-tag u-tag-warning u-tag-outline">Warning</span>
<span class="u-tag u-tag-danger u-tag-outline">Danger</span>
<span class="u-tag u-tag-dark u-tag-outline">Dark</span>

尺寸

span标签 添加 .u-tag-lg.u-tag-sm类,来改变标签大小.

大标签 默认大小 小标签
<span class="u-tag u-tag-lg u-tag-primary">大标签</span>
<span class="u-tag u-tag-primary">默认大小</span>
<span class="u-tag u-tag-sm u-tag-primary">小标签</span>

布局

布局的栅格化系统使用了12列响应式网格布局。其工作原理如下:

class 区间
u-col-xs-* 手机、小于768px
u-col-sm-* 平板、大于等于768px
u-col-md-* 桌面显示器、大于等于992px
u-col-lg-* 大桌面显示器、大于等于992px

基础

使用单一的一组Rowcol栅格组件,就可以创建一个基本的栅格系统。所有的列col必须放在Row中。

4
4
4
6
4
2
<div class="u-container-fluid example">
<div class="u-row">
<div class="u-col-4"><div class="example-col">4</div></div>
<div class="u-col-4"><div class="example-col">4</div></div>
<div class="u-col-4"><div class="example-col">4</div></div>
</div>
<div class="u-row">
<div class="u-col-6"><div class="example-col">6</div></div>
<div class="u-col-4"><div class="example-col">4</div></div>
<div class="u-col-2"><div class="example-col">2</div></div>
</div>
</div>
.example {
margin-top: 20px;
margin-bottom: 20px;
}
.example .example-col {
margin-bottom: 20px;
min-height: 0;
padding: 10px 15px 12px;
background-color: rgb(189, 189, 189);
border-radius: 0;
}

移动和桌面屏幕

是否不希望在小屏幕设备上所有的列都堆叠在一起?那就使用针对超小屏幕和中等屏幕设备所定义的类吧,即 .u-col-xs-*.u-col-md-*

u-col-xs-12 u-col-md-8
u-col-xs-6 u-col-md-4
u-col-xs-6 u-col-md-4
u-col-xs-6 u-col-md-4
u-col-xs-6 u-col-md-4
<div class="u-container-fluid example">
<div class="u-row">
<div class="u-col-xs-12 u-col-md-8">
<div class="example-col">u-col-xs-12 u-col-md-8</div>
</div>
<div class="u-col-xs-6 u-col-md-4">
<div class="example-col">u-col-xs-6 u-col-md-4</div>
</div>
<div class="u-col-xs-6 u-col-md-4">
<div class="example-col">u-col-xs-6 u-col-md-4</div>
</div>
<div class="u-col-xs-6 u-col-md-4">
<div class="example-col">u-col-xs-6 u-col-md-4</div>
</div>
<div class="u-col-xs-6 u-col-md-4">
<div class="example-col">u-col-xs-6 u-col-md-4</div>
</div>
</div>
</div>
.example {
margin-top: 20px;
margin-bottom: 20px;
}
.example .example-col {
margin-bottom: 20px;
min-height: 0;
padding: 10px 15px 12px;
background-color: rgb(189, 189, 189);
border-radius: 0;
}

响应式列重置

即便有上面给出的栅格class,你也不免会碰到一些问题,例如,在某些阈值时,某些列可能会出现比别的列高的情况。为了克服这一问题,建议联合使用 .clearfix 和 响应式工具类(参考辅助类的响应式布局)。

.col-xs-6 .col-sm-3我的内容比较多。修改屏幕的宽度或者在手机端可以看到clearfix所起到的效果
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
<div class="u-container-fluid example">
<div class="u-row">
<div class="u-col-xs-6 u-col-sm-3">
<div class="example-col">.col-xs-6 .col-sm-3我的内容比较多。修改屏幕的宽度或者在手机端可以看到clearfix所起到的效果</div>
</div>
<div class="u-col-xs-6 u-col-sm-3">
<div class="example-col">.col-xs-6 .col-sm-3</div>
</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs-block"></div>
<div class="u-col-xs-6 u-col-sm-3">
<div class="example-col">.col-xs-6 .col-sm-3</div>
</div>
<div class="u-col-xs-6 u-col-sm-3">
<div class="example-col">.col-xs-6 .col-sm-3</div>
</div>
</div>
</div>
.example {
margin-top: 20px;
margin-bottom: 20px;
}
.example .example-col {
margin-bottom: 20px;
min-height: 0;
padding: 10px 15px 12px;
background-color: rgb(189, 189, 189);
border-radius: 0;
}

列嵌套

为了在内容中嵌套默认的网格,请添加一个新的 .u-row,并在一个已有的 .u-col-md-* 列内添加一组 .u-col-md-* 列。被嵌套的行应包含一组列,这组列个数不能超过12(其实,没有要求你必须占满12列)。

Level 1: .col-sm-9
Level 2: .col-xs-8 .col-sm-6
Level 2: .col-xs-4 .col-sm-6
<div class="u-container-fluid example">
<div class="u-row">
<div class="u-col-sm-9">
<div class="example-col">Level 1: .col-sm-9
<div class="u-row">
<div class="u-col-xs-8 u-col-sm-6">
<div class="example-col-sub">Level 2: .col-xs-8 .col-sm-6</div>
</div>
<div class="u-col-xs-4 u-col-sm-6">
<div class="example-col-sub">Level 2: .col-xs-4 .col-sm-6</div>
</div>
</div>
</div>
</div>
</div>
</div>
.example {
margin-top: 20px;
margin-bottom: 20px;
}
.example .example-col {
margin-bottom: 20px;
min-height: 0;
padding: 10px 15px 12px;
background-color: rgb(189, 189, 189);
border-radius: 0;
}
.example .example-col-sub {
background-color: rgb(0, 189, 189);
}

列偏移

为了在大屏幕显示器上使用偏移,请使用 .col-md-offset-*类。这些类会把一个列的左外边距(margin)增加 列,其中 范围是从 1 到 11。例如,.u-col-md-offset-4类将 .u-col-md-4元素向右侧偏移了4个列(column)的宽度。

.u-col-md-4 .u-col-md-offset-4
.u-col-md-4
<div class="u-container-fluid example">
<div class="u-row">
<div class="u-col-md-4 u-col-md-offset-4">
<div class="example-col">.u-col-md-4 .u-col-md-offset-4</div>
</div>
<div class="u-col-md-4">
<div class="example-col">.u-col-md-4</div>
</div>
</div>
</div>
.example {
margin-top: 20px;
margin-bottom: 20px;
}
.example .example-col {
margin-bottom: 20px;
min-height: 0;
padding: 10px 15px 12px;
background-color: rgb(189, 189, 189);
border-radius: 0;
}

列排序

使用.col-md-push-* and .col-md-pull-*能改变我们的内置网格列的顺序。*越大值越大,push值到左边距,pull值到右边距。

.u-col-md-8 .u-col-md-push-4
.u-col-md-4 .u-col-md-pull-8
<div class="u-container-fluid example">
<div class="u-row">
<div class="u-col-md-8 u-col-md-push-4">
<div class="example-col">.u-col-md-8 .u-col-md-push-4</div>
</div>
<div class="u-col-md-4 u-col-md-pull-8">
<div class="example-col">.u-col-md-4 .u-col-md-pull-8</div>
</div>
</div>
</div>
.example {
margin-top: 20px;
margin-bottom: 20px;
}
.example .example-col {
margin-bottom: 20px;
min-height: 0;
padding: 10px 15px 12px;
background-color: rgb(189, 189, 189);
border-radius: 0;
}

表格

表格控件提供了丰富的表格样式,其中有常用表格(u-table)、基本表格(u-table-base)、悬浮表格、边框表格、斑马线表格

常用表格:在基本表格的基础上添加了边框、表头背景色、悬浮特效。

其余表格控件样式也都是基于基本表格来实现的。

基础

基本的表格没有外边框、悬浮特效、只是一个最基本的表格,需要开发者在table标签上添加样式u-table-base

# 姓氏 用户名 角色
1 Teagan Prohaska @Elijah admin
2 Andy Gaylord @Ramiro member
3 Veronica Gusikowski @Maxime developer
4 Bruce Rogahn @Maggio supporter
5 Carolina Hickle @Hammes member
6 Madaline Eichmann @Amaya supporter
<table class="u-table-base">
<thead>
<tr>
<th>#</th>
<th></th>
<th>姓氏</th>
<th>用户名</th>
<th>角色</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Teagan</td>
<td>Prohaska</td>
<td>@Elijah</td>
<td>
admin
</td>
</tr>
<tr>
<td>2</td>
<td>Andy</td>
<td>Gaylord</td>
<td>@Ramiro</td>
<td>
member
</td>
</tr>
<tr>
<td>3</td>
<td>Veronica</td>
<td>Gusikowski</td>
<td>@Maxime</td>
<td>
developer
</td>
</tr>
<tr>
<td>4</td>
<td>Bruce</td>
<td>Rogahn</td>
<td>@Maggio</td>
<td>
supporter
</td>
</tr>
<tr>
<td>5</td>
<td>Carolina</td>
<td>Hickle</td>
<td>@Hammes</td>
<td>
member
</td>
</tr>
<tr>
<td>6</td>
<td>Madaline</td>
<td>Eichmann</td>
<td>@Amaya</td>
<td>
supporter
</td>
</tr>
</tbody>
</table>

边框表格

含有外边框的表格,需要在table标签上添加样式u-table-base u-table-bordered

# 姓氏 用户名 角色
1 Teagan Prohaska @Elijah admin
2 Andy Gaylord @Ramiro member
3 Veronica Gusikowski @Maxime developer
4 Bruce Rogahn @Maggio supporter
5 Carolina Hickle @Hammes member
6 Madaline Eichmann @Amaya supporter
<table class="u-table-base u-table-bordered">
<thead>
<tr>
<th>#</th>
<th></th>
<th>姓氏</th>
<th>用户名</th>
<th>角色</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Teagan</td>
<td>Prohaska</td>
<td>@Elijah</td>
<td>
admin
</td>
</tr>
<tr>
<td>2</td>
<td>Andy</td>
<td>Gaylord</td>
<td>@Ramiro</td>
<td>
member
</td>
</tr>
<tr>
<td>3</td>
<td>Veronica</td>
<td>Gusikowski</td>
<td>@Maxime</td>
<td>
developer
</td>
</tr>
<tr>
<td>4</td>
<td>Bruce</td>
<td>Rogahn</td>
<td>@Maggio</td>
<td>
supporter
</td>
</tr>
<tr>
<td>5</td>
<td>Carolina</td>
<td>Hickle</td>
<td>@Hammes</td>
<td>
member
</td>
</tr>
<tr>
<td>6</td>
<td>Madaline</td>
<td>Eichmann</td>
<td>@Amaya</td>
<td>
supporter
</td>
</tr>
</tbody>
</table>

悬浮样式

悬浮表格指鼠标移动到表格中的某行时,出现浅蓝色背景特效,需要开发者在table标签上添加样式u-table-base u-table-hover

# 姓氏 用户名 角色
1 Teagan Prohaska @Elijah admin
2 Andy Gaylord @Ramiro member
3 Veronica Gusikowski @Maxime developer
4 Bruce Rogahn @Maggio supporter
5 Carolina Hickle @Hammes member
6 Madaline Eichmann @Amaya supporter
<table class="u-table-base u-table-hover">
<thead>
<tr>
<th>#</th>
<th></th>
<th>姓氏</th>
<th>用户名</th>
<th>角色</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Teagan</td>
<td>Prohaska</td>
<td>@Elijah</td>
<td>
admin
</td>
</tr>
<tr>
<td>2</td>
<td>Andy</td>
<td>Gaylord</td>
<td>@Ramiro</td>
<td>
member
</td>
</tr>
<tr>
<td>3</td>
<td>Veronica</td>
<td>Gusikowski</td>
<td>@Maxime</td>
<td>
developer
</td>
</tr>
<tr>
<td>4</td>
<td>Bruce</td>
<td>Rogahn</td>
<td>@Maggio</td>
<td>
supporter
</td>
</tr>
<tr>
<td>5</td>
<td>Carolina</td>
<td>Hickle</td>
<td>@Hammes</td>
<td>
member
</td>
</tr>
<tr>
<td>6</td>
<td>Madaline</td>
<td>Eichmann</td>
<td>@Amaya</td>
<td>
supporter
</td>
</tr>
</tbody>
</table>

经典表格

常用表格的表头含有背景色,表格整体具有边框,悬浮到tr上会有蓝色特效。开发者需要在table标签上添加样式u-table

名称 数量 单价
iphone 6 25 $2.90
小米Note 50 $1.25
华为P8 10 $2.35
<table class="u-table">
<thead>
<tr>
<th>名称</th>
<th>数量</th>
<th>单价</th>
</tr>
</thead>
<tbody>
<tr>
<td>iphone 6</td>
<td>25</td>
<td>$2.90</td>
</tr>
<tr class="is-selected">
<td>小米Note</td>
<td>50</td>
<td>$1.25</td>
</tr>
<tr>
<td>华为P8</td>
<td>10</td>
<td>$2.35</td>
</tr>
</tbody>
</table>

斑马线

斑马线表格的奇数行和偶数行的显示效果不同,需要开发者在table标签上添加样式u-table-base u-table-striped

# 姓氏 用户名 角色
1 Teagan Prohaska @Elijah admin
2 Andy Gaylord @Ramiro member
3 Veronica Gusikowski @Maxime developer
4 Bruce Rogahn @Maggio supporter
5 Carolina Hickle @Hammes member
6 Madaline Eichmann @Amaya supporter
<table class="u-table-base u-table-striped">
<thead>
<tr>
<th>#</th>
<th></th>
<th>姓氏</th>
<th>用户名</th>
<th>角色</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Teagan</td>
<td>Prohaska</td>
<td>@Elijah</td>
<td>
admin
</td>
</tr>
<tr>
<td>2</td>
<td>Andy</td>
<td>Gaylord</td>
<td>@Ramiro</td>
<td>
member
</td>
</tr>
<tr>
<td>3</td>
<td>Veronica</td>
<td>Gusikowski</td>
<td>@Maxime</td>
<td>
developer
</td>
</tr>
<tr>
<td>4</td>
<td>Bruce</td>
<td>Rogahn</td>
<td>@Maggio</td>
<td>
supporter
</td>
</tr>
<tr>
<td>5</td>
<td>Carolina</td>
<td>Hickle</td>
<td>@Hammes</td>
<td>
member
</td>
</tr>
<tr>
<td>6</td>
<td>Madaline</td>
<td>Eichmann</td>
<td>@Amaya</td>
<td>
supporter
</td>
</tr>
</tbody>
</table>

辅助类

辅助类中提供了对齐模块、文字相关方法、盒模型等其他常用类。

块级元素水平居中

添加.center-block实现水平居中

我是内容
<div class="example example-box">
<div class="h-64 w-64 bg-blue center-block ">
我是内容
</div>
</div>

浮动

浮动是创建各种布局的基础。但是浮动需要被清理。下面的类将帮助你设置基本的布局

<div class="example example-box">
<button type="button" class="u-button u-button-success ">Left</button>
<button type="button" class="u-button u-button-success pull-right" >Pull right</button>
</div>

行内块级元素垂直对齐

添加如下样式即可实现垂直居中、垂直向下。

<div class="example example-box u-container-fluid">
<div class="u-row">
<div class="u-col-6">
<div class="vertical-align h" >
<button type="button" class="vertical-align-middle u-button u-button-success ">垂直居中</button>
</div>
</div>
<div class="u-col-6">
<div class="vertical-align h" >
<button type="button" class="vertical-align-bottom u-button u-button-success ">垂直向下</button>
</div>
</div>
</div>
</div>
.vertical-align-bottom.u-button{
vertical-align: bottom;
}

文字对齐

添加如下样式来实现文字的对齐

文字顶部对齐
文字居中对齐
文字底部对齐

文字向左对齐

文字居中对齐

文件向右对齐

文件两端对齐

<div class="example example-box u-container-fluid">
<div class="row">
<div class="col-md-4 m-b-sm bg-grey h-64">
<img src="/assets/static/img/img2.png" height="64" width="64" style="vertical-align:top">
<span class="text-top">文字顶部对齐</span>
</div>
<div class="col-md-4 m-b-sm bg-grey h-64" >
<img src="/assets/static/img/img2.png" height="64" width="64" style="vertical-align:middle">
<span class="text-middle">文字居中对齐</span>
</div>
<div class="col-md-4 m-b-sm bg-grey h-64" >
<img src="/assets/static/img/img2.png" height="64" width="64" style="vertical-align:bottom">
<span class="text-bottom">文字底部对齐</span>
</div>
</div>
<div class="margin-top-20">
<p class="text-left">文字向左对齐</p>
<p class="text-center">文字居中对齐</p>
<p class="text-right">文件向右对齐</p>
<p class="text-justify">文件两端对齐</p>
</div>
</div>

字体大小

字体尺寸提供了如下大小的字体:0,10,12,14,16,18,20,24,26,30,40,50,60,70,80。

添加如下样式即可实现对应的效果。

字体粗细

字体粗细提供了如下粗细数值:unset、100、200、300、400、500、600、700、800、900。

添加如下样式即可实现对应的效果。

字体大小写转换

添加如下样式即可实现文字大小写转换

Lowercased text.

Uppercased text.

Capitalized text.

<div class="example example-box">
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>
</div>

文字包裹

添加如下类实现文字包裹的各种样式

文字是否包裹换行

我被隐藏了
内容显示一行,超出的内容使用“...”代替 This is text truncate.This is text truncate.
This-is-text-break.This-is-text-break.This-is-text-break.This-is-text-break.
内容显示一行,不换行 This is text nowrap.This is text nowrap.
<p>文字是否包裹换行</p>
<div class="example example-box u-container-fluid " style="width:500px">
<div class="u-row">
<div class="u-col-md-3">
<div class="text-hide h" style="border:1px solid #e6e8ea;">
我被隐藏了
</div>
</div>
<div class="u-col-md-3">
<div class="text-truncate h" style="border:1px solid #e6e8ea;">
内容显示一行,超出的内容使用“...”代替 This is text truncate.This is text truncate.
</div>
</div>
<div class="u-col-md-3">
<div class="text-break h " style="border:1px solid #e6e8ea;">
This-is-text-break.This-is-text-break.This-is-text-break.This-is-text-break.
</div>
</div>
<div class="u-col-md-3">
<div class="text-nowrap h" style="border:1px solid #e6e8ea;overflow: hidden;">
内容显示一行,不换行 This is text nowrap.This is text nowrap.
</div>
</div>
</div>
</div>
.vertical-align-bottom.u-button {
vertical-align: bottom;
}

高度

高度提供了如下数值: 50, 100, 150, 200, 250, 300, 350, 400, 450, 500, auto, 100%

添加如下样式即可实现对应的效果。

外间距

margin提供了如下数值:0,3,5,10, 15, 20, 25, 30, 35, 40, 45, 50.

以外边距5为例说明具体margin的使用方式

样式名 描述
.margin-5 margin:为5px
.margin-vertical-5 margin-top和margin-bottom均为 5px
.margin-horizontal-5 margin-left和margin-right均为 5px
.margin-top-5 margin-top为 5px
.margin-right-5 margin-right为 5px
.margin-bottom-5 margin-bottom为 5px
.margin-left-5 margin-left为 5px

内间距

padding提供了如下数值:0,3,5,10, 15, 20, 25, 30, 35, 40, 45, 50.

以内边距5为例说明具体padding的使用方式

样式名 描述
.padding-5 padding:为5px
.padding-vertical-5 padding-top和padding-bottom均为 5px
.padding-horizontal-5 padding-left和padding-right均为 5px
.padding-top-5 padding-top为 5px
.padding-right-5 padding-right为 5px
.padding-bottom-5 padding-bottom为 5px
.padding-left-5 padding-left为 5px

宽度

宽度提供了如下数值:50, 100, 150, 200, 250, 300, 350, 400, 450, 500, auto, 100%

添加如下样式即可实现对应的效果。

display

添加如下属性可以修改元素的display属性值。

响应式显示

通过单独或联合使用以下列出的类,可以针对不同屏幕尺寸隐藏或显示页面内容

样式名 超小屏幕 (<768px) 小屏幕(≥768PX) 中等屏幕(≥992PX) 大屏幕(≥1200px)
.show 可见 可见 可见 可见
.hide 隐藏 隐藏 隐藏 隐藏
.visible-xs-* 可见 隐藏 隐藏 隐藏
.visible-sm-* 隐藏 可见 隐藏 隐藏
.visible-md-* 隐藏 隐藏 可见 隐藏
.visible-lg-* 隐藏 隐藏 隐藏 可见
.hidden-xs 隐藏 可见 可见 可见
.hidden-sm 可见 隐藏 可见 可见
.hidden-md 可见 可见 隐藏 可见
.hidden-lg 可见 可见 可见 隐藏

形如 .visible-*-* 的类针对每种屏幕大小都有了三种变体,每个针对 CSS 中不同的 display 属性,列表如下:

样式名 描述
.visible-*-block display: block
.visible-*-inline display: inline
.visible-*-inline-block display: inline-block