按钮组件
表格组件
默认无边框左对齐表格
序号 ID 日期 手机账号 类别 消费金额 类型 比例 分值 单据编号 摘要 操作
561 154724 2014-02-29 18071235431 积分 500 金分 1:1 500 415424 消费红果 查看
561 154724 2014-02-29 18071235431 消分 6 金分 1:100 600 415428 消费绿果 修改
561 154724 2014-02-29 18071235431 积分 500 金分 1:1 500 415424 消费红果 删除
561 154724 2014-02-29 18071235431 消分 6 金分 1:100 600 415428 消费绿果 隐藏
561 154724 2014-02-29 18071235431 积分 500 金分 1:1 500 415424 消费红果 启用
561 154724 2014-02-29 18071235431 消分 6 金分 1:100 600 415428 消费绿果 删除

有边框内容居中对齐的表格
序号 ID 日期 手机账号 类别 消费金额 类型 比例 分值 单据编号 摘要 操作
561 154724 2014-02-29 18071235431 积分 500 金分 1:1 500 415424 消费红果 查看
561 154724 2014-02-29 18071235431 消分 6 金分 1:100 600 415428 消费绿果 修改
561 154724 2014-02-29 18071235431 积分 500 金分 1:1 500 415424 消费红果 删除
561 154724 2014-02-29 18071235431 消分 6 金分 1:100 600 415428 消费绿果 隐藏
561 154724 2014-02-29 18071235431 积分 500 金分 1:1 500 415424 消费红果 启用
561 154724 2014-02-29 18071235431 消分 6 金分 1:100 600 415428 消费绿果 删除

带背景标题内容右对齐的表格
序号 ID 日期 手机账号 类别 消费金额 类型 比例 分值 单据编号 摘要 操作
561 154724 2014-02-29 18071235431 积分 500 金分 1:1 500 415424 消费红果 查看
561 154724 2014-02-29 18071235431 消分 6 金分 1:100 600 415428 消费绿果 修改
561 154724 2014-02-29 18071235431 积分 500 金分 1:1 500 415424 消费红果 删除
561 154724 2014-02-29 18071235431 消分 6 金分 1:100 600 415428 消费绿果 隐藏
561 154724 2014-02-29 18071235431 积分 500 金分 1:1 500 415424 消费红果 启用
561 154724 2014-02-29 18071235431 消分 6 金分 1:100 600 415428 消费绿果 删除

带表单控件的表格(全选,不选,反选功能)
系统权限

全选 不选 反选

用户管理
个人资料    
用户分组    
文件管理  
菜单管理    
系统更新    
数据备份  
系统模块
系统功能    
配置管理    

带折叠功能的表格
序号 ID 日期 手机账号 类别 消费金额 类型 比例 分值 单据编号 摘要 操作
561 154724 2014-02-29 18071235431 积分 500 金分 1:1 500 415424 消费红果 查看
手机账号 会员姓名 性别 身份证号 登记时间
18071235431 张涛 420204198612154975 2014-02-29
18071235431 张涛 420204198612154975 2014-02-29
18071235431 张涛 420204198612154975 2014-02-29
18071235431 张涛 420204198612154975 2014-02-29
561 154724 2014-02-29 18071235431 积分 500 金分 1:1 500 415424 消费红果 查看
手机账号 会员姓名 性别 身份证号 登记时间
18071235431 张涛 420204198612154975 2014-02-29
18071235431 张涛 420204198612154975 2014-02-29
18071235431 张涛 420204198612154975 2014-02-29
18071235431 张涛 420204198612154975 2014-02-29
561 154724 2014-02-29 18071235431 积分 500 金分 1:1 500 415424 消费红果 查看
手机账号 会员姓名 性别 身份证号 登记时间
18071235431 张涛 420204198612154975 2014-02-29
18071235431 张涛 420204198612154975 2014-02-29
18071235431 张涛 420204198612154975 2014-02-29
18071235431 张涛 420204198612154975 2014-02-29
561 154724 2014-02-29 18071235431 积分 500 金分 1:1 500 415424 消费红果 查看
手机账号 会员姓名 性别 身份证号 登记时间
18071235431 张涛 420204198612154975 2014-02-29
18071235431 张涛 420204198612154975 2014-02-29
18071235431 张涛 420204198612154975 2014-02-29
18071235431 张涛 420204198612154975 2014-02-29

添加分类表格组件
选择删除 ID 分类名称 分类别名 父级分类 分类描述 操作
全选 不选 反选
1 food 添加 编辑
2 electrical 添加 编辑
3 tools 添加 编辑
4 software 添加 编辑
表单组件

安全强度:

结束

返回


块级控件标签(为控件容器添加 block-layout-controls 类可使label以块级显示)


块级控件标签(为控件容器添加 block-layout-controls 类可使label以块级显示)

标签页组件

扁平化线条型标签页

罗马教皇被允许飞越中国领空 中梵关系或现缓和

分类:国际时事 作者:王刚 来源:环球时报 发布日期:2014-08-14 02:35

人民网8月14日讯 据BBC、路透社报道,罗马天主教皇方济各今天抵达韩国访问,当他所乘坐的专机飞越中国领空时,方济各按照教廷礼仪,向中国领导人习近平和中国人民发送了问候电报。

罗马教皇方济各14日起开始访问韩国,这是他就职后首次访问亚洲。不过,西方媒体13日的关注焦点是:方济各乘坐的专机将被允许飞越中国领空。路透社13日称,依照惯例,教皇会向飞经国的领导人发送电报表达问候,“这样的例行做法通常不会引起特别关注,但这次是特例,外界非常想知道,教皇会对中国领导人说些什么。”文章认为,方济各获准飞越中国领空,被视为中国与梵蒂冈关系向前迈进的一步,因为之前的教皇保罗二世访问亚洲时就不得不绕过中国领空。《华尔街日报》13日也认为,教皇可能借此次访问亚洲努力修补罗马教廷与中国的糟糕关系。

罗马教皇方济各14日起开始访问韩国,这是他就职后首次访问亚洲。不过,西方媒体13日的关注焦点是:方济各乘坐的专机将被允许飞越中国领空。路透社13日称,依照惯例,教皇会向飞经国的领导人发送电报表达问候,“这样的例行做法通常不会引起特别关注,但这次是特例,外界非常想知道,教皇会对中国领导人说些什么。”文章认为,方济各获准飞越中国领空,被视为中国与梵蒂冈关系向前迈进的一步,因为之前的教皇保罗二世访问亚洲时就不得不绕过中国领空。《华尔街日报》13日也认为,教皇可能借此次访问亚洲努力修补罗马教廷与中国的糟糕关系。

