概述
拼图跨屏响应式前端框架，针对常用的CSS基本重新定义，使其更符合实际应用，更适合中文的字符效果。
HTML5文档
拼图前端框架部份效果需要采用HTML5文档格式，使用拼图前端框架需要采用HTML5的文档类型：
复制代码 ...
移动设备优先
拼图前端框架针对移动设备做了友好开发，使项目在移动设备上有良好的表现，及优秀的用户体验。
为了确保适当的绘制和触屏缩放，需要在 之中添加viewport元数据标签。
复制代码
在移动设备浏览器上，通过为viewport meta标签添加user-scalable=no可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！
复制代码
容器
在拼图前端框架中，代码效果都包含在.container容器里。
复制代码
...容器空间.container容器左右各含10px的内填充(padding)，如果需要宽度100%容器，请使用.layout样式。
容器大小在不同屏幕大小，.container，具体表现为超小屏幕：自动；小屏幕：760px；中屏幕：1000px；大屏幕：1200px；当不需要限制容器宽度时，请使用.container-layout容器。
复制代码
建议的文档模版
在项目中，对于初学者，我们建议采用此文档格式，同时也可以根据自己的需求修改代码。
复制代码
您好，欢迎使用拼图前端框架!
自定义文件your.css及your.js为自定义文件，your.css应放在respond.js之前，不然在IE8下无法识别响应式样式。
文本
标题文本
HTML的标题文本，从h1到h6，同时也提供了.h1到.h6的样式。
h1. 拼图前端框架标题：24px
h2. 拼图前端框架标题：20px
h3. 拼图前端框架标题：18px
h4. 拼图前端框架标题：16px
h5. 拼图前端框架标题：14px
h6. 拼图前端框架标题：12px
复制代码
h1. 拼图前端框架标题
h2. 拼图前端框架标题
h3. 拼图前端框架标题
h4. 拼图前端框架标题
h5. 拼图前端框架标题
h6. 拼图前端框架标题
副标题
在标题内还可以包含small标签或.small样式，可以用来标记副标题，副文本为主文本字号的60%，当小于12px时显示为12px。
h1. 拼图前端框架标题 副标题文本
h2. 拼图前端框架标题 副标题文本
h3. 拼图前端框架标题 副标题文本
h4. 拼图前端框架标题 副标题文本
h5. 拼图前端框架标题 副标题文本
h6. 拼图前端框架标题 副标题文本
复制代码
h1. 拼图前端框架标题副标题文本
h2. 拼图前端框架标题副标题文本
h3. 拼图前端框架标题副标题文本
h4. 拼图前端框架标题副标题文本
h5. 拼图前端框架标题副标题文本
h6. 拼图前端框架标题副标题文本
段落文本
拼图将全局的字体大小设置为14px，包含div,p,table等，段落文本包含在标签p之内，其他标签同时也可以用.p实现，同时段落文本还设置了15px的底部边距。
拼图前端框架，是一款开源的专业网页前端UI解决方案，是HTML、CSS、Javascrip三者结合的前端框架。它配合js效果，提供了拼图的CSS、HTML标准，方便个性化、人性化的前端设计方法，受到设计师、前端工程师、程序员及网页设计初学者的特别喜爱。
拼图框架提供了CSS的重定义、元件样式的预设、样式组件、风格模块及Javascript效果，丰富了页面效果，同时让前端设计简单化、傻瓜化，任何初学者都可快速建设美观、简洁的页面。
复制代码
...
文本缩进
文本添加.text-indent样式，段落缩进2个字符。
拼图前端框架，是一款开源的专业网页前端UI解决方案，是HTML、CSS、Javascrip三者结合的前端框架。它配合js效果，提供了拼图的CSS、HTML标准，方便个性化、人性化的前端设计方法，受到设计师、前端工程师、程序员及网页设计初学者的特别喜爱。
拼图框架提供了CSS的重定义、元件样式的预设、样式组件、风格模块及Javascript效果，丰富了页面效果，同时让前端设计简单化、傻瓜化，任何初学者都可快速建设美观、简洁的页面。
复制代码
...
强调文本
包含加粗、斜体、下划线等效果。
强调文本
也叫着重文本，用strong标签包含，font-weight样式实现，用于强调作用。
拼图框架加粗文本效果
复制代码
加粗文本
斜体文本
用斜体文本强调，包含在i标签之内。
拼图框架斜体文本
复制代码
...
链接文本
超级链接，包含在a标签内。
链接文本：拼图框架
复制代码
文本对齐
包含左对齐，居中，右对齐等效果。
拼图框架左对齐
拼图框架居中对齐
拼图框架右对齐
拼图前端框架，是一款开源的专业网页前端UI解决方案，是HTML、CSS、Javascrip三者结合的前端框架。它配合js效果，提供了拼图的CSS、HTML标准，方便个性化、人性化的前端设计方法，受到设计师、前端工程师、程序员及网页设计初学者的特别喜爱。拼图框架提供了CSS的重定义、元件样式的预设、样式组件、风格模块及Javascript效果，丰富了页面效果，同时让前端设计简单化、傻瓜化，任何初学者都可快速建设美观、简洁的页面。
复制代码
...
...
...
...
文本字号
文本字号由font-size设置，拼图框架把字号分为特大号、大号、普通、小号、特小号五个等级。
特大号文本：拼图框架 24px
大号文本：拼图框架 16px
普通文本：拼图框架 14px
小号文本：拼图框架 12px
特小号文本：拼图框架 10px
复制代码
...
...
...
...
...
small小号文本
使用small标签或.text-small样式，可以设置成小号文本，大小为主文本的80%。
小号文本：拼图框架
复制代码
...
文本颜色
可通过样式改变文本颜色，也可以应用于文本链接，网页配色色系，除默认的颜色外，建议根据实际应用来修改，上一章节已介绍自定义颜色修改方法。
文本颜色：默认
文本颜色：主色
文本颜色：辅色
文本颜色：背景色
文本颜色：融合色
文本颜色：点缀色
复制代码
文本颜色：默认
文本颜色：主色
文本颜色：辅色
文本颜色：背景色
文本颜色：融合色
文本颜色：点缀色
黑灰白
无色色系，包含黑白灰三色，不建议改动，使用默认即可。
文本颜色：黑色
文本颜色：灰色
文本颜色：白色
复制代码
文本颜色：黑色
文本颜色：灰色
文本颜色：白色
提示颜色
包含红色、黄色、蓝色、绿色四种提示文字。
提示颜色：红色
提示颜色：黄色
提示颜色：蓝色
提示颜色：绿色
复制代码
提示颜色：红色
提示颜色：黄色
提示颜色：蓝色
提示颜色：绿色
柔和提示色
提示颜色：淡红
提示颜色：淡黄
提示颜色：淡蓝
提示颜色：淡绿
复制代码
提示颜色：淡红
提示颜色：淡黄
提示颜色：淡蓝
提示颜色：淡绿
文本行距
文本行距分为超小行距16px(.height-little)、小行距20px(.height-small)、默认24px(.height)、大行距30px(.height-big)、超大行距40px(.height-large)。
超小行距16px(.height-little)：
拼图：国内优秀的HTML、CSS、JS跨屏响应式开源前端框架，使用最新浏览器技术，为快速的前端开发提供一系列的文本、图标、媒体、表格、表单、按钮、菜单、网格系统等样式工具包，占用资源小，使用拼图可以快速构建简洁、优雅而且自动适应手机、平板、桌面电脑等设备的前端界面，让前端开发像玩游戏一样快乐而轻松。
小行距20px(.height-small)：
拼图前端框架在传统CSS框架的基本上，增加了HTML5、CSS3、JS等技术组合应用，应用最新的浏览器技术，同时兼容较早的浏览器，新旧结合，承前启后，开发者只需把框架文件引入到项目中，就可以初现快速的共同开发，改变以往建立PC网站同时，再建立手机网站的局面，实现一站响应所有设备，大大提高了开发效率。
默认24px(.height)：
移动优先、跨屏响应：拼图以移动设备为基点，优先适应于移动设备；从移动设备扩大到平板、桌面电脑等设备，实现跨屏响应，兼容桌面浏览器的同时，更适应了移动互联网的潮流。
大行距30px(.height-big)：
组件丰富、海量插件：拼图前端框架重新定义了CSS基础、常用元件及JS组件，可快速构架前端界面，实现跨屏响应。同时兼容所有jQuery插件，在项目中可以灵活使用，让前端开发如虎添翼。
超大行距40px(.height-large)：
轻量高效、国产开源：拼图基于应用广泛jQuery插件，轻量高效；相对于国外的前端框架，拼图前端框架侧重于对中文的支持，符合国人的视觉及体验，实现到国内主流浏览器的支持，减少兼容性测试时间，提高开发效率。
复制代码
...
...
...
...
...
颜色 新增
默认颜色
拼图响应式前端CSS框架自带颜色。
拼图默认颜色表
颜 色
类 名
描 述
色值
类 型
-
默认/黑色
#000
文本色/背景色/边框色
text-main/bg-main/border-main
主色
#0a8
文本色/背景色/边框色
text-sub/bg-sub/border-sub
辅色
#0ae
文本色/背景色/边框色
text-back/bg-back/border-back
背景色
#efe
文本色/背景色/边框色
text-mix/bg-mix/border-mix
融合色
#aed
文本色/背景色/边框色
text-dot/bg-dot/border-dot
点缀色
#e33
文本色/背景色/边框色
text-black/bg-black/border-black
黑色
#000
文本色/背景色/边框色
text-gray/bg-gray/border-gray
灰色
#999
文本色/背景色/边框色
text-white/bg-white/border-white
白色
#fff
文本色/背景色/边框色
text-red/bg-red/border-red
红色
#e33
文本色/背景色/边框色
text-yellow/bg-yellow/border-yellow
黄色
#f60
文本色/背景色/边框色
text-blue/bg-blue/border-blue
蓝色
#0ae
文本色/背景色/边框色
text-green/bg-green/border-green
绿色
#2c7
文本色/背景色/边框色
text-red-light/text-red-light/text-red-light
淡红
#fcd
文本色/背景色/边框色
text-yellow-light/bg-yellow-light/border-yellow-light
淡黄
#fec
文本色/背景色/边框色
text-blue-light/bg-blue-light/border-blue-light
淡蓝
#def
文本色/背景色/边框色
text-green-light/bg-green-light/border-green-light
淡绿
#ded
文本色/背景色/边框色
复制代码
...
自定义颜色
用户自行设定颜色，这里只提供颜色值表和自定义颜色命名规范。当然也可以使用：拼图自定义颜色生成工具快速生成样式。
十六进制颜色表
颜 色
英文代码
形象描述
十六进制
RGB
LightPink
浅粉红
#FFB6C1
255,182,193
Pink
粉红
#FFC0CB
255,192,203
Crimson
猩红
#DC143C
220,20,60
LavenderBlush
脸红的淡紫色
#FFF0F5
255,240,245
PaleVioletRed
苍白的紫罗兰红色
#DB7093
219,112,147
HotPink
热情的粉红
#FF69B4
255,105,180
DeepPink
深粉色
#FF1493
255,20,147
MediumVioletRed
适中的紫罗兰红色
#C71585
199,21,133
Orchid
兰花的紫色
#DA70D6
218,112,214
Thistle
蓟
#D8BFD8
216,191,216
plum
李子
#DDA0DD
221,160,221
Violet
紫罗兰
#EE82EE
238,130,238
Magenta
洋红
#FF00FF
255,0,255
Fuchsia
灯笼海棠(紫红色)
#FF00FF
255,0,255
DarkMagenta
深洋红色
#8B008B
139,0,139
Purple
紫色
#800080
128,0,128
MediumOrchid
适中的兰花紫
#BA55D3
186,85,211
DarkVoilet
深紫罗兰色
#9400D3
148,0,211
DarkOrchid
深兰花紫
#9932CC
153,50,204
Indigo
靛青
#4B0082
75,0,130
BlueViolet
深紫罗兰的蓝色
#8A2BE2
138,43,226
MediumPurple
适中的紫色
#9370DB
147,112,219
MediumSlateBlue
适中的板岩暗蓝灰色
#7B68EE
123,104,238
SlateBlue
板岩暗蓝灰色
#6A5ACD
106,90,205
DarkSlateBlue
深岩暗蓝灰色
#483D8B
72,61,139
Lavender
熏衣草花的淡紫色
#E6E6FA
230,230,250
GhostWhite
幽灵的白色
#F8F8FF
248,248,255
Blue
纯蓝
#0000FF
0,0,255
MediumBlue
适中的蓝色
#0000CD
0,0,205
MidnightBlue
午夜的蓝色
#191970
25,25,112
DarkBlue
深蓝色
#00008B
0,0,139
Navy
海军蓝
#000080
0,0,128
RoyalBlue
皇军蓝
#4169E1
65,105,225
CornflowerBlue
矢车菊的蓝色
#6495ED
100,149,237
LightSteelBlue
淡钢蓝
#B0C4DE
176,196,222
LightSlateGray
浅石板灰
#778899
119,136,153
SlateGray
石板灰
#708090
112,128,144
DoderBlue
道奇蓝
#1E90FF
30,144,255
AliceBlue
爱丽丝蓝
#F0F8FF
240,248,255
SteelBlue
钢蓝
#4682B4
70,130,180
LightSkyBlue
淡蓝色
#87CEFA
135,206,250
SkyBlue
天蓝色
#87CEEB
135,206,235
DeepSkyBlue
深天蓝
#00BFFF
0,191,255
LightBLue
淡蓝
#ADD8E6
173,216,230
PowDerBlue
火药蓝
#B0E0E6
176,224,230
CadetBlue
军校蓝
#5F9EA0
95,158,160
Azure
蔚蓝色
#F0FFFF
240,255,255
LightCyan
淡青色
#E1FFFF
225,255,255
PaleTurquoise
苍白的绿宝石
#AFEEEE
175,238,238
Cyan
青色
#00FFFF
0,255,255
Aqua
水绿色
#00FFFF
0,255,255
DarkTurquoise
深绿宝石
#00CED1
0,206,209
DarkSlateGray
深石板灰
#2F4F4F
47,79,79
DarkCyan
深青色
#008B8B
0,139,139
Teal
水鸭色
#008080
0,128,128
MediumTurquoise
适中的绿宝石
#48D1CC
72,209,204
LightSeaGreen
浅海洋绿
#20B2AA
32,178,170
Turquoise
绿宝石
#40E0D0
64,224,208
Auqamarin
绿玉\碧绿色
#7FFFAA
127,255,170
MediumAquamarine
适中的碧绿色
#00FA9A
0,250,154
MediumSpringGreen
适中的春天的绿色
#F5FFFA
245,255,250
MintCream
薄荷奶油
#00FF7F
0,255,127
SpringGreen
春天的绿色
#3CB371
60,179,113
SeaGreen
海洋绿
#2E8B57
46,139,87
Honeydew
蜂蜜
#F0FFF0
240,255,240
LightGreen
淡绿色
#90EE90
144,238,144
PaleGreen
苍白的绿色
#98FB98
152,251,152
DarkSeaGreen
深海洋绿
#8FBC8F
143,188,143
LimeGreen
酸橙绿
#32CD32
50,205,50
Lime
酸橙色
#00FF00
0,255,0
ForestGreen
森林绿
#228B22
34,139,34
Green
纯绿
#008000
0,128,0
DarkGreen
深绿色
#006400
0,100,0
Chartreuse
查特酒绿
#7FFF00
127,255,0
LawnGreen
草坪绿
#7CFC00
124,252,0
GreenYellow
绿黄色
#ADFF2F
173,255,47
OliveDrab
橄榄土褐色
#556B2F
85,107,47
Beige
米色(浅褐色)
#6B8E23
107,142,35
LightGoldenrodYellow
浅秋麒麟黄
#FAFAD2
250,250,210
Ivory
象牙
#FFFFF0
255,255,240
LightYellow
浅黄色
#FFFFE0
255,255,224
Yellow
纯黄
#FFFF00
255,255,0
Olive
橄榄
#808000
128,128,0
DarkKhaki
深卡其布
#BDB76B
189,183,107
LemonChiffon
柠檬薄纱
#FFFACD
255,250,205
PaleGodenrod
灰秋麒麟
#EEE8AA
238,232,170
Khaki
卡其布
#F0E68C
240,230,140
Gold
金
#FFD700
255,215,0
Cornislk
玉米色
#FFF8DC
255,248,220
GoldEnrod
秋麒麟
#DAA520
218,165,32
FloralWhite
花的白色
#FFFAF0
255,250,240
OldLace
老饰带
#FDF5E6
253,245,230
Wheat
小麦色
#F5DEB3
245,222,179
Moccasin
鹿皮鞋
#FFE4B5
255,228,181
Orange
橙色
#FFA500
255,165,0
PapayaWhip
番木瓜
#FFEFD5
255,239,213
BlanchedAlmond
漂白的杏仁
#FFEBCD
255,235,205
NavajoWhite
Navajo白
#FFDEAD
255,222,173
AntiqueWhite
古代的白色
#FAEBD7
250,235,215
Tan
晒黑
#D2B48C
210,180,140
BrulyWood
结实的树
#DEB887
222,184,135
Bisque
(浓汤)乳脂,番茄等
#FFE4C4
255,228,196
DarkOrange
深橙色
#FF8C00
255,140,0
Linen
亚麻布
#FAF0E6
250,240,230
Peru
秘鲁
#CD853F
205,133,63
PeachPuff
桃色
#FFDAB9
255,218,185
SandyBrown
沙棕色
#F4A460
244,164,96
Chocolate
巧克力
#D2691E
210,105,30
SaddleBrown
马鞍棕色
#8B4513
139,69,19
SeaShell
海贝壳
#FFF5EE
255,245,238
Sienna
黄土赭色
#A0522D
160,82,45
LightSalmon
浅鲜肉(鲑鱼)色
#FFA07A
255,160,122
Coral
珊瑚
#FF7F50
255,127,80
OrangeRed
橙红色
#FF4500
255,69,0
DarkSalmon
深鲜肉(鲑鱼)色
#E9967A
233,150,122
Tomato
番茄
#FF6347
255,99,71
MistyRose
薄雾玫瑰
#FFE4E1
255,228,225
Salmon
鲜肉(鲑鱼)色
#FA8072
250,128,114
Snow
雪
#FFFAFA
255,250,250
LightCoral
淡珊瑚色
#F08080
240,128,128
RosyBrown
玫瑰棕色
#BC8F8F
188,143,143
IndianRed
印度红
#CD5C5C
205,92,92
Red
纯红
#FF0000
255,0,0
Brown
棕色
#A52A2A
165,42,42
FireBrick
耐火砖
#B22222
178,34,34
DarkRed
深红色
#8B0000
139,0,0
Maroon
栗色
#800000
128,0,0
White
纯白
#FFFFFF
255,255,255
WhiteSmoke
白烟
#F5F5F5
245,245,245
Gainsboro
Gainsboro
#DCDCDC
220,220,220
LightGrey
浅灰色
#D3D3D3
211,211,211
Silver
银白色
#C0C0C0
192,192,192
DarkGray
深灰色
#A9A9A9
169,169,169
Gray
灰色
#808080
128,128,128
DimGray
暗淡的灰色
#696969
105,105,105
Black
纯黑
#000000
0,0,0
复制代码
/*
自定义颜色样式，请遵循如下格式
如果觉得麻烦可以使用拼图自定义颜色生成工具
*/
.text-lightpink,
a.text-lightpink:link,
a.text-lightpink:visited,
.button.border-lightpink,
blockquote.border-lightpink,
.pager.border-lightpink a,
.pager-prev.border-lightpink,
.pager-next.border-lightpink {
color: #FFB6C1;
}
.border-lightpink,
.border-lightpink .button,
.border-lightpink .tab-nav li a,
.border-lightpink .tab-body,
.button.bg-lightpink,
.selected.border-lightpink,
.pointer.border-lightpink li,
.nav.border-lightpink .active a,
.nav.nav-tabs.border-lightpink,
.nav-main.border-lightpink a,
.nav-main.border-lightpink .nav-head,
.pagination.border-lightpink li,
.pager.border-lightpink a {
border-color: #FFB6C1;
}
.bg-lightpink,
.border-lightpink .button.active,
.pointer.border-lightpink .active,
.nav-pills.border-lightpink .active a,
.nav-lightpink.border-lightpink .nav-head,
.pagination.border-lightpink .active {
background-color: #FFB6C1;
}
配色方案
常用的一些配色方案，仅供参考。当然也可以使用：拼图配色工具
复制代码
...
背景、边框、圆角
背景色
给元素添加背景色样式，突出或强调信息，实际应用中建议修改为自主定义的颜色。
默认：拼图前端框架。
主色：拼图前端框架，是一款开源的专业网页前端UI解决方案。
辅助色：是HTML、CSS、Javascrip三者结合的前端框架。
背景色：配合js效果，提供了拼图的CSS、HTML标准。
融合色：方便个性化、人性化的前端设计方法。
点缀色：受到设计师、前端工程师、程序员及网页设计初学者的喜爱。
复制代码
默认
主色
辅助色
背景色
融合色
点缀色
黑灰白
黑色：拼图框架提供了CSS的重定义、元件样式的预设、样式组件、风格模块及JS交互。
灰色：配合js效果，提供了拼图的CSS、HTML标准。
白色：让前端设计简单化、傻瓜化，任何初学者都可快速建设美观、简洁的页面。
复制代码
黑色
灰色
白色
反色
当使用的背景色为深色时，内部文字需要用白色文本，则加上.bg-inverse，实现文字颜色的处理。
无反色处理
反色处理
复制代码
无反色处理
反色处理
提示背景
提示背景包含红、黄、蓝、绿四种，分别表示危险、警告、主要、成功三种信号。
危险：拼图前端框架，是一款开源的专业网页前端UI解决方案。
警告：是HTML、CSS、Javascrip三者结合的前端框架。
主要：方便个性化、人性化的前端设计方法。
成功：配合js效果，提供了拼图的CSS、HTML标准。
复制代码
危险
警告
主要
成功
柔和色
淡红-危险：拼图前端框架，是一款开源的专业网页前端UI解决方案。
淡黄-警告：是HTML、CSS、Javascrip三者结合的前端框架。
淡蓝-主要：方便个性化、人性化的前端设计方法。
淡绿-成功：配合js效果，提供了拼图的CSS、HTML标准。
复制代码
淡红-危险
淡黄-警告
淡蓝-主要
淡绿-成功
边框颜色
定义边框颜色。
边框：默认
边框：主色
边框：辅色
边框：背景色
边框：融合色
边框：点缀色
复制代码
边框：默认
边框：主色
边框：辅色
边框：背景色
边框：融合色
边框：点缀色
黑灰白
边框：黑色
边框：灰色
边框：白色
复制代码
边框：黑色
边框：灰色
边框：白色
提示边框色
边框：红色
边框：黄色
边框：蓝色
边框：绿色
复制代码
边框：红色
边框：黄色
边框：蓝色
边框：绿色
柔和色
边框：淡红
边框：淡黄
边框：淡蓝
边框：淡绿
复制代码
边框：淡红
边框：淡黄
边框：淡蓝
边框：淡绿
边框大小、位置及样式
设置边框的大小粗细、上下左右的位置及不同的样式效果。
边框大小
边框大小分为默认(1px)、小边框.border-little(2px)、中边框.border-middle(3px)、大边框.boder-big(5px)、超大边框.border-large(10px)。
默认边框
小边框
中边框
大边框
超大边框
复制代码
默认边框
小边框
中边框
大边框
超大边框
边框位置
边框所在的上、右、下、左及左右、上下位置。
上边框
右边框
下边框
左边框
上下边框
左右边框
复制代码
上边框
右边框
下边框
左边框
上下边框
左右边框
边框样式
边框的样式，如虚线(.border-dashed)、点(.border-dotted)、双线(.border-double)、内凹(.border-inset)、外凸(.border-outset)等边框效果。
虚线边框
点边框
双线边框
内凹边框
外凸边框
复制代码
虚线边框
点边框
双线边框
内凹边框
外凸边框
组合效果
大小、位置、样式三种样式可以组合使用，调配成想要的效果。
绿色上下点边框
复制代码
绿色上下点边框
圆角
添加圆角.radius，小圆角.radius-small，大圆角.radius-big，圆.radius-circle样式，可以使背景或边框圆角化。
直角：0px
小圆角：2px
圆角：4px
大圆角：6px
绕圆角：2em
圆：50%
复制代码
直角：0px
小圆角：2px
圆角：4px
大圆角：6px
绕圆角：2em
圆：50%
在IE8及以下浏览器不支持
因IE8及以下浏览器不支持CSS3，所以圆角效果不显示，直接显示为直角。radius-none为直角，可以用来消除已有圆角效果的样式。
阴影 新增
添加阴影.box-shadow，小阴影.box-shadow-small，大阴影.box-shadow-big，无阴影.box-shadow-none 可覆盖原有阴影样式。
无阴影.box-shadow-none：0px，可以覆盖已有的阴影
小阴影.box-shadow-small：2px
阴影.box-shadow：4px，默认阴影
大阴影.box-shadow-big：6px
复制代码
无阴影.box-shadow-none：0px，可以覆盖已有的阴影
小阴影.box-shadow-small：2px
阴影.box-shadow：4px，默认阴影
大阴影.box-shadow-big：6px
在IE8及以下浏览器不支持
因IE8及以下浏览器不支持CSS3，所以阴影效果不显示。box-shadow-none，可以用来消除已有阴影效果的样式。
边界、填充
包含边界(.margin)和填充(.padding)，在理解他们与边框、内容的关系时，应该先了解下CSS的盒子模型。
盒子模型
每个盒子都有：边界、边框、填充、内容四个属性；每个属性都包括四个部分：上、右、下、左；这四部分可同时设置，也可分别设置；举个箱子例子，最里面的物品(内容)、物品由泡沫(填充)保护着、然后箱子(边框)、最后是箱子离你的距离(边界)，这就是一个完整的盒子模型。
边界：margin
边框：border
填充：padding
内容：content
边界位置
包含上、右、下、左及四个都有的位置属性，默认的.margin外边距大小为10px。
默认边界
上边界
右边界
下边界
左边界
复制代码
默认边界
上边界
右边界
下边界
左边界
边界大小
边界大小包含超小边界2px(.margin-little)、小边界5px(.margin-small)、默认边界10px(.margin)、大边界20px(.margin-big)、超大边界30px(.margin-large)五个等级。
超小边界：2px
小边界：5px
默认边界：10px
大边界：20px
超大边界：30px
复制代码
超小边界
小边界
默认边界
大边界
超大边界
边界的大小和位置
边界的大小和位置.margin-(大小)-(位置)，可以相互组合成所需要的边界效果。
上超小、右小、底大、左超大
复制代码
上超小、右小、底大、左超大
边界兼容margin-top及margin-bottom由于hasLayout渲染导致无效状态，建议使用padding或者用下面的解决办法。
解决办法
在父元素加上边框(0，none无效)：border:solid 1px #fff;
在父级元素加内填充：padding:1px;
在父级元素加浮动：overflow:hidden;
该盒子加浮动： float:left; (clear:both;)
该元素绝对定位：position:absolute;
填充位置
和边界类似，填充也包含上、右、下、左及四个都有的位置属性，默认的.padding外边距大小为10px。
默认填充
上填充
右填充
下填充
左填充
复制代码
默认填充
上填充
右填充
下填充
左填充
填充大小
填充大小包含超小填充2px(.padding-little)、小填充5px(.padding-small)、默认填充10px(.padding)、大填充20px(.padding-big)、超大填充30px(.padding-large)五个等级。
超小填充：2px
小填充：5px
默认填充：10px
大填充：20px
超大填充：30px
复制代码
超小填充
小填充
默认填充
大填充
超大填充
大小及位置组合
填充的位置和大小.padding-(大小)-(位置)，可以相互组合成所需要的填充效果。
上超小、右小、底大、左超大
复制代码
上超小、右小、底大、左超大
盒子示例
使用边界、边框、填充三者的内容元素示例。
边界、边框、填充
上大边界、右中边框、下小填充
复制代码
边界、边框、填充
上大边界、右中边框、下小填充
CSS动画
CSS3动画样式，包含渐变，摇晃，震动，旋转等丰富的前端效果。
淡入淡出
使元素具备淡入淡出显示效果，点击按钮即可预览动画。
淡入动画
示例
淡入.fadein 上淡入.fadein-top 右淡入.fadein-right 下淡入.fadein-bottom 左淡入.fadein-left
淡出动画
示例
淡出.fadeout 上淡出.fadeout-top 右淡出.fadeout-right 下淡出.fadeout-bottom 左淡出.fadeout-left
使用方法给元素添加样式即可，如淡入，元素使用.fadein即可。
复制代码
淡入动画
强调动画
提示的强调CSS动画效果。
示例
弹跳.bounce 弹入.bouncein 弹出.bounceout 转入.rotatein 转出.rotateout 闪烁.flash 震颤.shake 摇摆.swing 摇晃.wobble 震铃.ring
悬浮效果
鼠标悬浮即可实现相关效果。
示例
弹跳.bounce-hover 闪烁.flash-hover 震颤.shake-hover 摇摆.swing-hover 摇晃.wobble-hover 震铃.ring-hover
旋转
持续旋转动画。
旋转： 悬浮旋转：
复制代码
水平线
水平线
水平线：空白的水平线：
复制代码
颜色
可以结合背景色，改变水平线的颜色。
默认主色辅色背景色融合色点缀色黑色灰色白色红色黄色蓝色绿色
复制代码
图片
定义图片样式，形状等样式。
图片样式
使用.radius-(*)样式，可以给图片快速添加效果，改变图片样式。
复制代码
IE兼容IE6,7,8不支持CSS3，不支持圆角效果，直接用直角显示。
图片外边框
使用.img-border样式，给图片添加外边框效果。
复制代码
填充边距
使用padding-(*)系列样式，可以改变图片外边框的填充边距。
复制代码
边框颜色
可以添加border-(*)边框，改变边框颜色。
复制代码
响应式图片
为了让图片更友好显示，拼图框架设置了响应式图片，让图片宽度为100%；可按比例缩放，但不超过父元素，
复制代码
表单
表单输入框、浏览文件、选项按钮等基本效果；多个表单元素使用及表单验证请查看"元件"下的"表单组"及"JS组件"下的"表单验证"文档。
输入框
输入框
复制代码
带label的输入框
账号
复制代码
多行文本框
多行文本框
复制代码
浏览文件
浏览文件
+ 浏览文件
复制代码
多颜色效果a链接标签同时可以使用按钮的相关样式，如.border-main,.bg-main等。
+ 浏览文件
复制代码
下拉菜单
拼图框架：
起步
CSS
元件
模块
javascript组件
复制代码
单选多选
单选框
拼图框架
复制代码
多选框
拼图框架
复制代码
按钮样式单选或多选也可以采用按钮的形式，通过js来控制样式，详情参考"JS组件"的单选多选。
按钮式单选或多选
示例
是否
起步CSS元件
状态
焦点状态
当选择或输入时的样式效果。
复制代码
禁用状态
复制代码
尺寸
通过input-big,input-small设置不同的大号及小号输入框。
大号选择框
默认选择框
小号选择框
复制代码
颜色及圆角效果
给输入框架上.border-(*)及.bg-(*)样式，可以改变其边框及背景颜色；深色背景时需要同时加上.bg-inverse改变文本的颜色。
复制代码
直角或圆角
去除圆角请添加.radius-none样式，半圆角添加.radius-rounded样式。
复制代码
按钮
按钮样式
结合背景.bg-(*)和边框border-(*)的样式，添加至按钮中，可快速改变其颜色及背景。
默认 主色 辅色 背景色 融合色 点缀色 黑色 灰色 白色
复制代码
默认
主色
辅色
背景色
融合色
点缀色
黑色
灰色
白色
背景色按钮
默认 主色 辅色 背景色 融合色 点缀色 黑色 灰色 白色
复制代码
默认
主色
辅色
背景色
融合色
点缀色
黑色
灰色
白色
提示按钮
包含危险、警告、主要、成功等样式。
危险 警告 主要 成功 危险 警告 主要 成功 危险 警告 主要 成功 危险 警告 主要 成功
复制代码
危险
警告
主要
成功
危险
警告
主要
成功
危险
警告
主要
成功
危险
警告
主要
成功
直角和圆角按钮
使用.radius-(*)圆角系列样式，可以改变按钮的圆角形状。
直角按钮 圆角按钮
复制代码
直角按钮
圆角按钮
按钮尺寸
通过button-large,button-big,button-small,button-little设置不同的大小。
特大尺寸按钮 大尺寸按钮 默认尺寸按钮 小尺寸按钮 特小尺寸按钮
复制代码
...
...
...
...
...
按钮块
给按钮添加.button-block样式，按钮的宽即为100%，不超过其父元素宽。
按钮块效果按钮块效果
复制代码
...
...
禁用效果
通过将按钮的背景色做50%的褪色处理就可以呈现出无法点击的效果。
禁用效果 禁用效果 禁用效果
复制代码
禁用效果
禁用效果
禁用效果