下载拼图框架
在线获取拼图跨屏响应式前端框架，开始快捷、高效的前端开发之旅。
官方下载拼图框架文件
从官方直接下载拼图前端框架文件，包含CSS，JS等，解压缩后即引入项目使用。
从专业源码站下载
各大源码站均有拼图前端框架下载，可从第三方源码站下载拼图前端框架，主要有：
框架包含的文件
将下载文件解压缩后，可以看到拼图前端框架的目录及文件，文件按不同目录放置，同时提供了字体图标相关文件。
拼图前端框架包含的文件
下载压缩包之后，将其解压缩到任意目录即可看到以下目录结构：
<![CDATA[
pintuer/
├── pintuer.css
├── pintuer.js
├── demo.url
└── readme.txt
]]>
正式版只放置了拼图的css及js文件，另外demo.url、readme.txt为拼图前端框架的示例及说明。
文件调整 因压缩版与未压缩版文件大小相差很小，正式版不再提供pintuer.min.css及pintuer.min.js文件。
依赖于jQuery
拼图前端框架相关的Javascript插件都在jQuery框架下工作，拼图框架提供了jQuery插件，也可以根据需要更换jQuery的版本。
拼图前端框架依赖于jQuery 请注意，拼图前端框架的 JavaScript 插件都依赖 jQuery，因此jQuery必须在pintuer.js之前引入，jQuery 1.x版本均支持拼图前端框架。
浏览器支持
拼图框架的目标是适合PC及移动设备端最新版的浏览器，同时对历史版本的浏览器同样支持，但对一些老旧浏览器的支持会有偏差，部份效果无法显示，但功能是完整的。
支持的浏览器
我们坚决支持以下浏览器的最新版本：
浏览器缩放 当设置浏览器大百分比之时，会引布局错位，所有网站都有此问题，因此可以忽略这情况。
IE 6,7,8支持
IE6 ,IE7
因微软于2013年对xp的IE6,7用户强制升级至IE8，win7的IE8强制升级至IE9，虽然大部份效果支持IE6,7，但拼图并不再针对IE6及IE7特别支持。
Internet Explorer 8
拼图前端框架支持Internet Explorer8版本，然而，因其不支持CSS3及HTML5，所以圆角、阴影、动画等CSS3及HTML5的专有属性是无法被支持。
IE 8 与 Respond.js
浏览器渲染及高速模式
兼容模式处理
拼图并不支持 IE 的兼容模式。为了让 IE 浏览器运行最新的渲染模式下，建议将此 meta 标签加入到你页面的 head 中：
<![CDATA[
<meta http-equiv="X-UA-Compatible" content="IE=edge">
]]>
高速模式
国内浏览器厂商一般都支持兼容模式（即 IE 内核）和高速模式（即 webkit 内核），不幸的是，所有国产浏览器都是默认使用兼容模式，这就造成由于低版本 IE （IE8 及以下）内核让基于 拼图 构建的网站展现效果很糟糕的情况。
为了让浏览器运行高速模式下，建议将此 meta 标签加入到你页面的 head 中：
<![CDATA[
<meta name="renderer" content="webkit">
]]>
移动优先、跨屏响应
拼图以移动设备为基点，优先适应于移动设备；从移动设备扩大到平板、桌面电脑等设备，实现跨屏响应，兼容桌面的同时，更适应了移动互联网的潮流。
跨屏响应式布局
拼图内置了相关的响应式类，如响应式网格系统、响应式图片、响应式表格等，使用响应式类，可以在各种屏幕大小上自动适合设备。
模板示例
<![CDATA[
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>拼图前端框架跨屏响应式模板</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="pintuer.css">
<script src="jquery.js"></script>
<script src="pintuer.js"></script>
<script src="respond.js"></script>
</head>
<body>
<div class="container">
<div class="line">
<div class="xs6 xm4 xb3">xs6 xm4 xb3</div>
<div class="xs6 xm4 xb3">xs6 xm4 xb3</div>
<div class="xs6 xm4 xb3">xs6 xm4 xb3</div>
<div class="xs6 xm4 xb3">xs6 xm4 xb3</div>
</div>
<div class="table-responsive">
<table class="table">...</table>
</div>
<img src="..." class="img-responsive" alt="...">
</div>
</body>
</html>
]]>
非响应式布局
当然，也可以采用非响应式布局方式，这种情况在所有设备上看到的页面大小是固定的，对特定项目可以使用；正常情况下，默认是响应式的布局方式。
禁用方法
模板示例
<![CDATA[
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>拼图前端框架非响应式模板</title>
<link rel="stylesheet" href="pintuer.css">
<script src="jquery.js"></script>
<script src="pintuer.js"></script>
<script src="respond.js"></script>
</head>
<body>
<div class="container">
<div class="line">
<div class="x3">
x3
</div>
<div class="x9">
x9
</div>
</div>
<div class="line">
<div class="x4">
x4
</div>
<div class="x4">
x4
</div>
<div class="x4">
x4
</div>
</div>
<div class="line">
<div class="x6">
x6
</div>
<div class="x6">
x6
</div>
</div>
</div>
</body>
</html>
]]>
基本页面
使用以下简洁的HTML模版，或在模块的基础上根据自有需要修改。
HTML模版
使用简单的HTML模版页面，包含CSS及JS文件，建议根据自己的需求做相关的修改再使用，如关键字、书签、代码等。
<![CDATA[
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>拼图前端框架HTML模版</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="pintuer.css">
<script src="jquery.js"></script>
<script src="pintuer.js"></script>
<script src="respond.js"></script>
</head>
<body>
<h1>
您好，欢迎使用拼图前端框架!
</h1>
</body>
</html>
]]>
引用顺序 jQuery.js在pintuer.js之前引用，如有自定义的CSS或JS，请在pintuer.css及pintuer.js之后引用，同时为了IE8下正常使用响应式，自定义的CSS文件应在respond.js之前引用。
自定义颜色
拼图框架包含可三类颜色体系，第一类为可自定义的前端配色体系，包含主色、辅色、背景色、融合色和点缀色；第2类为无色系，包含黑、灰、白三色；第三类为彩色系,包含红、黄、蓝、绿四色，同时也由此衍生的淡红、淡黄、淡蓝、淡绿的背景色。
可定义的色系
三类色系中，拼图提供固定的第二、第三类色系的同时，也提供了可自定义的第一类色系，可根据项目要求，自主修改配色体系，使得前端色彩配置灵活而丰富。 具体修改方法为，打开pintuer.css，将文档拉到页尾，即可看到可供修改的颜色；
<![CDATA[
/*--------自定义链接颜色(可选)--------*/
a{color:#333;text-decoration:none;}
/*链接-颜色*/
a:focus,a:hover{color:#0a8;}
/*链接-悬浮颜色*/
/*--------自定义文本颜色--------*/
* {color:#08a;}
/*文本-主色*/
* {color:#0ae;}
/*文本-辅色*/
* {color:#efe;}
/*文本-背景色*/
* {color:#aed;}
/*文本-融合色*/
* {color:#e33;}
/*文本-点缀色*/
/*--------自定义背景色--------*/
* {background-color:#0a8;}
/*背景-主色*/
* {background-color:#0ae;}
/*背景-辅色*/
* {background-color:#efe;}
/*背景-背景色*/
* {background-color:#aed;}
/*背景-融合色*/
* {background-color:#e33;}
/*背景-点缀色*/
/*--------自定义边框色--------*/
* {border-color:#0a8;}
/*边框-主色*/
* {border-color:#0ae;}
/*边框-辅色*/
* {border-color:#efe;}
/*边框-背景色*/
* {border-color:#aed;}
/*边框-融合色*/
* {border-color:#e33;}
/*边框-点缀色*/
/*--------自定义按钮悬浮文本、边框及背景色--------*/
* {color:#fff;border-color:#0ab;background-color:#0ab;}
/*主色-文本-边框-背景*/
* {color:#fff;border-color:#09f;background-color:#09f;}
/*配色-文本-边框-背景*/
* {color:#333;border-color:#cec;background-color:#cec;}
/*背景色-文本-边框-背景*/
* {color:#333;border-color:#cec;background-color:#cec;}
/*融合-文本色-边框-背景*/
* {color:#fff;border-color:#f00;background-color:#f00;}
/*点缀色-文本-边框-背景*/
]]>
颜色修改 链接可根据系统可选择性的修改；其他的文本色、背景色、边框色改成自身项目对应的主色、辅色、背景色、融合色及点缀色，按钮悬浮色一般会用较深点或较淡点颜色，具体自主定义。
改为直角
框架默认的样式，大部份采用圆角样式，因IE8以下浏览器不支持CSS3，显示的是直角；当在支持CSS3的浏览器上，如果想要改为直角形式，只需在pintuer.css最后或自定义的CSS文件加上以下代码，即实现了样式的直角化。
<![CDATA[
blockquote,.drop-menu,.nav ul,.nav.nav-main li:first-child,.nav.nav-main li:first-child a,.nav.nav-main li:last-child a,.nav.nav-sub a,.nav.nav-tabs a,.bg-inverse .nav.nav-tabs a,.bg-inverse
.nav.nav-tabs .active a,.selected-inline li,.progress,.progress
.progress-bar:last-child,.range,.range-bar,.panel,.panel-head,.panel-foot,.tab .tab-nav li a,.tab .tab-body-bordered,.dialog,.dialog .dialog-head,.tip,.tip .tip-body,.tip .image,.alert,.pagination li,.pagination .active,.pagination a:hover,.pagination-group,.pagination-group
li:first-child,.pagination-group li:last-child,.pager li a{border-radius:0;}
]]>
圆角元素 在使用习惯中，徽章、标签、胶囊、圆点等元素为圆角的，直角解决方案中为不包含此类元素，此类元素个别需要改为正角的，在元素上添加.radius-none可消除圆角效果。
按钮和表单，有时也会用到直角的需要，则以同样方式加上以下代码：
<![CDATA[
.button,.button-group .button-group:first-child .dropdown-toggle,.button-group .button-group:last-child .button:first-child,.button-group-y .button-group:first-child .dropdown-toggle,.button-group-y .button-group:last-child .button:first-child,.input,.input-group
.addon,.input-inline input:first-child,.input-inline input:last-child,.input-block input:first-child,.input-block input:last-child{border-radius:0;}
]]>
第三方应用支持
对第三方应用或组件的支持
拼图CSS架构官方声明不支持任何第三方应用或组件，但我们提供一些使用建议，避免影响项目的显示。
Box-sizing
某些第三方应用，可能会由于* { box-sizing: border-box; }的设置而产生冲突，这一设置使padding不影响页面元素最终宽度的计算；对于这类冲突，我们建议给元素重新定义样式 .*{box-sizing:content-box;}来解决。
业务合作
合作内容
本站针对前端工程师而服务，同时也适用于广大网页设计师、制作及程序人员使用，定位精准，访问频率高，欢迎与符合人群定位的企业或个人的业务或广告合作，实现共赢互利。
使用许可
使用要求
拼图前端框架由专业团队开发，版权归 © 拼图Pintuer.com所有，在使用拼图前端框架过程中，允许及禁止的事项有：
允许你
- 自由下载或提供下载拼图前端框架，可用于个人及商业目的站点。
- 将原始拼图前端框架放入项目中发布或使用。
禁止你
- 对拼图前端框架任何形式的修改并发布或出版。
- 任何形式的声明拥有拼图前端框架的版权。