路透社说,当前任教皇本笃十六世1989年出访韩国时,中国曾拒绝让其包机飞越中国领空。而教皇方济各获准飞越中国领空,此举被视为中国与梵蒂冈关系向前迈进的一步。

罗马教皇方济各14日起开始访问韩国,这是他就职后首次访问亚洲。不过,西方媒体13日的关注焦点是:方济各乘坐的专机将被允许飞越中国领空。路透社13日称,依照惯例,教皇会向飞经国的领导人发送电报表达问候,“这样的例行做法通常不会引起特别关注,但这次是特例,外界非常想知道,教皇会对中国领导人说些什么。”文章认为,方济各获准飞越中国领空,被视为中国与梵蒂冈关系向前迈进的一步,因为之前的教皇保罗二世访问亚洲时就不得不绕过中国领空。《华尔街日报》13日也认为,教皇可能借此次访问亚洲努力修补罗马教廷与中国的糟糕关系。

罗马教皇方济各14日起开始访问韩国,这是他就职后首次访问亚洲。不过,西方媒体13日的关注焦点是:方济各乘坐的专机将被允许飞越中国领空。路透社13日称,依照惯例,教皇会向飞经国的领导人发送电报表达问候,“这样的例行做法通常不会引起特别关注,但这次是特例,外界非常想知道,教皇会对中国领导人说些什么。”文章认为,方济各获准飞越中国领空,被视为中国与梵蒂冈关系向前迈进的一步,因为之前的教皇保罗二世访问亚洲时就不得不绕过中国领空。《华尔街日报》13日也认为,教皇可能借此次访问亚洲努力修补罗马教廷与中国的糟糕关系。

大连落马院长被指行事霸道 其妻定期上香求保佑

分类:时政新闻 作者:李心 来源:法制晚报 发布日期:2014-08-14 12:45

法制晚报讯(文/深度记者 李心)7月28日,《法制晚报》从辽宁省司法机关获悉,日前被辽宁省纪委带走的大连市中级人民法院院长李威,已被有关部门立案侦查。

李威的公开履历显示,在进入大连中院工作前,他一直在辽宁省的司法系统工作。2006年10月,李威出任大连市中院副院长,2008年出任大连中院院长,直至案发。

法晚记者在大连采访期间,李威的多名同事和朋友证实,其8年的法院院长经历,始终伴随着较大争议。这不仅体现在很多案件当事人对其“过分干涉案件审理”的实名举报中,亦体现为其在大连法院系统内行事霸道、说一不二的处事风格。

以上官员还向记者介绍说,李威任大连市中级人民法院院长期间,从黑龙江、吉林,辽宁中北部等地区的基层法院选调了将近200名法律工作者,全部安排到了大连市的法院系统内。接近大连司法系统的人士张林向《法制晚报》记者透露,大连的某基层法院在半年内曾经接收过20多名李威选调的法官。

迫于压力,大连中级法院旋即恢复了对大连沃尔玛的执行。但是,在新组成的合议庭执行法官决定对沃尔玛实施查封财产的关键时刻,李威下令停止对沃尔玛执行的一切程序,还亲自到沃尔玛的代理律师所商谈并决定以“仲裁裁决缺乏执行内容”为由终结对沃尔玛的执行。

李冰说,期间,大连检察院反渎职局的检察官根据当事人的举报前往大连法院进行调查时,李威指示其手下拒绝配合检察机关的任何调查,并亲自到大连检察院约谈检察长,其后回到法院自豪地跟下属称:“我已让检察院停止了一切调查。”

盘点《爸爸去哪儿》10大争议话题

分类:娱乐专栏 作者:一床情书 来源:新浪娱乐 发布日期:2014-08-14 18:05

亲子节目《爸爸去哪儿》话题不断,继多多指责贝儿“偷钱”、传黄磊出轨女编导后,本周又曝出吴镇宇黄磊私下不和。这节奏,星爸萌娃一起上头条,周周承包话题榜!上季“王诗龄骄纵”谣言引发轩然大波,本季萌娃也遭黑粉恶语相向,黑粉当道唯饭互掐,炒作?黑孩子?一时难辨真假,盘点《爸爸去哪儿》10大掉节操话题,你被那条惊呆了?

1、多多斥贝儿“偷钱”被轰滚粗

《爸爸2》第六期节目播出前,节目组在微博放出一组预告片,多多在争执过程中直指贝儿“偷人家的钱”,尽管芒果台火速删除了该条微博,但多多和贝儿的粉丝却因此陷入了无尽的骂战当中,甚至有极端网友还发起了#黄多多滚出爸爸去哪儿#的话题,黄磊微博之下评论更是不堪入目。有网友指出,这或许是芒果台为了与《好声音》抢收视才刻意放出的无节操“大招”,导演组的做法引起黄磊和陆毅两位爸爸的不满,为平息众怒,节目总导演谢涤葵特发微博向黄磊和陆毅致歉,而因为受到“预告片事件”的影响,“爸爸”当晚全国网收视率成功超过《好声音》。

2、传黄磊出轨女编导“好男人”形象大跌

8月初,有网友微博爆料称,证实“某好爸爸”与《爸爸去哪儿2》的女编导发生龌龊事,在录节目间隙,两人于休息室里偷情,言语间暗指与被称“全能奶爸”的黄磊有关。消息一出,引来各方面的猜测,黄磊方面随即否认,接着网友们也纷纷指责称:一个爸爸带着女儿,在一个上百人的剧组中录制节目,到底是从哪来挤出来的时间偷情,再说了时间、空间都不是好机会吧!这简直是胡扯。而节目组也发声明辟谣并称将诉诸法律,与此同时,黄磊妻子孙莉在微博晒出两人合照,力证夫妻感情不变。

3、删减杨阳洋哮喘吃药镜头惹争议

