概述
推客跨屏响应式前端框架，针对常用的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">]]> 容器
在推客前端框架中，代码效果都包含在.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="p.css">
<link rel="stylesheet" href="your.css">
<script src="jquery.js"></script>
<script src="p.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
副标题
在标题内还可以包含small标签或.small样式，可以用来标记副标题，副文本为主文本字号的60%，当小于12px时显示为12px。
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效果，丰富了页面效果，同时让前端设计简单化、傻瓜化，任何初学者都可快速建设美观、简洁的页面。
<![CDATA[<p class="text-indent">...</p>]]> 强调文本
包含加粗、斜体、下划线等效果。
强调文本
也叫着重文本，用strong标签包含，font-weight样式实现，用于强调作用。
<![CDATA[<strong>加粗文本</strong>]]>斜体文本
用斜体文本强调，包含在i标签之内。
<![CDATA[<i>...</i>]]> 链接文本
超级链接，包含在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>]]>
背景、边框、圆角
背景色
给元素添加背景色样式，突出或强调信息，实际应用中建议修改为自主定义的颜色。
默认：推客前端框架。
主色：推客前端框架，是一款开源的专业网页前端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)、小边框.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即可。
<![CDATA[<div class="fadein">淡入动画</div>
<span class="fadeout">淡出动画</span>]]> 强调动画
提示的强调CSS动画效果。
示例
悬浮效果
鼠标悬浮即可实现相关效果。
示例
旋转
持续旋转动画。
<![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" />]]> 颜色
可以结合背景色，改变水平线的颜色。
默认
主色
辅色
背景色
融合色
点缀色
黑色
灰色
白色
红色
黄色
蓝色
绿色
图片
定义图片样式，形状等样式。
图片样式
使用.radius-(*)样式，可以给图片快速添加效果，改变图片样式。
<![CDATA[<img src="logo.png" width="128" height="128" class="radius-small" />
<img src="logo.png" width="128" height="128" class="radius" />
<img src="logo.png" width="128" height="128" class="radius-big" />
<img src="logo.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-(*)的样式，添加至按钮中，可快速改变其颜色及背景。
背景色按钮
提示按钮
包含危险、警告、主要、成功等样式。
直角和圆角按钮
使用.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设置不同的大小。
按钮块
给按钮添加.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 | 表单验证 |
响应式表格
将任何.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>]]>
引用
引用样式
推客前端框架，是一款开源的专业网页前端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>]]>
