概述
拼图跨屏响应式前端框架，针对常用的CSS基本重新定义，使其更符合实际应用，更适合中文的字符效果。
HTML5文档
拼图前端框架部份效果需要采用HTML5文档格式，使用拼图前端框架需要采用HTML5的文档类型：
<![CDATA[
<!DOCTYPE html>
<html lang="zh-cn">
...
</html>
]]>
移动设备优先
拼图前端框架针对移动设备做了友好开发，使项目在移动设备上有良好的表现，及优秀的用户体验。
为了确保适当的绘制和触屏缩放，需要在
之中添加viewport元数据标签。
<![CDATA[
<meta name="viewport" content="width=device-width, initial-scale=1.0">
]]>
在移动设备浏览器上，通过为viewport meta标签添加user-scalable=no可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！
<![CDATA[
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
]]>
当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari(ios7.0版本以后，safari上已看不到效果)
<![CDATA[
<meta content="yes" name="apple-mobile-web-app-capable">
]]>
将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式(可选default、black、black-translucent)
<![CDATA[
<meta content="black" name="apple-mobile-web-app-status-bar-style">
]]>
忽略将页面中的数字识别为电话号码
<![CDATA[
<meta content="telephone=no" name="format-detection">
]]>
忽略Android平台中对邮箱地址的识别
<![CDATA[
<meta content="email=no" name="format-detection">
]]>
预加载常用图片用来提高手机下的访问速度
<![CDATA[
<link rel="prefetch" href="预加载的图片" />
]]>
容器
在拼图前端框架中，代码效果都包含在.container容器里。
<![CDATA[
<!DOCTYPE html>
<html lang="zh-cn">
<head>
...
</head>
<body>
<div class="container">
...
</div>
</body>
</html>
]]>
容器空间 .container容器左右各含10px的内填充(padding)，如果需要宽度100%容器，请使用.layout样式。
容器大小 在不同屏幕大小，.container，具体表现为超小屏幕：自动；小屏幕：760px；中屏幕：1000px；大屏幕：1200px；当不需要限制容器宽度时，请使用.container-layout容器。
<![CDATA[
<div class="layout">
...
</div>
<div class="container-layout">
...
</div>
]]>
建议的文档模版
在项目中，对于初学者，我们建议采用此文档格式，同时也可以根据自己的需求修改代码。
<![CDATA[
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>拼图前端框架HTML模版</title>
<meta name="keywords" content="关键词" />
<meta name="description" content="描述" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="pintuer.css">
<link rel="stylesheet" href="your.css">
<script src="jquery.js"></script>
<script src="pintuer.js"></script>
<script src="respond.js"></script>
<script src="your.js"></script>
</head>
<body>
<div class="container">
<h1>
您好，欢迎使用拼图前端框架!
</h1>
</div>
</body>
</html>
]]>
自定义文件 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
<![CDATA[
<h1>
h1. 拼图前端框架标题
</h1>
<h2>
h2. 拼图前端框架标题
</h2>
<h3>
h3. 拼图前端框架标题
</h3>
<h4>
h4. 拼图前端框架标题
</h4>
<h5>
h5. 拼图前端框架标题
</h5>
<h6>
h6. 拼图前端框架标题
</h6>
]]>
副标题
在标题内还可以包含small标签或.small样式，可以用来标记副标题，副文本为主文本字号的60%，当小于12px时显示为12px。
h1. 拼图前端框架标题 副标题文本
h2. 拼图前端框架标题 副标题文本
h3. 拼图前端框架标题 副标题文本
h4. 拼图前端框架标题 副标题文本
h5. 拼图前端框架标题 副标题文本
h6. 拼图前端框架标题 副标题文本
<![CDATA[
<h1>
h1. 拼图前端框架标题<small>副标题文本</small>
</h1>
<h2>
h2. 拼图前端框架标题<small>副标题文本</small>
</h2>
<h3>
h3. 拼图前端框架标题<small>副标题文本</small>
</h3>
<h4>
h4. 拼图前端框架标题<small>副标题文本</small>
</h4>
<h5>
h5. 拼图前端框架标题<small>副标题文本</small>
</h5>
<h6>
h6. 拼图前端框架标题<small>副标题文本</small>
</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效果，丰富了页面效果，同时让前端设计简单化、傻瓜化，任何初学者都可快速建设美观、简洁的页面。
<![CDATA[
<p class="text-indent">
...
</p>
]]>
强调文本
包含加粗、斜体、下划线等效果。
强调文本
也叫着重文本，用strong标签包含，font-weight样式实现，用于强调作用。
<![CDATA[
<strong>加粗文本</strong>
]]>
斜体文本
用斜体文本强调，包含在i标签之内。
<![CDATA[
<i>...</i>
]]>
链接文本
超级链接，包含在a标签内。
<![CDATA[
<a href="#">链接文本：拼图框架</a>
]]>
文本对齐
包含左对齐，居中，右对齐等效果。
拼图框架左对齐
拼图框架居中对齐
拼图框架右对齐
拼图前端框架，是一款开源的专业网页前端UI解决方案，是HTML、CSS、Javascrip三者结合的前端框架。它配合js效果，提供了拼图的CSS、HTML标准，方便个性化、人性化的前端设计方法，受到设计师、前端工程师、程序员及网页设计初学者的特别喜爱。拼图框架提供了CSS的重定义、元件样式的预设、样式组件、风格模块及Javascript效果，丰富了页面效果，同时让前端设计简单化、傻瓜化，任何初学者都可快速建设美观、简洁的页面。
<![CDATA[
<p class="text-left">
...
</p>
<p class="text-center">
...
</p>
<p class="text-right">
...
</p>
<p class="text-justify">
...
</p>
]]>
文本字号
文本字号由font-size设置，拼图框架把字号分为特大号、大号、普通、小号、特小号五个等级。
特大号文本：拼图框架 24px
大号文本：拼图框架 16px
普通文本：拼图框架 14px
小号文本：拼图框架 12px
特小号文本：拼图框架 10px
<![CDATA[
<div class="text-large">
...
</div>
<div class="text-big">
...
</div>
<div class="text-default">
...
</div>
<div class="text-small">
...
</div>
<div class="text-little">
...
</div>
]]>
small小号文本
使用small标签或.text-small样式，可以设置成小号文本，大小为主文本的80%。
<![CDATA[
<small>...</small>
]]>
文本颜色
可通过样式改变文本颜色，也可以应用于文本链接，网页配色色系，除默认的颜色外，建议根据实际应用来修改，上一章节已介绍自定义颜色修改方法。
文本颜色：默认
文本颜色：主色
文本颜色：辅色
文本颜色：背景色
文本颜色：融合色
文本颜色：点缀色
<![CDATA[
<p>
文本颜色：默认
</p>
<p class="text-main">
文本颜色：主色
</p>
<p class="text-sub">
文本颜色：辅色
</p>
<p class="text-back">
文本颜色：背景色
</p>
<p class="text-mix">
文本颜色：融合色
</p>
<p class="text-dot">
文本颜色：点缀色
</p>
]]>
黑灰白
无色色系，包含黑白灰三色，不建议改动，使用默认即可。
<![CDATA[
<p class="text-black">
文本颜色：黑色
</p>
<p class="text-gray">
文本颜色：灰色
</p>
<p class="text-white">
文本颜色：白色
</p>
]]>
提示颜色
包含红色、黄色、蓝色、绿色四种提示文字。
提示颜色：红色
提示颜色：黄色
提示颜色：蓝色
提示颜色：绿色
<![CDATA[
<p class="text-red">
提示颜色：红色
</p>
<p class="text-yellow">
提示颜色：黄色
</p>
<p class="text-blue">
提示颜色：蓝色
</p>
<p class="text-green">
提示颜色：绿色
</p>
]]>
柔和提示色
提示颜色：淡红
提示颜色：淡黄
提示颜色：淡蓝
提示颜色：淡绿
<![CDATA[
<p class="text-red-light">
提示颜色：淡红
</p>
<p class="text-yellow-light">
提示颜色：淡黄
</p>
<p class="text-blue-light">
提示颜色：淡蓝
</p>
<p class="text-green-light">
提示颜色：淡绿
</p>
]]>
文本行距
文本行距分为超小行距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插件，轻量高效；相对于国外的前端框架，拼图前端框架侧重于对中文的支持，符合国人的视觉及体验，实现到国内主流浏览器的支持，减少兼容性测试时间，提高开发效率。
<![CDATA[
<p class="height-little">
...
</p>
<p class="height-small">
...
</p>
<p class="height">
...
</p>
<p class="height-big">
...
</p>
<p class="height-large">
...
</p>
]]>
文本换行新增
设置文字换行，.text-break 默认自动换行/.text-breakall 字母在单词内换行/.text-unbreak 强制不换行.
宽度80%自动换行
拼图：国内优秀的HTML、CSS、JS跨屏响应式开源前端框架，使用最新浏览器技术，为快速的前端开发提供一系列的文本、图标、媒体、表格、表单、按钮、菜单、网格系统等样式工具包，占用资源小，使用拼图可以快速构建简洁、优雅而且自动适应手机、平板、桌面电脑等设备的前端界面，让前端开发像玩游戏一样快乐而轻松。
英文字母内换行
Jigsaw puzzle is excellent responsive front-end CSS open source framework, domestic front frame pioneer and leader, automatically adapt to the mobile phone, tablet, computer equipment, such as let the front-end development happy game, simple, flexible and convenient.
强制不换行(注：浏览器中看到的并不是拼图BUG，可以做强制不换行演示，可能会影响到美观，望体谅。
移动优先、跨屏响应：拼图以移动设备为基点，优先适应于移动设备；从移动设备扩大到平板、桌面电脑等设备，实现跨屏响应。
<![CDATA[
<p class="text-break">
...
</p>
<p class="text-breakall">
...
</p>
<p class="text-unbreak">
...
</p>
]]>
文本截断新增
指定宽度后截断文本并用省略。
截断文字(只能截断一行文字并出现省略号，此样式多用于文章标题)
拼图：国内优秀的HTML、CSS、JS跨屏响应式开源前端框架，使用最新浏览器技术，为快速的前端开发提供一系列的文本、图标、媒体、表格、表单、按钮、菜单、网格系统等样式工具包，占用资源小，使用拼图可以快速构建简洁、优雅而且自动适应手机、平板、桌面电脑等设备的前端界面，让前端开发像玩游戏一样快乐而轻松。
<![CDATA[
<p class="text-more">
...
</p>
]]>
颜色 新增
默认颜色
拼图响应式前端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/bg-red-light/border-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
文本色/背景色/边框色
<![CDATA[
...
]]>
自定义颜色
十六进制颜色表
颜 色
英文代码
形象描述
十六进制
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
<![CDATA[
/*
自定义颜色样式，请遵循如下格式
如果觉得麻烦可以使用拼图自定义颜色生成工具
*/
.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;
}
]]>
配色方案
<![CDATA[
...
]]>
背景、边框、圆角
背景色
给元素添加背景色样式，突出或强调信息，实际应用中建议修改为自主定义的颜色。
默认：拼图前端框架。
主色：拼图前端框架，是一款开源的专业网页前端UI解决方案。
辅助色：是HTML、CSS、Javascrip三者结合的前端框架。
背景色：配合js效果，提供了拼图的CSS、HTML标准。
融合色：方便个性化、人性化的前端设计方法。
点缀色：受到设计师、前端工程师、程序员及网页设计初学者的喜爱。
<![CDATA[
<p class="bg">
默认</p>
<p class="bg-main">
主色</p>
<p class="bg-sub">
辅助色</p>
<p class="bg-back">
背景色</p>
<p class="bg-mix">
融合色</p>
<p class="bg-dot">
点缀色</p>
]]>
黑灰白
黑色：拼图框架提供了CSS的重定义、元件样式的预设、样式组件、风格模块及JS交互。
灰色：配合js效果，提供了拼图的CSS、HTML标准。
白色：让前端设计简单化、傻瓜化，任何初学者都可快速建设美观、简洁的页面。
<![CDATA[
<p class="bg-black">
黑色</p>
<p class="bg-gray">
灰色</p>
<p class="bg-white">
白色</p>
]]>
反色
当使用的背景色为深色时，内部文字需要用白色文本，则加上.bg-inverse，实现文字颜色的处理。
<![CDATA[
<p class="bg-main">
无反色处理</p>
<p class="bg-main bg-inverse">
反色处理</p>
]]>
提示背景
提示背景包含红、黄、蓝、绿四种，分别表示危险、警告、主要、成功三种信号。
危险：拼图前端框架，是一款开源的专业网页前端UI解决方案。
警告：是HTML、CSS、Javascrip三者结合的前端框架。
主要：方便个性化、人性化的前端设计方法。
成功：配合js效果，提供了拼图的CSS、HTML标准。
<![CDATA[
<p class="bg-red">
危险</p>
<p class="bg-yellow">
警告</p>
<p class="bg-blue">
主要</p>
<p class="bg-green">
成功</p>
]]>
柔和色
淡红-危险：拼图前端框架，是一款开源的专业网页前端UI解决方案。
淡黄-警告：是HTML、CSS、Javascrip三者结合的前端框架。
淡蓝-主要：方便个性化、人性化的前端设计方法。
淡绿-成功：配合js效果，提供了拼图的CSS、HTML标准。
<![CDATA[
<p class="bg-red-light">
淡红-危险</p>
<p class="bg-yellow-light">
淡黄-警告</p>
<p class="bg-blue-light">
淡蓝-主要</p>
<p class="bg-green-light">
淡绿-成功</p>
]]>
边框颜色
定义边框颜色。
边框：默认
边框：主色
边框：辅色
边框：背景色
边框：融合色
边框：点缀色
<![CDATA[
<div class="border">
边框：默认</div>
<div class="border border-main">
边框：主色</div>
<div class="border border-sub">
边框：辅色</div>
<div class="border border-back">
边框：背景色</div>
<div class="border border-mix">
边框：融合色</div>
<div class="border border-dot">
边框：点缀色</div>
]]>
黑灰白
<![CDATA[
<div class="border border-black">
边框：黑色</div>
<div class="border border-gray">
边框：灰色</div>
<div class="border border-white">
边框：白色</div>
]]>
提示边框色
<![CDATA[
<div class="border border-red">
边框：红色</div>
<div class="border border-yellow">
边框：黄色</div>
<div class="border border-blue">
边框：蓝色</div>
<div class="border border-green">
边框：绿色</div>
]]>
柔和色
<![CDATA[
<div class="border border-red-light">
边框：淡红</div>
<div class="border border-yellow-light">
边框：淡黄</div>
<div class="border border-blue-light">
边框：淡蓝</div>
<div class="border border-green-light">
边框：淡绿</div>
]]>
边框大小、位置及样式
设置边框的大小粗细、上下左右的位置及不同的样式效果。
边框大小
边框大小分为默认(1px)、无边框(none)、小边框.border-little(2px)、中边框.border-middle(3px)、大边框.boder-big(5px)、超大边框.border-large(10px)。
默认边框
没有边框
小边框
中边框
大边框
超大边框
<![CDATA[
<div class="border">
默认边框</div>
<div class="border border-small">
小边框</div>
<div class="border border-middle">
中边框</div>
<div class="border border-big">
大边框</div>
<div class="border border-large">
超大边框</div>
]]>
边框位置
边框所在的上、右、下、左及左右、上下位置。
上边框
右边框
下边框
左边框
上下边框
左右边框
<![CDATA[
<div class="border-small border-top">
上边框</div>
<div class="border-small border-right">
右边框</div>
<div class="border-small border-bottom">
下边框</div>
<div class="border-small border-left">
左边框</div>
<div class="border-small border-top-bottom">
上下边框</div>
<div class="border-small border-left-right">
左右边框</div>
]]>
边框样式
边框的样式，如虚线(.border-dashed)、点(.border-dotted)、双线(.border-double)、内凹(.border-inset)、外凸(.border-outset)等边框效果。
<![CDATA[
<div class="border border-small border-dashed">
虚线边框</div>
<div class="border border-small border-dotted">
点边框</div>
<div class="border border-small border-double">
双线边框</div>
<div class="border border-small border-inset">
内凹边框</div>
<div class="border border-small border-outset">
外凸边框</div>
]]>
组合效果
大小、位置、样式三种样式可以组合使用，调配成想要的效果。
<![CDATA[
<div class="border-green border-top-bottom border-dotted">
绿色上下点边框</div>
]]>
圆角
添加圆角.radius，小圆角.radius-small，大圆角.radius-big，圆.radius-circle样式，可以使背景或边框圆角化。
直角：0px
小圆角：2px
圆角：4px
大圆角：6px
绕圆角：2em
圆：50%
<![CDATA[
<div class="radius-none">
直角：0px</div>
<div class="radius-small">
小圆角：2px</div>
<div class="radius">
圆角：4px</div>
<div class="radius-big">
大圆角：6px</div>
<div class="radius-rounded">
绕圆角：2em</div>
<div class="radius-circle">
圆：50%</div>
]]>
在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
<![CDATA[
<div class="alert box-shadow-none">
无阴影.box-shadow-none：0px，可以覆盖已有的阴影</div>
<br>
<div class="alert box-shadow-small">
小阴影.box-shadow-small：2px</div>
<br>
<div class="alert box-shadow">
阴影.box-shadow：4px，默认阴影</div>
<br>
<div class="alert box-shadow-big">
大阴影.box-shadow-big：6px</div>
]]>
在IE8及以下浏览器不支持
因IE8及以下浏览器不支持CSS3，所以阴影效果不显示。box-shadow-none，可以用来消除已有阴影效果的样式。
边界、填充
包含边界(.margin)和填充(.padding)，在理解他们与边框、内容的关系时，应该先了解下CSS的盒子模型。
盒子模型
每个盒子都有：边界、边框、填充、内容四个属性；每个属性都包括四个部分：上、右、下、左；这四部分可同时设置，也可分别设置；举个箱子例子，最里面的物品(内容)、物品由泡沫(填充)保护着、然后箱子(边框)、最后是箱子离你的距离(边界)，这就是一个完整的盒子模型。
边界位置
包含上、右、下、左及四个都有的位置属性，默认的.margin外边距大小为10px。
<![CDATA[
<div class="margin">
默认边界</div>
<div class="margin-top">
上边界</div>
<div class="margin-right">
右边界</div>
<div class="margin-bottom">
下边界</div>
<div class="margin-left">
左边界</div>
]]>
边界大小
边界大小包含超小边界2px(.margin-little)、小边界5px(.margin-small)、默认边界10px(.margin)、大边界20px(.margin-big)、超大边界30px(.margin-large)五个等级。
<![CDATA[
<div class="margin-little">
超小边界</div>
<div class="margin-small">
小边界</div>
<div class="margin">
默认边界</div>
<div class="margin-big">
大边界</div>
<div class="margin-large">
超大边界</div>
]]>
边界的大小和位置
边界的大小和位置.margin-(大小)-(位置)，可以相互组合成所需要的边界效果。
<![CDATA[
<div class="margin-little-top margin-small-right margin-big-bottom margin-large-left">
上超小、右小、底大、左超大</div>
]]>
边界兼容 margin-top及margin-bottom由于hasLayout渲染导致无效状态，建议使用padding或者用下面的解决办法。
解决办法
填充位置
和边界类似，填充也包含上、右、下、左及四个都有的位置属性，默认的.padding外边距大小为10px。
<![CDATA[
<div class="padding">
默认填充</div>
<div class="padding-top">
上填充</div>
<div class="padding-right">
右填充</div>
<div class="padding-bottom">
下填充</div>
<div class="padding-left">
左填充</div>
]]>
填充大小
填充大小包含超小填充2px(.padding-little)、小填充5px(.padding-small)、默认填充10px(.padding)、大填充20px(.padding-big)、超大填充30px(.padding-large)五个等级。
<![CDATA[
<div class="padding-little">
超小填充</div>
<div class="padding-small">
小填充</div>
<div class="padding">
默认填充</div>
<div class="padding-big">
大填充</div>
<div class="padding-large">
超大填充</div>
]]>
大小及位置组合
填充的位置和大小.padding-(大小)-(位置)，可以相互组合成所需要的填充效果。
<![CDATA[
<div class="padding-little-top padding-small-right padding-big-bottom padding-large-left">
上超小、右小、底大、左超大</div>
]]>
盒子示例
使用边界、边框、填充三者的内容元素示例。
<![CDATA[
<div class="margin padding border">
边界、边框、填充</div>
<div class="margin-big-top padding-small-bottom border-middle border-right">
上大边界、右中边框、下小填充</div>
]]>
CSS动画
CSS3动画样式，包含渐变，摇晃，震动，旋转等丰富的前端效果。
淡入淡出
使元素具备淡入淡出显示效果，点击按钮即可预览动画。
淡入动画
示例
淡入.fadein
上淡入.fadein-top
右淡入.fadein-right
下淡入.fadein-bottom
左淡入.fadein-left
淡出动画
示例
淡出.fadeout
上淡出.fadeout-top
右淡出.fadeout-right
下淡出.fadeout-bottom
左淡出.fadeout-left
使用方法 给元素添加样式即可，如淡入，元素使用.fadein即可。
<![CDATA[
<div class="fadein">
淡入动画</div> <span class="fadeout">淡出动画</span>
]]>
强调动画
提示的强调CSS动画效果。
示例
弹跳.bounce
弹入.bouncein
弹出.bounceout
转入.rotatein
转出.rotateout
闪烁.flash
震颤.shake
摇摆.swing
摇晃.wobble
震铃.ring
悬浮效果
鼠标悬浮即可实现相关效果。
示例
弹跳.bounce-hover
闪烁.flash-hover
震颤.shake-hover
摇摆.swing-hover
摇晃.wobble-hover
震铃.ring-hover
旋转
持续旋转动画。
<![CDATA[
<span class="icon-asterisk rotate"></span>
<span class="icon-refresh rotate"></span>
<span class="icon-cog rotate-hover"></span>
<span class="icon-spinner rotate-hover"></span>
]]>
水平线
水平线
<![CDATA[
<hr />
<hr class="space" />
]]>
颜色
可以结合背景色，改变水平线的颜色。
默认
<![CDATA[
<hr />
<hr class="bg-main" />
<hr class="bg-sub" />
<hr class="bg-back" />
<hr class="bg-mix" />
<hr class="bg-dot" />
<hr class="bg-black" />
<hr class="bg-gray" />
<hr class="bg-white" />
<hr class="bg-red" />
<hr class="bg-yellow" />
<hr class="bg-blue" />
<hr class="bg-green" />
]]>
图片
定义图片样式，形状等样式。
图片样式
使用.radius-(*)样式，可以给图片快速添加效果，改变图片样式。
<![CDATA[
<img src="images/128.png" width="128" height="128" class="radius-small" />
<img src="images/128.png" width="128" height="128" class="radius" />
<img src="images/128.png" width="128" height="128" class="radius-big" />
<img src="images/128.png" width="128" height="128" class="radius-circle" />
]]>
IE兼容 IE6,7,8不支持CSS3，不支持圆角效果，直接用直角显示。
图片外边框
使用.img-border样式，给图片添加外边框效果。
<![CDATA[
<img src="..." width="128" height="128" class="img-border radius-small" />
<img src="..." width="128" height="128" class="img-border radius" />
<img src="..." width="128" height="128" class="img-border radius-big" />
<img src="..." width="128" height="128" class="img-border radius-circle" />
]]>
填充边距
使用padding-(*)系列样式，可以改变图片外边框的填充边距。
<![CDATA[
<img src="..." width="128" height="128" class="img-border radius-small padding-little" />
<img src="..." width="128" height="128" class="img-border radius padding-small" />
<img src="..." width="128" height="128" class="img-border radius-big padding" />
<img src="..." width="128" height="128" class="img-border radius-circle padding-big" />
]]>
边框颜色
可以添加border-(*)边框，改变边框颜色。
<![CDATA[
<img src="..." class="img-border border-red radius-small" />
<img src="..." class="img-border border-yellow radius" />
<img src="..." class="img-border border-blue radius-big" />
<img src="..." class="img-border border-green radius-circle" />
]]>
响应式图片
为了让图片更友好显示，拼图框架设置了响应式图片，让图片宽度为100%；可按比例缩放，但不超过父元素，
<![CDATA[
<img src="..." class="img-responsive" alt="响应式图片" />
]]>
表单输入框、浏览文件、选项按钮等基本效果；多个表单元素使用及表单验证请查看"元件"下的"表单组"及"JS组件"下的"表单验证"文档。
输入框
<![CDATA[
<form>
<input type="text" class="input" placeholder="文本框" />
</form>
]]>
带label的输入框
<![CDATA[
<form>
<label class="label">
账号</label>
<input type="text" class="input" placeholder="用户名/邮箱/手机" />
</form>
]]>
多行文本框
<![CDATA[
<form>
<label class="label">
多行文本框</label>
<textarea rows="5" class="input" placeholder="多行文本框"></textarea>
</form>
]]>
浏览文件
浏览文件
<![CDATA[
<form>
<a class="button input-file" href="javascript:void(0);">+ 浏览文件<input size="100" type="file" /></a>
</form>
]]>
多颜色效果 a链接标签同时可以使用按钮的相关样式，如.border-main,.bg-main等。
<![CDATA[
<form>
<a class="button input-file bg-green" href="javascript:void(0);">+ 浏览文件<input size="100" type="file" name="logo" /></a>
</form>
]]>
下拉菜单
<![CDATA[
<form>
<label class="label">
拼图框架：</label>
<select class="input">
<option>起步</option>
<option>CSS</option>
<option>元件</option>
<option>模块</option>
<option>javascript组件</option>
</select>
</form>
]]>
单选多选
单选框
<![CDATA[
<form>
<label>
<input type="radio">拼图框架
</label>
</form>
]]>
多选框
<![CDATA[
<form>
<label>
<input type="checkbox">拼图框架
</label>
</form>
]]>
按钮样式 单选或多选也可以采用按钮的形式，通过js来控制样式，详情参考"JS组件"的单选多选。
按钮式单选或多选
焦点状态
当选择或输入时的样式效果。
<![CDATA[
<form>
<input type="text" id="doc-input-focus" class="input" size="30" placeholder="焦点状态效果" />
</form>
]]>
禁用状态
<![CDATA[
<form>
<input type="text" size="30" class="input" disabled="disabled" placeholder="禁用状态效果" />
</form>
]]>
通过input-big,input-small设置不同的大号及小号输入框。
<![CDATA[
<form>
<input type="text" class="input input-big" size="20" placeholder="大号输入框" />
<input type="text" size="20" class="input" placeholder="默认输入框" />
<input type="text" class="input input-small" size="20" placeholder="小号输入框" />
<select class="input input-big">
<option>大号选择框</option>
</select>
<select class="input">
<option>默认选择框</option>
</select>
<select class="input input-small">
<option>小号选择框</option>
</select>
</form>
]]>
给输入框架上.border-(*)及.bg-(*)样式，可以改变其边框及背景颜色；深色背景时需要同时加上.bg-inverse改变文本的颜色。
<![CDATA[
<form>
<input type="text" class="input border-yellow-light bg-yellow-light" placeholder="文本框" />
<input type="text" class="input border-green bg-green bg-inverse" placeholder="文本框" />
</form>
]]>
直角或圆角
去除圆角请添加.radius-none样式，半圆角添加.radius-rounded样式。
<![CDATA[
<form>
<input type="text" class="input radius-none" placeholder="文本框" />
<input type="text" class="input radius-rounded" placeholder="文本框" />
</form>
]]>
结合背景.bg-(*)和边框border-(*)的样式，添加至按钮中，可快速改变其颜色及背景。
默认
主色
辅色
背景色
融合色
点缀色
黑色
灰色
白色
<![CDATA[
<button class="button">
默认</button>
<button class="button border-main">
主色</button>
<button class="button border-sub">
辅色</button>
<button class="button border-back">
背景色</button>
<button class="button border-mix">
融合色</button>
<button class="button border-dot">
点缀色</button>
<button class="button border-black">
黑色</button>
<button class="button border-gray">
灰色</button>
<button class="button border-white">
白色</button>
]]>
背景色按钮
默认
主色
辅色
背景色
融合色
点缀色
黑色
灰色
白色
<![CDATA[
<button class="button bg">
默认</button>
<button class="button bg-main">
主色</button>
<button class="button bg-sub">
辅色</button>
<button class="button bg-back">
背景色</button>
<button class="button bg-mix">
融合色</button>
<button class="button bg-dot">
点缀色</button>
<button class="button bg-black">
黑色</button>
<button class="button bg-gray">
灰色</button>
<button class="button bg-white">
白色</button>
]]>
提示按钮
包含危险、警告、主要、成功等样式。
危险
警告
主要
成功
危险
警告
主要
成功
危险
警告
主要
成功
危险
警告
主要
成功
<![CDATA[
<button class="button border-red">
危险</button>
<button class="button border-yellow">
警告</button>
<button class="button border-blue">
主要</button>
<button class="button border-green">
成功</button>
<button class="button border-red-light">
危险</button>
<button class="button border-yellow-light">
警告</button>
<button class="button border-blue-light">
主要</button>
<button class="button border-green-light">
成功</button>
<button class="button bg-red">
危险</button>
<button class="button bg-yellow">
警告</button>
<button class="button bg-blue">
主要</button>
<button class="button bg-green">
成功</button>
<button class="button bg-red-light">
危险</button>
<button class="button bg-yellow-light">
警告</button>
<button class="button bg-blue-light">
主要</button>
<button class="button bg-green-light">
成功</button>
]]>
直角和圆角按钮
使用.radius-(*)圆角系列样式，可以改变按钮的圆角形状。
<![CDATA[
<button class="button bg-main radius-none">
直角按钮</button>
<button class="button bg-sub radius-rounded">
圆角按钮</button>
]]>
通过button-large,button-big,button-small,button-little设置不同的大小。
特大尺寸按钮
大尺寸按钮
默认尺寸按钮
小尺寸按钮
特小尺寸按钮
<![CDATA[
<button class="button button-large">
...</button>
<button class="button button-big">
...</button>
<button class="button">
...</button>
<button class="button button-small">
...</button>
<button class="button button-little">
...</button>
]]>
按钮块
给按钮添加.button-block样式，按钮的宽即为100%，不超过其父元素宽。
<![CDATA[
<button class="button button-block">
...</button>
<button class="button bg-dot button-big button-block">
...</button>
]]>
禁用效果
通过将按钮的背景色做50%的褪色处理就可以呈现出无法点击的效果。
<![CDATA[
<button type="button" class="button border-main" disabled="disabled">
禁用效果</button>
<button type="button" class="button bg-main" disabled="disabled">
禁用效果</button>
<button type="button" class="button " disabled="disabled">
禁用效果</button>
]]>
按钮样式可以于button,input,a等元素。
<![CDATA[
<button class="button">
button按钮效果</button>
<input class="button" type="button" value="input按钮效果" /> <a class="button" href="#">链接a按钮效果</a>
]]>
带图标的按钮
<![CDATA[
<button class="button icon-heart">喜欢</button>
<button class="button"><span class="icon-search"></span>搜索</button>
<button class="button"><span class="icon-spinner rotate"></span>加载</button>
]]>
列表
包含无序列表、有序列表、内联列表、描述列表等效果。
无序列表
顺序不重要的排序
拼图前端框架，是一款开源的专业网页前端UI解决方案。
是HTML、CSS、Javascrip三者结合的前端框架。
配合js效果，提供了拼图的CSS、HTML标准。
方便个性化、人性化的前端设计方法。
受到设计师、前端工程师、程序员及网页设计初学者的喜爱。
拼图前端框架，是一款开源的专业网页前端UI解决方案。
是HTML、CSS、Javascrip三者结合的前端框架。
配合js效果，提供了拼图的CSS、HTML标准。
方便个性化、人性化的前端设计方法。
受到设计师、前端工程师、程序员及网页设计初学者的喜爱。
拼图框架提供了CSS的重定义、元件样式的预设。
拼图框架提供了CSS的重定义、元件样式的预设、样式组件、风格模块及Javascript效果。
丰富了页面效果，同时让前端设计简单化、傻瓜化。
任何初学者都可快速建设美观、简洁的页面。
有序列表
按顺序排列的内容。
拼图前端框架，是一款开源的专业网页前端UI解决方案。
是HTML、CSS、Javascrip三者结合的前端框架。
配合js效果，提供了拼图的CSS、HTML标准。
方便个性化、人性化的前端设计方法。
受到设计师、前端工程师、程序员及网页设计初学者的喜爱。
拼图框架提供了CSS的重定义、元件样式的预设。
拼图框架提供了CSS的重定义、元件样式的预设、样式组件、风格模块及Javascript效果。
丰富了页面效果，同时让前端设计简单化、傻瓜化。
任何初学者都可快速建设美观、简洁的页面。
采用中文有序列表，添加样式list-cn，部份浏览器不支持，另外，加上行高样式height-(*)，可以改变列表的行距。
拼图前端框架，是一款开源的专业网页前端UI解决方案。
是HTML、CSS、Javascrip三者结合的前端框架。
配合js效果，提供了拼图的CSS、HTML标准。
方便个性化、人性化的前端设计方法。
受到设计师、前端工程师、程序员及网页设计初学者的喜爱。
拼图框架提供了CSS的重定义、元件样式的预设。
拼图框架提供了CSS的重定义、元件样式的预设、样式组件、风格模块及Javascript效果。
丰富了页面效果，同时让前端设计简单化、傻瓜化。
任何初学者都可快速建设美观、简洁的页面。
<![CDATA[
<ol class="list-cn height">
<li>
...</li>
</ol>
]]>
字母排序
拼图前端框架，是一款开源的专业网页前端UI解决方案。
是HTML、CSS、Javascrip三者结合的前端框架。
配合js效果，提供了拼图的CSS、HTML标准。
<![CDATA[
<ol class="list-alpha">
<li>
...</li>
</ol>
]]>
无样式列表
添加list-unstyle样式，可以去除列表样式效果。
拼图前端框架，是一款开源的专业网页前端UI解决方案。
是HTML、CSS、Javascrip三者结合的前端框架。
配合js效果，提供了拼图的CSS、HTML标准。
方便个性化、人性化的前端设计方法。
受到设计师、前端工程师、程序员及网页设计初学者的喜爱。
拼图前端框架，是一款开源的专业网页前端UI解决方案。
是HTML、CSS、Javascrip三者结合的前端框架。
配合js效果，提供了拼图的CSS、HTML标准。
方便个性化、人性化的前端设计方法。
受到设计师、前端工程师、程序员及网页设计初学者的喜爱。
拼图框架提供了CSS的重定义、元件样式的预设。
拼图框架提供了CSS的重定义、元件样式的预设、样式组件、风格模块及Javascript效果。
丰富了页面效果，同时让前端设计简单化、傻瓜化。
任何初学者都可快速建设美观、简洁的页面。
<![CDATA[
<ul class="list-unstyle height">
<li>...</li>
</ul>
]]>
内联列表
通过设置display: inline-block;并添加少量的padding，将所有元素放置于同一列。
<![CDATA[
<ul class="list-inline">
<li>...</li>
</ul>
]]>
描述
带有描述内容的列表。
拼图框架
是一款开源的专业网页前端UI解决方案
框架应用
配合js效果，提供了拼图的CSS、HTML标准。
广受欢迎
受到设计师、前端工程师、程序员及网页设计初学者的喜爱。
<![CDATA[
<dl>
<dt>...</dt>
<dd>
...</dd>
</dl>
]]>
水平排列的描述
添加样式 dl-inline
拼图前端框架
是一款开源的专业网页前端UI解决方案，是HTML、CSS、Javascrip三者结合的前端框架。它配合js效果，提供了拼图的CSS、HTML标准，方便个性化、人性化的前端设计方法，受到设计师、前端工程师、程序员及网页设计初学者的特别喜爱。
学习使用
拼图框架提供了CSS的重定义、元件样式的预设、样式组件、风格模块及Javascript效果，丰富了页面效果，同时让前端设计简单化、傻瓜化，任何初学者都可快速建设美观、简洁的页面。
<![CDATA[
<dl class="dl-inline clearfix">
<dt>...</dt>
<dd>
...</dd>
</dl>
]]>
表格
表格列表
加表格添加.table样式，使表格分行。
起步
CSS
元件
模块
下载前端框架
文本
网格系统
框架
框架包含的文件
图片
图标
头部
基本页面
水平线
标签
Banner
响应式布局
按钮
徽章
导航
浏览器支持
列表
进度条
面包屑
<![CDATA[
<table class="table">
<tr>
<th>
...
</th>
</tr>
<tr>
<td>
...
</td>
</tr>
</table>
]]>
条纹表格
添加table-striped样式，表格每隔行增加背景，IE8以下不支持此效果。
起步
CSS
元件
模块
下载前端框架
文本
网格系统
框架
框架包含的文件
图片
图标
头部
基本页面
水平线
标签
Banner
响应式布局
按钮
徽章
导航
浏览器支持
列表
进度条
面包屑
<![CDATA[
<table class="table table-striped">
<tr>
<th>
...
</th>
</tr>
<tr>
<td>
...
</td>
</tr>
</table>
]]>
带边框的表格
起步
CSS
元件
模块
下载前端框架
文本
网格系统
框架
框架包含的文件
图片
图标
头部
基本页面
水平线
标签
Banner
响应式布局
按钮
徽章
导航
浏览器支持
列表
进度条
面包屑
<![CDATA[
<table class="table table-bordered">
<tr>
<th>
...
</th>
</tr>
<tr>
<td>
...
</td>
</tr>
</table>
]]>
鼠标悬停
鼠标悬停时显示当前行的背景色。
起步
CSS
元件
模块
下载前端框架
文本
网格系统
框架
框架包含的文件
图片
图标
头部
基本页面
水平线
标签
Banner
响应式布局
按钮
徽章
导航
浏览器支持
列表
进度条
面包屑
<![CDATA[
<table class="table table-hover">
<tr>
<th>
...
</th>
</tr>
<tr>
<td>
...
</td>
</tr>
</table>
]]>
紧缩表格
添加.table-condensed样式，减少表格间距。
起步
CSS
元件
模块
下载前端框架
文本
网格系统
框架
框架包含的文件
图片
图标
头部
基本页面
水平线
标签
Banner
响应式布局
按钮
徽章
导航
浏览器支持
列表
进度条
面包屑
<![CDATA[
<table class="table table-condensed">
<tr>
<th>
...
</th>
</tr>
<tr>
<td>
...
</td>
</tr>
</table>
]]>
单元格背景
含当前.current，红.red，黄.yellow，蓝.blue，绿.green五种色彩。
起步
CSS
元件
模块
JS组件
下载前端框架
文本
网格系统
框架
概述
框架包含的文件
图片
图标
头部
窗口工具
基本页面
水平线
标签
Banner
选项标签
响应式布局
按钮
徽章
导航
对话框
浏览器支持
列表
进度条
面包屑
提示
框架包含的文件
图片
图标
头部
警告框
基本页面
水平线
标签
Banner
表单验证
框架包含的文件
图片
图标
头部
警告框
基本页面
水平线
标签
Banner
表单验证
<![CDATA[
<table>
<!--行-->
<tr class="current">
<td>
...
</td>
</tr>
<tr class="red">
<td>
...
</td>
</tr>
<tr class="yellow">
<td>
...
</td>
</tr>
<tr class="blue">
<td>
...
</td>
</tr>
<tr class="green">
<td>
...
</td>
</tr>
<!--单元格-->
<tr>
<td class="current">
>...
</td>
</tr>
<tr>
<td class="red">
...
</td>
</tr>
<tr>
<td class="yellow">
...
</td>
</tr>
<tr>
<td class="blue">
...
</td>
</tr>
<tr>
<td class="green">
...
</td>
</tr>
</table>
]]>
响应式表格-默认
将任何.table包裹在.table-responsive中即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于768px宽度时，水平滚动条消失。
起步
CSS
元件
模块
下载前端框架
文本
网格系统
框架
框架包含的文件
图片
图标
头部
基本页面
水平线
标签
Banner
响应式布局
按钮
徽章
导航
浏览器支持
列表
进度条
面包屑
<![CDATA[
<div class="table-responsive">
<table class="table">
<tr>
<th>
...
</th>
</tr>
<tr>
<td>
...
</td>
</tr>
</table>
</div>
]]>
响应式表格-移动端纵向显示 新增
将任何.table包裹在.table-responsive-y 中即可创建响应式表格，其会在小屏幕设备上（小于800px）水平滚动。当屏幕大于768px宽度时，水平滚动条消失，并且不再纵向排列。 因，响应式表格-移动端纵向显示比较特殊，请严格按照示例中的方式进行编码。
起步
CSS
元件
模块
下载前端框架
文本
网格系统
框架
框架包含的文件
图片
图标
头部
基本页面
水平线
标签
Banner
响应式布局
按钮
徽章
导航
浏览器支持
列表
进度条
面包屑
<![CDATA[
<div class="table-responsive-y">
<table class="table table-hover">
<thead>
<tr>
<th>
起步
</th>
<th>
CSS
</th>
<th>
元件
</th>
<th>
模块
</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="起步">
下载前端框架
</td>
<td data-title="CSS">
文本
</td>
<td data-title="元件">
网格系统
</td>
<td data-title="模块">
框架
</td>
</tr>
<tr>
<td data-title="起步">
框架包含的文件
</td>
<td data-title="CSS">
图片
</td>
<td data-title="元件">
图标
</td>
<td data-title="模块">
头部
</td>
</tr>
<tr>
<td data-title="起步">
基本页面
</td>
<td data-title="CSS">
水平线
</td>
<td data-title="元件">
标签
</td>
<td data-title="模块">
Banner
</td>
</tr>
<tr>
<td data-title="起步">
响应式布局
</td>
<td data-title="CSS">
按钮
</td>
<td data-title="元件">
徽章
</td>
<td data-title="模块">
导航
</td>
</tr>
<tr>
<td data-title="起步">
浏览器支持
</td>
<td data-title="CSS">
列表
</td>
<td data-title="元件">
进度条
</td>
<td data-title="模块">
面包屑
</td>
</tr>
</tbody>
</table>
</div>
]]>
引用
引用样式
拼图前端框架，是一款开源的专业网页前端UI解决方案，是HTML、CSS、Javascrip三者结合的前端框架。它配合js效果，提供了拼图的CSS、HTML标准，方便个性化、人性化的前端设计方法，受到设计师、前端工程师、程序员及网页设计初学者的特别喜爱。
<![CDATA[
<blockquote>
<p>
...</p>
</blockquote>
]]>
配合代码显示
增加strong及smll标签，有不同的样式效果。
拼图框架
拼图前端框架，是一款开源的专业网页前端UI解决方案，是HTML、CSS、Javascrip三者结合的前端框架。
它配合js效果，提供了拼图的CSS、HTML标准，方便个性化、人性化的前端设计方法。
<![CDATA[
<blockquote>
<strong>...</strong>
<p>
...</p>
<small>...</small>
</blockquote>
]]>
向右对齐效果
拼图框架
拼图前端框架，是一款开源的专业网页前端UI解决方案，是HTML、CSS、Javascrip三者结合的前端框架。
它配合js效果，提供了拼图的CSS、HTML标准，方便个性化、人性化的前端设计方法。
<![CDATA[
<blockquote class="quote-floatright">
<strong>...</strong>
<p>
...</p>
<small>...</small>
</blockquote>
]]>
引用颜色
使用.border-(*)系列样式，可以立即改变引用的边框颜色。
拼图前端框架
拼图前端框架，是一款开源的专业网页前端UI解决方案，是HTML、CSS、Javascrip三者结合的前端框架。
拼图前端框架
拼图前端框架，是一款开源的专业网页前端UI解决方案，是HTML、CSS、Javascrip三者结合的前端框架。
拼图前端框架
拼图前端框架，是一款开源的专业网页前端UI解决方案，是HTML、CSS、Javascrip三者结合的前端框架。
拼图前端框架
拼图前端框架，是一款开源的专业网页前端UI解决方案，是HTML、CSS、Javascrip三者结合的前端框架。
拼图前端框架
拼图前端框架，是一款开源的专业网页前端UI解决方案，是HTML、CSS、Javascrip三者结合的前端框架。
<![CDATA[
<blockquote class="border-main">
<strong>...</strong>
<p>
...</p>
</blockquote>
<blockquote class="border-main quote-floatright">
<strong>...</strong>
<p>
...</p>
</blockquote>
]]>
浮动
设置浮动
通过这两个class让页面元素左右浮动。 !important被用来避免某些问题。
<![CDATA[
<div class="float-left">
...</div>
<div class="float-right">
...</div>
]]>
清除浮动
使用.clearfix清除任意页面元素的浮动。
<![CDATA[
<div class="clearfix">
...</div>
]]>
显示隐藏
显示和隐藏
通过.show 和 .hidden可以强制显示或隐藏元素。这两个class使用了!important以避免冲突，原因和快速浮动类似。
<![CDATA[
<div class="show">
...</div>
<div class="hidden">
...</div>
]]>
打印显示隐藏
使用下面的class可以针对打印机隐藏或显示某些内容
<![CDATA[
<div class="print-show">
...</div>
<div class="print-hidden">
...</div>
]]>
透明新增
快速设置层、文字、图片等透明。
背景透明
通过.opacity设置背景是否透明，.opacity 默认，完全透明/.opacity-small 透明20%/.opacity-middle 透明一半/.opacity-big 透明80%/.opacity-none 不透明（用户重置已设置透明度的样式）。
完全透明
透明20%
透明一半
透明80%
不透明
<![CDATA[
<div class="bg-green opacity">完全透明</div>
<div class="bg-green opacity-small">透明20%</div>
<div class="bg-green opacity-middle">透明一半</div>
<div class="bg-green opacity-big">透明80%</div>
<div class="bg-green opacity-none">不透明</div>
<!--其他透明度需自行定义，复制如下代码，更改opacity=后的数值即可-->
.opacity-名称自拟{filter:alpha(opacity=100);-moz-opacity:1.0;-khtml-opacity: 1.0;opacity: 1.0;}
]]>
文字透明
通过.opacity设置背景是否透明，.opacity 默认，完全透明/.opacity-small 透明20%/.opacity-middle 透明一半/.opacity-big 透明80%/.opacity-none 不透明（用户重置已设置透明度的样式）。
完全透明
透明20%
透明一半
透明80%
不透明
<![CDATA[
<div class="bg-green opacity">完全透明</div>
<div class="text-green opacity-small">透明20%</div>
<div class="text-green opacity-middle">透明一半</div>
<div class="text-green opacity-big">透明80%</div>
<div class="text-green opacity-none">不透明</div>
<!--其他透明度需自行定义，复制如下代码，更改opacity=后的数值即可-->
.opacity-名称自拟{filter:alpha(opacity=100);-moz-opacity:1.0;-khtml-opacity: 1.0;opacity: 1.0;}
]]>