《爸爸2》第四期节目,考验小朋友们分享环节,杨阳洋因没有和姐姐分享玉米而遭到网友指责。支持杨阳洋的网友随即把矛头指向节目组,炮轰节目组明知杨阳洋患有哮喘却还让他住最差的水云间,对此,导演组回应称有专门确认过杨阳洋并没有哮喘。然而这样的回复引起更多网友的不满,有粉丝截图力证杨阳洋在节目中用过哮喘吸入剂,睡前还要喝苦药水,而杨威在随后的微访谈中也回应杨阳洋确实患有哮喘,只不过没网友想的那么严重,对比导演组和杨威前后不一的说法,众多网友炮轰湖南卫视自打脸。

4、导演教阳洋说假话毁童真

《爸爸2》播出后,杨阳洋以呆萌的表情和率真的童言迅速走红,而他与多多的“暧昧”互动更为网友所津津乐道,在《快乐大本营》采访中,他曾说:“如果我有一百万就给多多买裙子”,疑似向多多"表白",但是随后他上另一档节目却脱口而出那句话是导演让他说的,令节目现场一片哗然,网友怒指湖南卫视掉节操,教人撒谎,简直是在毁孩子的童真。


蓝色质感型标签页

默认无边框左对齐表格
序号 ID 日期 手机账号 类别 消费金额 类型 比例 分值 单据编号 摘要 操作
561 154724 2014-02-29 18071235431 积分 500 金分 1:1 500 415424 消费红果 查看
561 154724 2014-02-29 18071235431 消分 6 金分 1:100 600 415428 消费绿果 修改
561 154724 2014-02-29 18071235431 积分 500 金分 1:1 500 415424 消费红果 删除
561 154724 2014-02-29 18071235431 消分 6 金分 1:100 600 415428 消费绿果 隐藏
561 154724 2014-02-29 18071235431 积分 500 金分 1:1 500 415424 消费红果 启用
561 154724 2014-02-29 18071235431 消分 6 金分 1:100 600 415428 消费绿果 删除

罗马教皇被允许飞越中国领空 中梵关系或现缓和

分类:国际时事 作者:王刚 来源:环球时报 发布日期:2014-08-14 02:35

人民网8月14日讯 据BBC、路透社报道,罗马天主教皇方济各今天抵达韩国访问,当他所乘坐的专机飞越中国领空时,方济各按照教廷礼仪,向中国领导人习近平和中国人民发送了问候电报。

罗马教皇方济各14日起开始访问韩国,这是他就职后首次访问亚洲。不过,西方媒体13日的关注焦点是:方济各乘坐的专机将被允许飞越中国领空。路透社13日称,依照惯例,教皇会向飞经国的领导人发送电报表达问候,“这样的例行做法通常不会引起特别关注,但这次是特例,外界非常想知道,教皇会对中国领导人说些什么。”文章认为,方济各获准飞越中国领空,被视为中国与梵蒂冈关系向前迈进的一步,因为之前的教皇保罗二世访问亚洲时就不得不绕过中国领空。《华尔街日报》13日也认为,教皇可能借此次访问亚洲努力修补罗马教廷与中国的糟糕关系。

罗马教皇方济各14日起开始访问韩国,这是他就职后首次访问亚洲。不过,西方媒体13日的关注焦点是:方济各乘坐的专机将被允许飞越中国领空。路透社13日称,依照惯例,教皇会向飞经国的领导人发送电报表达问候,“这样的例行做法通常不会引起特别关注,但这次是特例,外界非常想知道,教皇会对中国领导人说些什么。”文章认为,方济各获准飞越中国领空,被视为中国与梵蒂冈关系向前迈进的一步,因为之前的教皇保罗二世访问亚洲时就不得不绕过中国领空。《华尔街日报》13日也认为,教皇可能借此次访问亚洲努力修补罗马教廷与中国的糟糕关系。

路透社说,当前任教皇本笃十六世1989年出访韩国时,中国曾拒绝让其包机飞越中国领空。而教皇方济各获准飞越中国领空,此举被视为中国与梵蒂冈关系向前迈进的一步。

罗马教皇方济各14日起开始访问韩国,这是他就职后首次访问亚洲。不过,西方媒体13日的关注焦点是:方济各乘坐的专机将被允许飞越中国领空。路透社13日称,依照惯例,教皇会向飞经国的领导人发送电报表达问候,“这样的例行做法通常不会引起特别关注,但这次是特例,外界非常想知道,教皇会对中国领导人说些什么。”文章认为,方济各获准飞越中国领空,被视为中国与梵蒂冈关系向前迈进的一步,因为之前的教皇保罗二世访问亚洲时就不得不绕过中国领空。《华尔街日报》13日也认为,教皇可能借此次访问亚洲努力修补罗马教廷与中国的糟糕关系。

罗马教皇方济各14日起开始访问韩国,这是他就职后首次访问亚洲。不过,西方媒体13日的关注焦点是:方济各乘坐的专机将被允许飞越中国领空。路透社13日称,依照惯例,教皇会向飞经国的领导人发送电报表达问候,“这样的例行做法通常不会引起特别关注,但这次是特例,外界非常想知道,教皇会对中国领导人说些什么。”文章认为,方济各获准飞越中国领空,被视为中国与梵蒂冈关系向前迈进的一步,因为之前的教皇保罗二世访问亚洲时就不得不绕过中国领空。《华尔街日报》13日也认为,教皇可能借此次访问亚洲努力修补罗马教廷与中国的糟糕关系。

文章样式

苹果 iOS 8 新固件新功能特性总结汇总 (苹果 iPhone/iPad 最新移动操作系统)

分类:手机数码 作者:小黑 来源:异次元软件世界 发布日期:2014-06-03 02:35
ios8

苹果在 WWDC 2014 大会上正式发布了其最新的 OS X Yosemite 桌面系统以及 iOS 8 移动操作系统,虽然 iOS 8 依然延续了 iOS7 的扁平化设计风格,但在功能上却还是给我带来了不少惊喜。让人惊讶的是,相比以往苹果“封闭”的印象,iOS 8 这次来了一次大变身,系统获得了史无前例的开放性!提供了很多系统底层的API,开发者可以开发类似于“系统插件”类的 APP,甚至连系统输入法也都完全开放了,这不仅可以大大提高 iOS 的可用性和用户体验,同时也意味着「越狱」的需求将会变得越来来越小了。另外,苹果也开始努力试图让 iPhone、iPad、Mac 之间联动起来……

iOS 8 依然延续扁平化的设计风格

ios8

新的照片应用

iOS 8 的相册应用现在已经可以支持照片的编辑后自动同步到其他设备了,并且现在用户可以根据地理位置对照片进行搜索,可以对喜欢的图片「加心」收藏起来,也可以像 iMovie 一样对照片进行智能的亮度、对比度、颜色调整,也提供了更多的滤镜以及更加强大的裁剪工具。 ios8

更强大的短信应用

在 iOS 8 的信息应用中,我们可以看到大量类似于微信、Line 等网络短信软件的影子。如今 iMessage 除了图片之外,也可以支持发送语音、视频以及地图位置了。不仅这样,iMessage 还增加了群聊功能 (跟微信比起来就是少了个朋友圈嘛)。而且,不同的人在群里面发出来的图片,会汇聚在一起供你日后浏览和保存,而不必再不停地拉滚动条去找短信的历史记录。另外,如今在收到新短信的时候,终于可以直接在下拉通知框上直接对短信进行回复,而不必切换到短信应用了!这样效率高多了。 ios8

QuickType 会智能预测并提供建议的输入法,并允许第三方输入法

说到 iOS 8 最让人惊喜的就是在输入法方面的改进了!QuickType 预测性的输入法的加入将会大大提高输入的效率,它会自动根据你输入的上下文联想并智能建议出一些候选词,如果它足够的聪明,那么一长篇大论的文字,你只需输入几个字,后面的词语全部不断在 QuickType 的智能建议下选择即可。值得高兴的是,QuickType 的“预测性”输入技术在全球14个国家上线,其中中国也在列表之中。而另一个让人兴奋的消息就是,苹果 iOS 将正式允许第三方开发者向用户提供输入法,换言之,像搜狗输入法、百度输入法等第三方输入法产品终于可以直接上架 App Store 而不必像以前那样必须越狱再安装了。在 WWDC 现场苹果就演示了一款 Swype 式的第三方滑动输入法,而且日后,第三方输入法的记录和词库将可以与 iOS 默认输入法同步。 ios8

Handoff

我们在 OS X Yosemite 的新特性介绍上已经描述过 HandOff 的功能,它可以让你直接在 iPhoneiPad 上快速接续在 Mac 上正在进行的工作,反之亦然。譬如你正在电脑上编辑一份文档,突然有事外出,那么你并不需要做任何操作,直接拿起你的 iPhone 或 iPad 即可继续在之前未完成的地方继续。另外,Handoff 也可以让你在 Mac、iPad 上接听 iPhone 的来电,甚至也能拨打出去。 ios8

对话框组件
点我打开对话框
序号 ID 手机账号 姓名备注 类别 消费金额 类型 比例 分值
561 154724 18071235431 张涛 积分 500 金分 1:1 500


打印组件(打印功能必须在服务器环境下浏览)
打印 注意:打印组件所要打印的页面不能跨域!

面包屑导航

普通面包屑导航:


带背景色的面包屑导航:


分页导航

分页导航-靠左排列

分页导航-居中排列

分页导航-靠右排列(默认)


信息块

系统运行信息

操作员基本信息
用户名:user001
姓名:赵某某
用户组:普通管理员
系统信息
管理员数:7人
用户组数:3
系统状态:良好
系统数据备份:上次备份时间 - 2014-01-01 08:00:00

栏目框组件
栏目框标题

栏目框内容

栏目框是一个自适应的包裹容器,他包含标题栏与内容块两层结构(也可以不带标题栏)。栏目框的宽度会自适应父容器的宽度,其高度自适应内容的高度。当然你也可以强制设置其高宽。你可以在内容中放任何东西,包括嵌套栏目框组件。


不带标题栏的栏目框


带操作链接的标题栏 更多设置

带操作链接的标题栏


强制设置栏目框宽度 更多设置

强制设置了宽度并向左浮动的栏目框

强制设置栏目框宽度 收藏

强制设置了宽度并向左浮动的栏目框

强制设置栏目框宽度 删除

强制设置了宽度并向左浮动的栏目框


在标题栏中放置面包屑

矢量图标

矢量图标组件全部以icon-*形式的类名命名,你可以在任何地方使用这些图标。下面是一些常用的使用场景示例:

在按钮中使用图标: 下载 搜索 删除 编辑 保存


在文章中使用图标:

这是一段示例文本,欢迎使用百度音乐盒,你可以在线收听 下载 此歌曲。在新窗口中打开


单独使用图标:


图标大小,图标大小默认为父容器字体大小,也可通过预定义的几种尺寸来调整其大小,或者你也可以通过设置其font-size来自定义其大小。

预定义有10中尺寸,类名分别为 small,large,x2 - x8和默认大小(注意!x2 - x8是相对原始尺寸的放大倍数)
small
默认
large
x2
x3
x4
x5
x6
x7
x8
自定义尺寸,font-size: 200px;


图标修饰,你可以使用任何你能想到的CSS样式来修饰实例图标,也可以使用预定义的颜色类,工具类等来简单的进行修饰,下面是一些示例:

改变颜色 带背景色 修改背景色 修改背景色与前景色 带边框的 修改边框颜色 圆形背景 圆形边框 带投影的


旋转动画图标,在更高版本的浏览器上(IE10+),你完全可以抛弃GIF图片来实现loading动画的图标,下面是一些示例:


下面是所有可用的图标列表(可扩展)

  • icon-newspaper Unicode: e001
  • icon-pencil Unicode: e002
  • icon-droplet Unicode: e003
  • icon-pictures Unicode: e004
  • icon-camera Unicode: e005
  • icon-music Unicode: e006
  • icon-film Unicode: e007
  • icon-camera2 Unicode: e008
  • icon-spades Unicode: e009
  • icon-clubs Unicode: e00a
  • icon-diamonds Unicode: e00b
  • icon-broadcast Unicode: e00c
  • icon-mic Unicode: e00d
  • icon-book Unicode: e00e
  • icon-file Unicode: e00f
  • icon-new Unicode: e010
  • icon-copy Unicode: e011
  • icon-folder Unicode: e012
  • icon-folder2 Unicode: e013
  • icon-tag Unicode: e014
  • icon-cart Unicode: e015
  • icon-basket Unicode: e016
  • icon-calculate Unicode: e017
  • icon-support Unicode: e018
  • icon-phone Unicode: e019
  • icon-mail Unicode: e01a
  • icon-location Unicode: e01b
  • icon-compass Unicode: e01c
  • icon-history Unicode: e01d
  • icon-clock Unicode: e01e
  • icon-bell Unicode: e01f
  • icon-calendar Unicode: e020
  • icon-printer Unicode: e021
  • icon-mouse Unicode: e022
  • icon-screen Unicode: e023
  • icon-laptop Unicode: e024
  • icon-mobile Unicode: e025
  • icon-cabinet Unicode: e026
  • icon-drawer Unicode: e027
  • icon-drawer2 Unicode: e028
  • icon-box Unicode: e029
  • icon-box-add Unicode: e02a
  • icon-box-remove Unicode: e02b
  • icon-download Unicode: e02c
  • icon-upload Unicode: e02d
  • icon-database Unicode: e02e
  • icon-flip Unicode: e02f
  • icon-flip2 Unicode: e030
  • icon-undo Unicode: e031
  • icon-redo Unicode: e032
  • icon-forward Unicode: e033
  • icon-reply Unicode: e034
  • icon-reply2 Unicode: e035
  • icon-comments Unicode: e036
  • icon-comments2 Unicode: e037
  • icon-comments3 Unicode: e038
  • icon-comments4 Unicode: e039
  • icon-comments5 Unicode: e03a
  • icon-user Unicode: e03b
  • icon-user2 Unicode: e03c
  • icon-user3 Unicode: e03d
  • icon-busy Unicode: e03e
  • icon-loading Unicode: e03f
  • icon-loading2 Unicode: e040
  • icon-search Unicode: e041
  • icon-zoom-in Unicode: e042
  • icon-zoom-out Unicode: e043
  • icon-key Unicode: e044
  • icon-key2 Unicode: e045
  • icon-locked Unicode: e046
  • icon-unlocked Unicode: e047
  • icon-wrench Unicode: e048
  • icon-equalizer Unicode: e049
  • icon-cog Unicode: e04a
  • icon-pie Unicode: e04b
  • icon-bars Unicode: e04c
  • icon-stats-up Unicode: e04d
  • icon-gift Unicode: e04e
  • icon-trophy Unicode: e04f
  • icon-diamond Unicode: e050
  • icon-coffee Unicode: e051
  • icon-rocket Unicode: e052
  • icon-meter-slow Unicode: e053
  • icon-meter-medium Unicode: e054
  • icon-meter-fast Unicode: e055
  • icon-dashboard Unicode: e056
  • icon-fire Unicode: e057
  • icon-lab Unicode: e058
  • icon-remove Unicode: e059
  • icon-briefcase Unicode: e05a
  • icon-briefcase2 Unicode: e05b
  • icon-cars Unicode: e05c
  • icon-bus Unicode: e05d
  • icon-cube Unicode: e05e
  • icon-cube2 Unicode: e05f
  • icon-puzzle Unicode: e060
  • icon-glasses Unicode: e061
  • icon-glasses2 Unicode: e062
  • icon-accessibility Unicode: e063
  • icon-accessibility2 Unicode: e064
  • icon-target Unicode: e065
  • icon-target2 Unicode: e066
  • icon-lightning Unicode: e067
  • icon-power Unicode: e068
  • icon-power2 Unicode: e069
  • icon-clipboard Unicode: e06a
  • icon-clipboard2 Unicode: e06b
  • icon-playlist Unicode: e06c
  • icon-grid-view Unicode: e06d
  • icon-tree-view Unicode: e06e
  • icon-cloud Unicode: e06f
  • icon-cloud2 Unicode: e070
  • icon-download2 Unicode: e071
  • icon-upload2 Unicode: e072
  • icon-upload3 Unicode: e073
  • icon-link Unicode: e074
  • icon-link2 Unicode: e075
  • icon-flag Unicode: e076
  • icon-flag2 Unicode: e077
  • icon-attachment Unicode: e078
  • icon-eye Unicode: e079
  • icon-bookmark Unicode: e07a
  • icon-bookmark2 Unicode: e07b
  • icon-star Unicode: e07c
  • icon-star2 Unicode: e07d
  • icon-star3 Unicode: e07e
  • icon-heart Unicode: e07f
  • icon-heart2 Unicode: e080
  • icon-thumbs-up Unicode: e081
  • icon-thumbs-down Unicode: e082
  • icon-plus Unicode: e083
  • icon-minus Unicode: e084
  • icon-help Unicode: e085
  • icon-help2 Unicode: e086
  • icon-blocked Unicode: e087
  • icon-cancel Unicode: e088
  • icon-cancel2 Unicode: e089
  • icon-checkmark Unicode: e08a
  • icon-minus2 Unicode: e08b
  • icon-plus2 Unicode: e08c
  • icon-enter Unicode: e08d
  • icon-exit Unicode: e08e
  • icon-loop Unicode: e08f
  • icon-arrow-up-left Unicode: e090
  • icon-arrow-up Unicode: e091
  • icon-arrow-up-right Unicode: e092
  • icon-arrow-right Unicode: e093
  • icon-arrow-down-right Unicode: e094
  • icon-arrow-down Unicode: e095
  • icon-arrow-down-left Unicode: e096
  • icon-arrow-left Unicode: e097
  • icon-arrow-up2 Unicode: e098
  • icon-arrow-right2 Unicode: e099
  • icon-arrow-down2 Unicode: e09a
  • icon-arrow-left2 Unicode: e09b
  • icon-arrow-up3 Unicode: e09c
  • icon-arrow-right3 Unicode: e09d
  • icon-arrow-down3 Unicode: e09e
  • icon-arrow-left3 Unicode: e09f
  • icon-menu Unicode: e0a0
  • icon-enter2 Unicode: e0a1
  • icon-backspace Unicode: e0a2
  • icon-backspace2 Unicode: e0a3
  • icon-tab Unicode: e0a4
  • icon-tab2 Unicode: e0a5
  • icon-checkbox Unicode: e0a6
  • icon-checkbox-unchecked Unicode: e0a7
  • icon-checkbox-partial Unicode: e0a8
  • icon-radio-checked Unicode: e0a9
  • icon-radio-unchecked Unicode: e0aa
  • icon-font Unicode: e0ab
  • icon-paragraph-left Unicode: e0ac
  • icon-paragraph-center Unicode: e0ad
  • icon-paragraph-right Unicode: e0ae
  • icon-paragraph-justify Unicode: e0af
  • icon-left-toright Unicode: e0b0
  • icon-right-toleft Unicode: e0b1
  • icon-share Unicode: e0b2
  • icon-new-tab Unicode: e0b3
  • icon-new-tab2 Unicode: e0b4
  • icon-embed Unicode: e0b5
  • icon-code Unicode: e0b6
  • icon-bluetooth Unicode: e0b7
  • icon-share2 Unicode: e0b8
  • icon-share3 Unicode: e0b9
  • icon-mail2 Unicode: e0ba
  • icon-google Unicode: e0bb
  • icon-google-plus Unicode: e0bc
  • icon-google-drive Unicode: e0bd
  • icon-facebook Unicode: e0be
  • icon-instagram Unicode: e0bf
  • icon-twitter Unicode: e0c0
  • icon-feed Unicode: e0c1
  • icon-youtube Unicode: e0c2
  • icon-vimeo Unicode: e0c3
  • icon-flickr Unicode: e0c4
  • icon-picassa Unicode: e0c5
  • icon-dribbble Unicode: e0c6
  • icon-deviantart Unicode: e0c7
  • icon-github Unicode: e0c8
  • icon-github2 Unicode: e0c9
  • icon-github3 Unicode: e0ca
  • icon-github4 Unicode: e0cb
  • icon-github5 Unicode: e0cc
  • icon-git Unicode: e0cd
  • icon-github6 Unicode: e0ce
  • icon-wordpress Unicode: e0cf
  • icon-joomla Unicode: e0d0
  • icon-blogger Unicode: e0d1
  • icon-tumblr Unicode: e0d2
  • icon-yahoo Unicode: e0d3
  • icon-amazon Unicode: e0d4
  • icon-tux Unicode: e0d5
  • icon-apple Unicode: e0d6
  • icon-finder Unicode: e0d7
  • icon-android Unicode: e0d8
  • icon-windows Unicode: e0d9
  • icon-soundcloud Unicode: e0da
  • icon-skype Unicode: e0db
  • icon-reddit Unicode: e0dc
  • icon-linkedin Unicode: e0dd
  • icon-lastfm Unicode: e0de
  • icon-delicious Unicode: e0df
  • icon-stumbleupon Unicode: e0e0
  • icon-pinterest Unicode: e0e1
  • icon-xing Unicode: e0e2
  • icon-flattr Unicode: e0e3
  • icon-foursquare Unicode: e0e4
  • icon-paypal Unicode: e0e5
  • icon-yelp Unicode: e0e6
  • icon-libreoffice Unicode: e0e7
  • icon-file-pdf Unicode: e0e8
  • icon-file-openoffice Unicode: e0e9
  • icon-file-word Unicode: e0ea
  • icon-file-excel Unicode: e0eb
  • icon-file-powerpoint Unicode: e0ec
  • icon-file-zip Unicode: e0ed
  • icon-file-xml Unicode: e0ee
  • icon-file-css Unicode: e0ef
  • icon-html5 Unicode: e0f0
  • icon-html52 Unicode: e0f1
  • icon-css3 Unicode: e0f2
  • icon-chrome Unicode: e0f3
  • icon-firefox Unicode: e0f4
  • icon-IE Unicode: e0f5
  • icon-opera Unicode: e0f6
  • icon-safari Unicode: e0f7
  • icon-IcoMoon Unicode: e0f8
  • icon-sunrise Unicode: e0f9
  • icon-sun Unicode: e0fa
  • icon-moon Unicode: e0fb
  • icon-sun2 Unicode: e0fc
  • icon-windy Unicode: e0fd
  • icon-wind Unicode: e0fe
  • icon-snowflake Unicode: e0ff
  • icon-cloudy Unicode: e100
  • icon-cloud3 Unicode: e101
  • icon-weather Unicode: e102
  • icon-weather2 Unicode: e103
  • icon-weather3 Unicode: e104
  • icon-lines Unicode: e105
  • icon-cloud4 Unicode: e106
  • icon-lightning2 Unicode: e107
  • icon-lightning3 Unicode: e108
  • icon-rainy Unicode: e109
  • icon-rainy2 Unicode: e10a
  • icon-windy2 Unicode: e10b
  • icon-windy3 Unicode: e10c
  • icon-snowy Unicode: e10d
  • icon-snowy2 Unicode: e10e
  • icon-snowy3 Unicode: e10f
  • icon-weather4 Unicode: e110
  • icon-cloudy2 Unicode: e111
  • icon-cloud5 Unicode: e112
  • icon-lightning4 Unicode: e113
  • icon-sun3 Unicode: e114
  • icon-moon2 Unicode: e115
  • icon-cloudy3 Unicode: e116
  • icon-cloud6 Unicode: e117
  • icon-cloud7 Unicode: e118
  • icon-lightning5 Unicode: e119
  • icon-rainy3 Unicode: e11a
  • icon-rainy4 Unicode: e11b
  • icon-windy4 Unicode: e11c
  • icon-windy5 Unicode: e11d
  • icon-snowy4 Unicode: e11e
  • icon-snowy5 Unicode: e11f
  • icon-weather5 Unicode: e120
  • icon-cloudy4 Unicode: e121
  • icon-lightning6 Unicode: e122
  • icon-thermometer Unicode: e123
  • icon-compass2 Unicode: e124
  • icon-none Unicode: e125
  • icon-Celsius Unicode: e126
  • icon-Fahrenheit Unicode: e127
  • icon-forrst Unicode: e128
  • icon-headphones Unicode: e129
  • icon-bug Unicode: e12a
  • icon-cart2 Unicode: e12b
  • icon-earth Unicode: e12c
  • icon-battery Unicode: e12d
  • icon-list Unicode: e12e
  • icon-grid Unicode: e12f
  • icon-alarm Unicode: e130
  • icon-location2 Unicode: e131
  • icon-pointer Unicode: e132
  • icon-diary Unicode: e133
  • icon-eye2 Unicode: e134
  • icon-console Unicode: e135
  • icon-location3 Unicode: e136
  • icon-move Unicode: e137
  • icon-gift2 Unicode: e138
  • icon-monitor Unicode: e139
  • icon-mobile2 Unicode: e13a
  • icon-switch Unicode: e13b
  • icon-star4 Unicode: e13c
  • icon-address-book Unicode: e13d
  • icon-shit Unicode: e13e
  • icon-cone Unicode: e13f
  • icon-credit-card Unicode: e140
  • icon-type Unicode: e141
  • icon-volume Unicode: e142
  • icon-volume2 Unicode: e143
  • icon-locked2 Unicode: e144
  • icon-warning Unicode: e145
  • icon-info Unicode: e146
  • icon-filter Unicode: e147
  • icon-bookmark3 Unicode: e148
  • icon-bookmark4 Unicode: e149
  • icon-stats Unicode: e14a
  • icon-compass3 Unicode: e14b
  • icon-keyboard Unicode: e14c
  • icon-award-fill Unicode: e14d
  • icon-award-stroke Unicode: e14e
  • icon-beaker-alt Unicode: e14f
  • icon-beaker Unicode: e150
  • icon-move-vertical Unicode: e151
  • icon-move-horizontal Unicode: e152
  • icon-steering-wheel Unicode: e153
  • icon-volume3 Unicode: e154
  • icon-volume-mute Unicode: e155
  • icon-play Unicode: e156
  • icon-pause Unicode: e157
  • icon-stop Unicode: e158
  • icon-eject Unicode: e159
  • icon-first Unicode: e15a
  • icon-last Unicode: e15b
  • icon-play-alt Unicode: e15c
  • icon-battery-charging Unicode: e160
  • icon-left-quote Unicode: e161
  • icon-right-quote Unicode: e162
  • icon-left-quote-alt Unicode: e163
  • icon-right-quote-alt Unicode: e164
  • icon-smiley Unicode: e165
  • icon-umbrella Unicode: e166
  • icon-info2 Unicode: e167
  • icon-chart-alt Unicode: e168
  • icon-at Unicode: e169
  • icon-hash Unicode: e16a
  • icon-pilcrow Unicode: e16b
  • icon-fullscreen-alt Unicode: e16c
  • icon-fullscreen-exit-alt Unicode: e16d
  • icon-layers-alt Unicode: e16e
  • icon-layers Unicode: e16f
  • icon-floppy Unicode: e170
  • icon-rainbow Unicode: e000
  • icon-air Unicode: e171
  • icon-home Unicode: e172
  • icon-spin Unicode: e173
  • icon-auction Unicode: e174
  • icon-dollar Unicode: e175
  • icon-dollar2 Unicode: e176
  • icon-coins Unicode: e177
  • icon-file2 Unicode: e186
  • icon-file3 Unicode: e187
  • icon-file4 Unicode: e188
  • icon-files Unicode: e189
  • icon-phone2 Unicode: e18a
  • icon-tablet Unicode: e18b
  • icon-monitor2 Unicode: e18c
  • icon-window Unicode: e18d
  • icon-tv Unicode: e18e
  • icon-camera3 Unicode: e18f
  • icon-image Unicode: e190
  • icon-open Unicode: e191
  • icon-sale Unicode: e192
  • icon-direction Unicode: e193
  • icon-medal Unicode: e194
  • icon-medal2 Unicode: e195
  • icon-satellite Unicode: e196
  • icon-discout Unicode: e197
  • icon-barcode Unicode: e198
  • icon-ticket Unicode: e199
  • icon-shipping Unicode: e19a
  • icon-globe Unicode: e19b
  • icon-anchor Unicode: e19c
  • icon-pop-out Unicode: e19d
  • icon-pop-in Unicode: e19e
  • icon-resize Unicode: e178
  • icon-battery2 Unicode: e179
  • icon-battery3 Unicode: e17a
  • icon-battery4 Unicode: e17b
  • icon-battery5 Unicode: e17c
  • icon-tools Unicode: e17d
  • icon-alarm2 Unicode: e17e
  • icon-alarm-cancel Unicode: e17f
  • icon-alarm-clock Unicode: e180
  • icon-chronometer Unicode: e181
  • icon-ruler Unicode: e182
  • icon-lamp Unicode: e183
  • icon-lamp2 Unicode: e184
  • icon-scissors Unicode: e185
  • icon-volume4 Unicode: e19f
  • icon-volume5 Unicode: e1a0
  • icon-volume6 Unicode: e1a1
  • icon-battery-full Unicode: e15f
  • icon-battery-empty Unicode: e15d
  • icon-battery-half Unicode: e15e
  • icon-zip Unicode: e1a2
  • icon-zip2 Unicode: e1a3
  • icon-play2 Unicode: e1a4
  • icon-pause2 Unicode: e1a5
  • icon-record Unicode: e1a6
  • icon-stop2 Unicode: e1a7
  • icon-next Unicode: e1a8
  • icon-previous Unicode: e1a9
  • icon-first2 Unicode: e1aa
  • icon-last2 Unicode: e1ab
  • icon-arrow-left4 Unicode: e1ac
  • icon-arrow-down4 Unicode: e1ad
  • icon-arrow-up4 Unicode: e1ae
  • icon-arrow-right4 Unicode: e1af
  • icon-arrow-left5 Unicode: e1b0
  • icon-arrow-down5 Unicode: e1b1
  • icon-arrow-up5 Unicode: e1b2
  • icon-arrow-right5 Unicode: e1b3
  • icon-cc Unicode: e1b4
  • icon-cc-by Unicode: e1b5
  • icon-cc-nc Unicode: e1b6
  • icon-cc-nc-eu Unicode: e1b7
  • icon-cc-nc-jp Unicode: e1b8
  • icon-cc-sa Unicode: e1b9
  • icon-cc-nd Unicode: e1ba
  • icon-cc-pd Unicode: e1bb
  • icon-cc-zero Unicode: e1bc
  • icon-cc-share Unicode: e1bd
  • icon-cc-share2 Unicode: e1be
  • icon-cycle Unicode: e1bf
  • icon-stop3 Unicode: e1c0
  • icon-stats2 Unicode: e1c1
  • icon-stats3 Unicode: e1c2
  • icon-cog2 Unicode: e1c3
  • icon-cogs Unicode: e1c4
  • icon-calendar2 Unicode: e1c5
  • icon-tablet2 Unicode: e1c6
  • icon-headphones2 Unicode: e1c7
  • icon-qrcode Unicode: e1c8
  • icon-images Unicode: e1c9
  • icon-users Unicode: e1ca
  • icon-map Unicode: e1cb
  • icon-map2 Unicode: e1cc
  • icon-connection Unicode: e1cd
  • icon-spinner Unicode: e1ce
  • icon-spinner2 Unicode: e1cf
  • icon-profile Unicode: e1d0
  • icon-mobile3 Unicode: e1d1
  • icon-bubble Unicode: e1d2
  • icon-bubbles Unicode: e1d3
  • icon-bubbles2 Unicode: e1d4
  • icon-feed2 Unicode: e1d5
  • icon-facebook2 Unicode: e1d6
  • icon-settings Unicode: e1d7
  • icon-play3 Unicode: e1d8
  • icon-bookmarks Unicode: e1d9
  • icon-windows8 Unicode: e1da
  • icon-barcode2 Unicode: e1db
  • icon-airplane Unicode: e1dc
  • icon-cloud8 Unicode: e1dd
  • icon-cloud-download Unicode: e1de
  • icon-cloud-upload Unicode: e1df
  • icon-qq Unicode: e1e1
  • icon-aid Unicode: e1e2
  • icon-address-book2 Unicode: e1e3
  • icon-expand Unicode: e1e4
  • icon-contract Unicode: e1e5
  • icon-alarm Unicode: e1e6
  • icon-cart Unicode: e1e7
  • icon-expand2 Unicode: e1e8
  • icon-contract2 Unicode: e1e9
  • icon-volume-high Unicode: e1ea
  • icon-volume-medium Unicode: e1eb
  • icon-volume-low Unicode: e1ec
  • icon-volume-mute Unicode: e1ed
  • icon-volume-mute2 Unicode: e1ee
  • icon-volume-increase Unicode: e1ef
  • icon-volume-decrease Unicode: e1f0
  • icon-sina-weibo Unicode: e1f1
  • icon-renren Unicode: e1f2
  • icon-airplane2 Unicode: e1f3
  • icon-qq2 Unicode: e1f4
颜色样式

颜色样式属于全局样式,你可以在任何地方使用预定义的颜色类,它们可以用来设置元素的背景色(background-color,类名: bg-*)前景色(color,类名: fg-*)边框色(border-color,类名: bd-*),下面将演示如何在文本和图标中使用这些颜色类,其它地方的使用方法一样:

设置文字的前景色(.fg-cyan)

设置文字的背景色(.bg-yellow)

设置文字的边框色,注意bd-*只能设置带有边框样式的边框色,原本没有边框的元素使用此类将看不到效果,你可以使用工具类.bded为元素设置一个边框(.bd-teal + .bded)

你还可以使用工具类.padded-text为文字添加一点填充来美化带背景的文本(.bg-amber + .padded-text)

同样也可以为带边框的文本添加填充来美化文本(.bd-pink + .bded + .padded-text)

还可以使用工具类.rounded为带背景或边框的文本添加圆角修饰(.bg-green + .padded-text + .rounded)

这是一个上列示例所有用到的类的组合(.bg-grayLight + .bd-cobalt + .fg-white + .bded + .padded-text + .rounded)

在图标中使用:


下面是所有预定义的颜色:

  • *-black
  • *-white
  • *-lime
  • *-green
  • *-emerald
  • *-teal
  • *-cyan
  • *-cobalt
  • *-indigo
  • *-violet
  • *-pink
  • *-magenta
  • *-crimson
  • *-red
  • *-orange
  • *-amber
  • *-yellow
  • *-brown
  • *-olive
  • *-steel
  • *-mauve
  • *-taupe
  • *-gray
  • *-dark
  • *-darker
  • *-transparent
  • *-darkBrown
  • *-darkCrimson
  • *-darkMagenta
  • *-darkIndigo
  • *-darkCyan
  • *-darkCobalt
  • *-darkTeal
  • *-darkEmerald
  • *-darkGreen
  • *-darkOrange
  • *-darkRed
  • *-darkPink
  • *-darkViolet
  • *-darkBlue
  • *-lightGreen
  • *-lightBlue
  • *-lighterBlue
  • *-lightTeal
  • *-lightOlive
  • *-lightOrange
  • *-lightPink
  • *-grayDark
  • *-grayDarker
  • *-grayLight
  • *-grayLighter
工具样式类

工具样式类也属于全局样式,你可以在任何地方使用它们,下面是所有工具类的示例:

对齐方式: 左对齐(.align-left) 右对齐(.align-right) 居中对齐(.align-center) 两端对齐(.align-justify)垂直顶端对齐(.valign-top)垂直居中对齐(.valign-center)垂直底部对齐(.valign-bottom)

文本修饰: 上划线(.topline)下划线(.underline)删除线(.deleteline)斜体文本(.italic)粗体文本(.bold)英文字母全部大写 - example(.uppercase)英文字母全部小写 - example(.lowercase)

水平边距: 距离左边5像素(.on-right)距离右边5像素(.on-left)距离左右两边各5像素(.on-center)距离左边10像素(.on-right-more)距离右边10像素(.on-left-more)距离左右两边各10像素(.on-center-more)

垂直边距: 距离顶部5像素(.on-bottom)距离底部5像素(.on-top)距离上下两端各5像素(.on-middle)距离顶部10像素(.on-bottom-more)距离底部10像素(.on-top-more)距离上下两端各10像素(.on-middle-more) —— 注意!垂直边距只对块级元素有效。

显示方式: 块级显示(.block)行内显示(.inline)行内块级显示(.inline-block)不显示(.hide)向左浮动(.pull-left)向右浮动(.pull-right)

盒模型修饰: 为元素设置边框(.bded,请配合bd-*边框颜色类使用)为元素设置5像素填充(.padded)为元素设置10像素填充(.padded-more)为文本元素设置最合适的填充(.padded-text)设置元素的边框为圆角(.rounded,元素必须带有背景或边框才能看到效果)

清理工具: 清理元素左右两边的浮动(.clear-float)修复子元素全部浮动导致的父容器高度塌陷(.clearfix)移除元素的边距(.clear-margin)移除元素的填充(.clear-padding)移除段落的缩进(.clear-indent)移除文本的粗体(.clear-bold)移除文本的斜体(.clear-italic)移除元素的浮动(.not-float)