排版

标题

当前用例仅对 <h*> 系列标签和 .h* 系列样式展示，其余只用作UI页面展示用样式

HTML 中的所有标题标签，<h1>到<h6>均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。

`<h1>`标题内容	34px
`<h2>`标题内容	24px
`<h3>`标题内容	18px
`<h4>`标题内容	16px
`<h5>`标题内容	14px
`<h6>`标题内容	12px

                                
                                    <h1>...</h1>
                                
                                

                                
                                    <body class="h1">...</body>

主体字符串尺寸

用例仅定义字体尺寸规范，对所有dom有效，字符尺寸全部用变量赋值

将全局基础 font-size 设置为 14px，基础 line-height 设置为 1.428，将默认 font-size 赋值为基础 font-size。这些属性直接赋予 <body>元素作为默认dom样式；

除基础 font-size 外，所有衍生 font-size 均由基础 font-size 计算得出，基础 font-size 赋值变，则全部衍生 font-size 赋值变。

主体内容	@largest-FontSize (34px)
主体内容	@larger-FontSize (24px)
主体内容	@large-FontSize (18px)
主体内容	@small-FontSize (16px)
主体内容	@smaller-FontSize (14px)
主体内容	@smallest-FontSize (12px)

                                
                                    .* { font-size: @largest-FontSize; }

对齐

尽量能在元素样式里面申明就不要用到这种附加类，否则会增加兼容性样式编写的难度，此类工具多用在对版面布局没影响的元素中

通过内联元素对齐类，可以简单方便的将内联元素重新对齐。

内联元素左对齐

内联元素居中对齐

内联元素右对齐

内联元素两端对齐
“Coding 是一个面向开发者的云端开发平台，目前提供代码托管，运行空间，质量控制，项目管理等功能。Coding 提供社会化协作功能，包含了社交元素，为开发者提供技术讨论和协作平台。扣钉网络成立于2014年2月。在云计算时代，我们希望能推动软件开发的云端化，真正的实现在任何时间，任何地点，只要有一个浏览器就能完成开发的各个环节。”

内联元素不换行
“Coding 是一个面向开发者的云端开发平台，目前提供代码托管，运行空间，质量控制，项目管理等功能。Coding 提供社会化协作功能，包含了社交元素，为开发者提供技术讨论和协作平台。扣钉网络成立于2014年2月。在云计算时代，我们希望能推动软件开发的云端化，真正的实现在任何时间，任何地点，只要有一个浏览器就能完成开发的各个环节。”

                                
                                    <body class="text-align-left">...</body>
                                
                                

                                
                                    <body class="text-align-center">...</body>
                                
                                

                                
                                    <body class="text-align-right">...</body>
                                
                                

                                
                                    <body class="text-align-justify">...</body>
                                
                                

                                
                                    <body class="text-nowrap">...</body>
                                
                                

                                
                                    .* { .text-align-left(); }
                                
                                

                                
                                    .* { .text-align-center(); }
                                
                                

                                
                                    .* { .text-align-right(); }
                                
                                

                                
                                    .* { .text-align-justify(); }
                                
                                

                                
                                    .* { .text-nowrap(); }

按钮

可作按钮的标签或元素

目前仅支持了 3 种 dom 使用 .btn 系列样式

为<a>、<button>或<input>元素添加按钮的类，即可使用。

class="btn links"的用法仅支持<a>

如果<a>元素被作为按钮使用 -- 并用于在当前页面触发某些功能 -- 而不是用于链接其他页面或链接当前页面中的其他部分，那么，务必为其设置role="button"属性

a

                                
                                    <a href="###" class="btn default" role="button">...</a>
                                
                                

                                
                                    <button type="button" class="btn default">...</button>
                                
                                

                                
                                    <input type="button" class="btn default".../>
                                
                                

                                
                                    <input type="submit" class="btn default".../>

预定义样式

按钮的基本类是 .btn

使用下面列出的类可以快速创建一个带有预定义样式的按钮

基本的按钮展现，类引用模式为：基础类.btn加上按钮类型的类，如class="btn primaty"

一般状态下

button links

添加类.current，展示激活状态下的按钮（class="btn links"和class="btn disabled"没有定义激活状态）

                                一般状态下
                                

                                
                                    <button type="button" class="btn default">...</button>
                                
                                

                                
                                    <button type="button" class="btn primary">...</button>
                                
                                

                                
                                    <button type="button" class="btn secondary">...</button>
                                
                                

                                
                                    <button type="button" class="btn thirdly">...</button>
                                
                                

                                
                                    <button type="button" class="btn disabled" disabled="disabled">...</button>
                                
                                

                                
                                    <a href="###" class="btn links">...</a>
                                
                                

                                

                                激活状态下
                                

                                
                                    <button type="button" class="btn default current">...</button>
                                
                                

                                
                                    <button type="button" class="btn primary current">...</button>
                                
                                

                                
                                    <button type="button" class="btn secondary current">...</button>
                                
                                

                                
                                    <button type="button" class="btn thirdly current">...</button>

按钮尺寸

暂时只定义了默认和小号两种按钮尺寸

小号按钮，需要在（class）中添加.small-btn这个类

button button

                                
                                    <button type="button" class="btn default small-btn">...</button>
                                
                                

                                
                                    <a href="###" class="btn links small-btn">...</a>

按钮的行内排列

当多个按钮的行内排列为左对齐，样式引用可以省略 .text-align-left

按钮的行内排列，由工具类.text-align-(center)(left)(right)在其最近的父结构样式中控制

如果是多个按钮的行内排列，还需要在其最近的父结构样式中引入类.plural-btns，如：class="text-align-center plural-btns"

button links

                                
                                    <div class="text-align-left plural-btns">...</div>
                                
                                

                                
                                    <div class="text-align-center plural-btns">...</div>
                                
                                

                                
                                    <div class="text-align-right plural-btns">...</div>

按钮在某些特殊情况下

由于特殊情况大多单一出现在某些组件或页面中，所以特殊对待的针对性编写结构

这里需要注意一下，典型的按钮样式class="btn links"和这里展示的类class="btn-vicelink"两者完全不一样，别搞错

特殊情景（1）：当一个或者一组按钮需要在机构中居中，按钮后面又紧接着一个附加链接，并且这个链接不占用结构宽度的时候，需要用以下的结构和样式组成效果

btn-vicelink

                                特殊情景（1）结构
                                

                                
                                    <div class="text-align-center">
                                    
   <div class="btn-with-viceLink text-align-center ( plural-btns )">
                                    
      ...
                                    
      <a href="###"> class="btn-vicelink"...</a>
                                    
   </div>
                                    

                                    </div>

路径导航

实例

在一个带有层次的导航结构中标明当前页面的位置

各路径间的分隔符用 fonticon 代替a的:after属性，因为 IE7 不兼容

                                
                                     <ol class="breadcrumb">
                                    

                                       <li>
                                    

                                          <a href="###">
                                    

                                             首页
                                    

                                             <i class="icon-chevron-thin-right"></i>
                                    

                                          </a>
                                    

                                       </li>
                                    

                                       <li>
                                    

                                          <a href="###">
                                    

                                             二级页面位置
                                    

                                             <i class="icon-chevron-thin-right"></i>
                                    

                                          </a>
                                    

                                       </li>
                                    

                                       <li>
                                    

                                          <a href="###">
                                    

                                             三级页面位置
                                    

                                             <i class="icon-chevron-thin-right"></i>
                                    

                                          </a>
                                    

                                       </li>
                                    

                                       <li>
                                    

                                          当前位置
                                    

                                       </li>
                                    

                                     </ol>

表格

表格标题

要兼容IE8及以下浏览器样式，.table-title-btns 类所在的结构中，第一个 <a> 标签需添加 .ttb-first-child 类

为 <div> 添加 .table-title 类即可

附带超链接按钮需为子层结构添加 .table-title-btns 类和编写相应结构

表格标题

XLS格式 CSV格式批量打印凭证

表格标题

更多 >>

                                
                                    <div class="tables-title">
                                    
   ...表格标题
                                    
   <div class="table-title-btns">
                                    
      <a href="###">...</a>
                                    
   </div>
                                    

                                    </div>

标准表格

并没有定义<table>，.table 类的标准样式已能适应当前设计稿所有表格设计

为任意 <table> 添加 .table 类为其赋予基本的样式

全选	创建时间	业务类型	名称\|订单号	对方账号	收支金额	当前剩余	操作
	2015-05-25 10:25:36	交易	立体声超级留声机 TJZT2015052000258552	liang1126	- 422,252.00	40,952,585,288.00	详情详情打印
	2015-05-25 10:25:36	交易	Q7mini立体声超级留声机不完全体第三阶段 TJZT2015052000258552	rayalienkiss@126.com	+ 120,422,252.00	40,952,585,288.00	打印

全选

创建时间

业务类型

名称|订单号

对方账号

收支金额

当前剩余

操作

2015-05-25 10:25:36

交易

立体声超级留声机

TJZT2015052000258552

liang1126

- 422,252.00

40,952,585,288.00

详情

详情打印

2015-05-25 10:25:36

交易

Q7mini立体声超级留声机不完全体第三阶段

TJZT2015052000258552

rayalienkiss@126.com

+ 120,422,252.00

40,952,585,288.00

打印

添加 .table 类之后，添加 .inverse 类让 <table> 获得相反的间隔颜色

时间	流水号	类型	付款方	金额	状态	可提现时间
2015-05-25 10:25:36	DOBA201506060000118000011	充值	建设银行 \| 尾号 8435	422,252.00	可提现	2015-05-25
2015-05-25 10:25:36	DOBA201506060000118000011	充值	建设银行 \| 尾号 8435	422,252.00	可提现	2015-05-25

                                
                                    <table class="table">...</table>
                                
                                

                                
                                    <table class="table inverse">...</table>

表单

表单框架

表单框架中，除了表单标题，内容框架里面并没有定义任何左右的内外边距

需要定义表单框架内，内容区块（包括表单标题区块）的间距的话，请使用排版工具类，如class="magin-（top，bottom，left，right）-（40，30，20，10）px"

form title

* 标准表单标题宽度可以放十八个中文字符：

* 请输入密码：

忘记密码

* dropdown :

Data in form ：

陈少峰

招商银行 | 尾号1234

Data in form ：

14,000.00 元

i

部分款项未到期

提现明细

Data in form ：

06月18日24点前

* 输入验证码 :

button link

* 标准表单标题宽度可以放十八个中文字符：

* 请输入密码：

忘记密码

* dropdown :

Data in form ：

陈少峰

招商银行 | 尾号1234

Data in form ：

14,000.00 元

i

部分款项未到期

提现明细

Data in form ：

06月18日24点前

* 输入验证码 :

button link

                                
                                    无灰色底色
                                    

                                    <div class="form-frame">
                                    
   <div class="form-title">
                                    
      form title
                                    
   </div>
                                    
   <div class="form-layer1">
                                    
      <div class="form-layer2">
                                    
         ...
                                    
      </div>
                                    
   </div>
                                    

                                    </div>
                                    

                                    

                                    有灰色底色
                                    

                                    <div class="form-frame">
                                    
   <div class="form-title">
                                    
      form title
                                    
   </div>
                                    
   <div class="form-layer-gray-box">
                                    
      <div class="form-layer1">
                                    
         <div class="form-layer2">
                                    
            ...
                                    
         </div>
                                    
      </div>
                                    
   </div>
                                    

                                    </div>

keyin 类型的表单

表单样式中，有专门的变量 @form-control-label-width 控制表单标题的宽度，@form-control-height 控制表单的高度，@forms-FontSize 控制表单的字体尺寸

单独的表单控件会被自动赋予一些全局样式。所有设置了.form-control类的<input>元素都将被默认设置宽度属性为width: 100%;。将<label>元素和前面提到的控件包裹在.form-group中可以获得最好的排列。

* 标准表单标题宽度可以放十八个中文字符：

* 请输入密码：

                                
                                    <div class="form-group">
                                    
   <label class="form-control-label" for="***">
                                    
      <b> * </b>
                                    
      <span> 表单标题 </span>
                                    
      <em> : </em>
                                    
   </label>
                                    
   <div class="form-control-wrap">
                                    
      <input type="***" class="form-control" id="***" placeholder="***" />
                                    
   </div>
                                    

                                    </div>

模拟 <select> 标签

表单样式中，有专门的变量 @form-control-label-width 控制表单标题的宽度，@form-control-height 控制表单的高度，@forms-FontSize 控制表单的字体尺寸

模拟<select>表单由块化标签组成，并且组件结构不可变更，详情请参考代码演示

注意 IE7 及以下版本IE浏览器的兼容，这里的解决方法是分别给出现在页面的模拟下拉和日期下拉的.form-group层元素添加内联的z-index，先出现的结构层级最大，依次累减

* dropdown ：

带表单内容自动匹配功能(可输入，可下拉)

* dropdown & keyin ：

用于银行选择

* 选择一个银行：

                                
                                    模拟<select>
                                    

                                    <div class="form-group">
                                    
   <label class="form-control-label" for="***">
                                    
      <b> * </b>
                                    
      <span> dropdown </span>
                                    
      <em> : </em>
                                    
   </label>
                                    
   <div class="form-control-wrap">
                                    
      <div class="form-control-dropdown">

                                    
         <span class="form-control-dropdown-btn">
                                    
            <i></i>
                                    
         </span>

                                    
         <div class="form-control-dropdown-value" title="...">
                                    
            ...
                                    
         </div>

                                    
         <ul class="form-control-dropdown-menu">
                                    
            <li title="">
                                    
               ...
                                    
            </li>
                                    
         </ul>

                                    
      </div>
                                    
   </div>
                                    

                                    </div>
                                    

                                    

                                    用于银行选择
                                    

                                    <div class="form-group">
                                    
   <label class="form-control-label" for="***">
                                    
      <b> * </b>
                                    
      <span> dropdown </span>
                                    
      <em> : </em>
                                    
   </label>
                                    
   <div class="form-control-wrap">
                                    
      <div class="form-control-dropdown">

                                    
         <span class="form-control-dropdown-btn">
                                    
            <i></i>
                                    
         </span>

                                    
         <div class="form-control-dropdown-value" title="...">
                                    
            <span class="bank-bg bank-xxx" title="...">
                                    
            </span>
                                    
            <span class="form-control-bank-card">
                                    
               ...
                                    
            </span>
                                    
         </div>

                                    
         <ul class="form-control-dropdown-menu">
                                    
            <li title="">
                                    
               <span class="bank-bg bank-xxx" title="...">
                                    
               </span>
                                    
               <span class="form-control-bank-card">
                                    
                  ...
                                    
               </span>
                                    
            </li>
                                    
         </ul>

                                    
      </div>
                                    
   </div>
                                    

                                    </div>

多选和单选表单

                                
                                    单选
                                    

                                    <div class="form-group">
                                    
   <label class="form-control-label">
                                    
      <b> * </b>
                                    
      <span> 单选项 </span>
                                    
      <em> : </em>
                                    
   </label>
                                    
   <div class="form-control-wrap">

                                    
      <div class="form-control-check">

                                    
         <label>
                                    
            ...
                                    
            <input type="radio" name=""/>
                                    
         </label>

                                    
      </div>

                                    
   </div>
                                    

                                    </div>
                                    

                                    

                                    多选
                                    

                                    <div class="form-group">
                                    
   <label class="form-control-label">
                                    
      <b> * </b>
                                    
      <span> 多选项 </span>
                                    
      <em> : </em>
                                    
   </label>
                                    
   <div class="form-control-wrap">

                                    
      <div class="form-control-check">

                                    
         <label>
                                    
            ...
                                    
            <input type="checkbox" name=""/>
                                    
         </label>

                                    
      </div>

                                    
   </div>
                                    

                                    </div>

弹出模态窗口

there are nothing here

notice it

* Modal ：

                                
                                    <div class="form-group">
                                    
   <label class="form-control-label" for="***">
                                    
      <b> * </b>
                                    
      <span> dropdown </span>
                                    
      <em> : </em>
                                    
   </label>
                                    
   <div class="form-control-wrap">
                                    
      <div class="form-control-modal">

                                    
         <span class="form-control-modal-btn">
                                    
            <i></i>
                                    
         </span>

                                    
         <div class="form-control-modal-value">
                                    
            ...
                                    
         </div>

                                    
      </div>
                                    
   </div>
                                    

                                    </div>

日期控件

there are nothing here

notice it

* date ：

激活状态

* date ：

                                
                                    <div class="form-group">
                                    
   <label class="form-control-label" for="***">
                                    
      <b> * </b>
                                    
      <span> dropdown </span>
                                    
      <em> : </em>
                                    
   </label>
                                    
   <div class="form-control-wrap">
                                    
      <div class="form-control-date ( active )">

                                    
         <span class="form-control-date-btn">
                                    
            <i></i>
                                    
         </span>

                                    
         <div class="form-control-date-value">
                                    
            ...
                                    
         </div>

                                    
      </div>
                                    
   </div>
                                    

                                    </div>

特殊结构表单

there are nothing here

keyin 类型的disabled状态
为输入框设置disabled属性可以禁止其与用户有任何交互（焦点、输入等）。被禁用的输入框颜色更浅，并且还添加了not-allowed鼠标状态。

keyin 类型的readonly状态
为输入框设置readonly属性可以禁止用户修改输入框中的内容。处于只读状态的输入框颜色更浅（就像被禁用的输入框一样），但是仍然保留标准的鼠标状态。
日期选择除外

表单中纯展现字符串或数据的结构

Data in form ：

陈少峰

招商银行 | 尾号1234

Data in form ：

14,000.00 元

i

部分款项未到期

提现明细

Data in form ：

06月18日24点前

输入验证码

* 输入验证码：

请输入提现金额

表单协议勾选项

表单后有超链接
由于.form-control-tools-link样式定义为绝对定位，需要注意控制邻近<form>标签的父元素的宽度，以免.form-control-tools-link错位显示

                                
                                    keyin 类型的 disabled 状态
                                    

                                    <div class="form-group">
                                    
   <label class="form-control-label" for="***">
                                    
      <b> * </b>
                                    
      <span> keyin </span>
                                    
      <em> : </em>
                                    
   </label>
                                    
   <div class="form-control-wrap">
                                    
      <input type="text" class="form-control" id="***" disabled="disabled"/>
                                    
   </div>
                                    

                                    </div>

                                    

                                    


                                    keyin 类型的 readonly 状态
                                    

                                    <div class="form-group">
                                    
   <label class="form-control-label" for="***">
                                    
      <b> * </b>
                                    
      <span> keyin </span>
                                    
      <em> : </em>
                                    
   </label>
                                    
   <div class="form-control-wrap">
                                    
      <input type="text" class="form-control" id="***" readonly="readonly"/>
                                    
   </div>
                                    

                                    </div>

                                    

                                    


                                    表单中纯展现字符串或数据的结构
                                    

                                    <div class="form-group">
                                    
   <label class="form-control-label" for="***">
                                    
      <span> Data in form </span>
                                    
      <em> : </em>
                                    
   </label>
                                    
   <div class="form-control-wrap">
                                    
      <div class="form-control-data">
                                    
         ...
                                    
      </div>
                                    
   </div>
                                    

                                    </div>

                                    

                                    


                                    输入验证码
                                    

                                    <div class="form-group">
                                    
   <label class="form-control-label" for="***">
                                    
      <b> * </b>
                                    
      <span> 输入验证码 </span>
                                    
      <em> : </em>
                                    
   </label>
                                    
   <div class="form-control-wrap">
                                    
      <div class="form-control-verify">
                                    
         <input type="text" class="form-control" id="***" />
                                    
         <button class="btn form-control-verify-btn">
                                    
            获取验证码
                                    
         </button>
                                    
      </div>
                                    
   </div>
                                    

                                    </div>

                                    

                                    


                                    请输入提取金额
                                    

                                    <div class="form-group">
                                    
   <label class="form-control-label" for="***">
                                    
      <b> * </b>
                                    
      <span> 请输入提现金额 </span>
                                    
      <em> : </em>
                                    
   </label>
                                    
   <div class="form-control-wrap">
                                    
      <div class="form-control-withdrawFull">
                                    
         <input type="text" class="form-control" id="***" />
                                    
         <button class="btn form-control-withdrawFull-btn">
                                    
            全部提取
                                    
         </button>
                                    
      </div>
                                    
   </div>
                                    

                                    </div>

                                    

                                    


                                    表单协议勾选项
                                    

                                    <div class="form-group">
                                    
   <div class="form-control-wrap">
                                    
      <div class="form-control-check">
                                    
         <label class="agreement-check">
                                    
            我已阅读并同意《<a class="link-standard">xxx服务协议</a>》
                                    
            <input type="checkbox" name=""/>
                                    
         </label>
                                    
      </div>
                                    
   </div>
                                    

                                    </div>

                                    

                                    


                                    表单后有超链接
                                    

                                    <div class="form-group">
                                    
   <label class="form-control-label" for="***">
                                    
      <b> * </b>
                                    
      <span> 表单标题 </span>
                                    
      <em> : </em>
                                    
   </label>
                                    
   <div class="form-control-wrap">
                                    
      <input type="***" class="form-control" id="***" placeholder="***" />
                                    
      <a class="form-control-tools-link">...</a>
                                    
   </div>
                                    

                                    </div>

表单校验

暂没有针对辅助设备进行校验状态设置

对表单控件的校验状态，如错误、提示和成功（正确）状态，都定义了样式。使用时，添加.has-info、.has-error或.has-correct类到这些控件的父元素即可。任何包含在此元素之内的表单相关元素都将接受这些校验状态的样式

keyin

* keyin ：

表单填写正确

* keyin ：

表单填写错误

* keyin ：

表单附加信息

模拟 <select> 标签

* dropdown ：

表单填写正确

* dropdown ：

表单填写错误

* dropdown ：

表单附加信息

多选和单选表单
单选表单默认就选中其中一个选项，故没有选对或选错或漏选的校验
多选表单，只存在有选或没选的情况，有选就一定是对的，故只有漏选的错误校验

* 多选项：

checkbox one checkbox two checkbox three checkbox four checkbox five

请至少选择一个选项

模态窗口

* Modal ：

表单填写正确

* Modal ：

表单填写错误

* Modal ：

表单附加信息

日期控件

* date ：

表单填写正确

* date ：

表单填写错误

* date ：

表单附加信息

                                
                                    错误、提示 和 成功（正确）状态
                                    

                                    <div class="form-group (has-correct、has-error、has-info)">
                                    
   <label class="form-control-label" for="***">
                                    
      <b> * </b>
                                    
      <span> 表单标题 </span>
                                    
      <em> : </em>
                                    
   </label>
                                    
   <div class="form-control-wrap">
                                    
      ...
                                    
      <div class="form-notice">
                                    
         <i></i>
                                    
         ...
                                    
      </div>
                                    
   </div>
                                    

                                    </div>

表单组件尺寸

不同尺寸的表单样式中，依然由专门的变量 @form-control-label-width 控制表单标题的宽度，@form-control-height 控制表单的高度，@forms-FontSize 控制表单的字体尺寸，这些变量变更，会引起所有尺寸的表单组件样式变更

在表单控件样式中，加入.smallsize，得到尺寸更小的表单控件，如：class="form-control smallsize"
暂时.smallsize样式仅支持对.form-control、.form-control-date、.form-control-dropdown（不包括银行选择）、.form-control-modal使用

.form-control

.form-control-date

.form-control-modal

.form-control-dropdown

.form-control-dropdown.with-keyin

                                
                                    .form-control
                                    
<div class="form-control-wrap smallsize">
                                    
   <input type="***" class="form-control smallsize"/>
                                    
</div>

                                    

                                    


                                    .form-control-date
                                    
<div class="form-control-date smallsize">
                                    
   <span class="form-control-date-btn">
                                    
      <i></i>
                                    
   </span>
                                    
   <div class="form-control-date-value">
                                    
      ...
                                    
   </div>
                                    
</div>

                                    

                                    


                                    .form-control-modal
                                    
<div class="form-control-date smallsize">
                                    
   <span class="form-control-modal-btn">
                                    
      <i></i>
                                    
   </span>
                                    
   <div class="form-control-modal-value">
                                    
      ...
                                    
   </div>
                                    
</div>

                                    

                                    


                                    .form-control-dropdown
                                    
<div class="form-control-dropdown smallsize">
                                    
   <span class="form-control-dropdown-btn">
                                    
      <i></i>
                                    
   </span>
                                    
   <div class="form-control-dropdown-value" title="...">
                                    
      ...
                                    
   </div>
                                    
   <ul class="form-control-dropdown-menu">
                                    
      <li title="">
                                    
         ...
                                    
      </li>
                                    
   </ul>
                                    
</div>

                                    

                                    


                                    .form-control-dropdown.with-keyin
                                    
<div class="form-control-dropdown smallsize">
                                    
   <span class="form-control-dropdown-btn">
                                    
      <i></i>
                                    
   </span>
                                    
   <   input type="***" data-toggle="dropdown" class="form-control" placeholder="" value=""/>
                                    
   <ul class="form-control-dropdown-menu">
                                    
      <li title="">
                                    
         ...
                                    
      </li>
                                    
   </ul>
                                    
</div>

图表

图表标题

图表标题中按钮结构样式均使用标准规范样式

为 <div> 添加 .chart-title 类即可

交易数据统计 ( 2015.05.01-2015.05.29 )

今天最近30天

                                
                                    <div class="chart-title">
                                    
   交易数据统计
                                    
   <small>( 2015.05.01-2015.05.29 )</small>
                                    
   <div class="chart-title-btns">
                                    
      <a href="###" class="btn default small-btn">今日</a>
                                    
      <a href="###" class="btn default small-btn">最近30天</a>
                                    
   </div>
                                    

                                    </div>

标准图表

there are nothing here

每个图表都由.chart-wrap包裹，这个类定义图表与边界的距离。图表元素需要制定宽高。

                                
                                    <div class="chart-wrap">
                                    

                                      <div id="j-chart" style="width: 100%; height: 254px;"></div>
                                    

                                    </div>

图表图例

there are nothing here

notice it

xxx xxx

                                
                                    <div class="chart-legends">
                                    

                                       <span class="chart-legend">
                                    

                                          <b class="legendone"></b>
                                    

                                          ...
                                    

                                       </span>
                                    

                                       <span class="chart-legend">
                                    

                                          <b class="legendtwo"></b>
                                    

                                          ...
                                    

                                       </span>
                                    

                                    </div>

标签页

标准标签页

there are nothing here

暂时仅提供两种标签页样式，标签页骨架结构一样

标签页(1)

tab one
tab two
tab three

tab one content

tab two content

tab three content

标签页(1)含搜索结构

tab one
tab two
tab three

tab one content

tab two content

tab three content

2015-07-16

tab one
tab two
tab three

tab one content

tab two content

tab three content

标签页(2)

交易额（元）

306,000.00
交易笔数（笔）

300
交易用户量（人）

5,216

tab one content

tab two content

tab three content

                                
                                    标签页类型一
                                    

                                    <div class="tabs-wrap type1">
                                    
   <ul class="tabs">
                                    
      <li class="active">
                                    
         <a class="tabs-btn" href="#...">
                                    
            ...
                                    
         </a>
                                    
      </li>
                                    
      <li>
                                    
         <a class="tabs-btn" href="#...">
                                    
            ...
                                    
         </a>
                                    
      </li>
                                    
      <li>
                                    
         <a class="tabs-btn" href="#...">
                                    
            ...
                                    
         </a>
                                    
      </li>
                                    
   </ul>
                                    

                                    </div>
                                    

                                    <div class="tabs-content">
                                    
   <div class="tabs-panel active" id="..."></div>
                                    
   <div class="tabs-panel" id="..."></div>
                                    
   <div class="tabs-panel" id="..."></div>
                                    

                                    </div>

                                    

                                    


                                    标签页类型二
                                    

                                    <div class="tabs-wrap type2">
                                    
   <ul class="tabs">
                                    
      <li class="tt2b-first-child active">
                                    
         <a class="tabs-btn">
                                    
            ...
                                    
         </a>
                                    
      </li>
                                    
      <li>
                                    
         <a class="tabs-btn">
                                    
            ...
                                    
         </a>
                                    
      </li>
                                    
   </ul>
                                    

                                    </div>
                                    

                                    <div class="tabs-content">
                                    
   <div class="tabs-panel active" id="..."></div>
                                    
   <div class="tabs-panel" id="..."></div>
                                    

                                    </div>

                                    

                                    


                                    标签页类型一（含搜索结构）
                                    

                                    <div class="tabs-wrap type1">
                                    
   <div class="tab-search-wrap">
                                    
      <div class="tab-search-control-width">
                                    
         ...
                                    
      </div>
                                    
      <button type="submit" class="btn primary small-btn"> 搜索 </button>
                                    
   </div>
                                    
   <ul class="tabs">
                                    
      <li class="active">
                                    
         <a class="tabs-btn">
                                    
            ...
                                    
         </a>
                                    
      </li>
                                    
      <li>
                                    
         <a class="tabs-btn">
                                    
            ...
                                    
         </a>
                                    
      </li>
                                    
   </ul>
                                    

                                    </div>
                                    

                                    <div class="tabs-content">
                                    
   <div class="tabs-panel active" id="..."></div>
                                    
   <div class="tabs-panel" id="..."></div>
                                    

                                    </div>

分页

标准分页

there are nothing here

notice it

上一页
1
2
3
4
5
6
7
8
...
100
下一页

                                
                                    <div class="pagination-wrap">
                                    
   <ul class="pagination">
                                    
      <li>
                                    
         <a href="#..."> 上一页 </a>
                                    
      </li>
                                    
      <li>
                                    
         <a href="#..." class="active"> 1 </a>
                                    
      </li>
                                    
      <li>
                                    
         <a href="#..."> 2 </a>
                                    
      </li>
                                    
      <li>
                                    
         <a href="#..."> 3 </a>
                                    
      </li>
                                    
      <li>
                                    
         <a href="#..."> 4 </a>
                                    
      </li>
                                    
      <li>
                                    
         <a href="#..."> 5 </a>
                                    
      </li>
                                    
      <li>
                                    
         <a href="#..."> 6 </a>
                                    
      </li>
                                    
      <li>
                                    
         <a href="#..."> 7 </a>
                                    
      </li>
                                    
      <li>
                                    
         <a href="#..."> 8 </a>
                                    
      </li>
                                    
      <li>
                                    
         <span> ... </span>
                                    
      </li>
                                    
      <li>
                                    
         <a href="#..."> 100 </a>
                                    
      </li>
                                    
      <li>
                                    
         <a href="#..."> 下一页 </a>
                                    
      </li>
                                    
   </ul>
                                    

                                    </div>

分页行内排列

关于 IE8 以下的兼容样式，开启IE控制台看源代码...

左对齐

上一页
1
2
3
4
5
6
7
8
...
100
下一页

居中对齐

上一页
1
2
3
4
5
6
7
8
...
100
下一页

右对齐

上一页
1
2
3
4
5
6
7
8
...
100
下一页

                                
                                    <div class="pagination-wrap text-align-left">...</div>
                                
                                

                                
                                    <div class="pagination-wrap text-align-center">...</div>
                                
                                

                                
                                    <div class="pagination-wrap text-align-right">...</div>

业务流程提示

实例

.waiting 提示中的图表是 .gif 图片

在父标签中添加.notice-wrap类，由继承类.success，.error，.waiting,.info控制提示的样式

成功（正确）

...成功！

预计资金2个工作日到您的银行卡
交易结果以交易记录显示为准

查看提现明细

等待

正在...

账户余额不足或超出发卡单笔支付限额

重新支付返回我的资产

出错

...失败！

账户余额不足或超出发卡单笔支付限额

重新支付返回我的资产

信息

验证中...！

账户正在验证中，预计24小时内完成验证，请耐心等待。
审核记过将通过短信发送到您的手机号码。
验证成功后验证金额可用于交易或提现。

进入账户管理

模态窗中使用，添加类.in-modal，如class="notice-wrap success in-modal"

                                
                                    <div class="notice-wrap ( success,waiting,error,info,in-modal )">
                                    
   <div class="notice-box">
                                    
      <span class="notice-img"></span>
                                    
      <h3> ... </h3>
                                    
      <p> ... </p>
                                    
      <a href="###" class="link-standard"> ... </a>
                                    
      <a href="###" class="link-standard link-border"> ... </a>
                                    
   </div>
                                    
</div>

警示

实例

警告框组件通过提供一些灵活的预定义消息，为常见的用户动作提供反馈消息

将任意文本和一个可选的关闭按钮组合在一起就能组成一个警告框，.alert类是必须要设置的，另外还提供了有特殊意义的4个类.alert-success，.alert-info，.alert-warning，.alert-danger代表不同的警告信息。
暂时只提供.alert-warning类

.alert-warning

rayalienkiss，您尚未进行账户验证，请先验证

添加.with-close类让警示出现关闭按钮

警告框组件通过提供一些灵活的预定义消息，为常见的用户动作提供反馈消息

添加fade in使用css3动画

警告框组件通过提供一些灵活的预定义消息，为常见的用户动作提供反馈消息

                                
                                    <div class="alert ( alert-danger,alert-warning,alert-success,alert-info,with-close,fade in)">
                                    
   <i></i>
                                    
   <em></em>
                                    
   ...
                                    
</div>

特殊页面组件

数据统计部件

这里的实例结构对于不同项目的UI的兼容性较差，在不同项目上，可能需要进行二次定义，或者直接重构

典型结构

当前数据统计
总收入(元) 共 157 笔

30,000.00
总支出(元) 共 2508 笔

23,000.00

可提现金额结构

可提金额单位：元

7,000,000,00 提现

未来7天内可提金额单位：元

3,000,000,00

日期

金额（元）

- 2015-11-01
  
  10,000.00
- 2015-11-02
  
  25,000.00
- 2015-11-03
  
  188,000.00
- 2015-11-04
  
  178,800.00
- 2015-11-05
  
  1,112,580,000.00
- 2015-11-06
  
  9,000.00
- 2015-11-07
  
  9,200.00

隐藏

                                
                                    <div class="data-count-wrap">
                                    
   <div>
                                    
      <ul class="date-count-ul">
                                    
         <li class="count-title">
                                    
            <h4> xxx </h4>
                                    
            <span class="arrows-shadow"></span>
                                    
            <span class="arrows"></span>
                                    
         </li>
                                    
         <li>
                                    
            <h5>
                                    
               <span> xxx </span>
                                    
            </h5>
                                    
            <h2> 30,000.00 </h2>
                                    
         </li>
                                    
         <li class="last-li">
                                    
            <h5>
                                    
               <span> xxx </span>
                                    
            </h5>
                                    
            <h2> 620,120.00 </h2>
                                    
         </li>
                                    
      </ul>
                                    
   </div>
                                    
</div>

步骤

这里的实例结构对于不同项目的UI的兼容性较差，在不同项目上，可能需要进行二次定义，或者直接重构

在组件结构的顶级块化父元素中添加.steps-wrap类，由继承类.pass1，.pass2，.pass3控制展示的步骤流程，如：class="steps-wrap ( pass1，pass2，pass3 )"

step one

1 2 3

step one

step two

step three

step two

1 2 3

step one

step two

step three

1 2 3

step one

step two

step three

                                
                                    <div class="steps-wrap ( pass1，pass2，pass3 )">
                                    
   <div class="steps-box">
                                    
      <div class="step-bars">
                                    
         <div class="bar1"></div>
                                    
         <div class="bar2"></div>
                                    
         <div class="bar3"></div>
                                    
         <div class="bar4"></div>
                                    
      </div>
                                    
      <span class="step step1"></span>
                                    
      <span class="step step2"></span>
                                    
      <span class="step step3"></span>
                                    
      <p class="step-title title1"> ... </p>
                                    
      <p class="step-title title2"> ... </p>
                                    
      <p class="step-title title3"> ... </p>
                                    
   </div>
                                    
</div>

主导航

这里的实例结构对于不同项目的UI的兼容性较差，在不同项目上，可能需要进行二次定义，或者直接重构

nav标签添加类.main-nav-wrap，子级ul添加类.main-nav

                                
                                    <nav class="main-nav-wrap">
                                    
   <ul class="main-nav">
                                    
      <li class="current">
                                    
         <a href="###"> ... </a>
                                    
      </li>
                                    
      <li>
                                    
         <a href="###"> ... </a>
                                    
      </li>
                                    
      <li>
                                    
         <a href="###"> ... </a>
                                    
      </li>
                                    
      <li>
                                    
         <a href="###">; ... </a>
                                    
      </li>
                                    
   </ul>
                                    
</nav>

密码状态标示

这里的实例结构对于不同项目的UI的兼容性较差，在不同项目上，可能需要进行二次定义，或者直接重构

notice it

已设置	支付密码	用于付款或修改账户信息时，保护账户资金安全	重置
未设置	支付密码	用于付款或修改账户信息时，保护账户资金安全	重置

                                
                                    <div class="password-status-wrap">
                                    
   <table class="password-status-table">
                                    
      <colgroup class="current">
                                    
         <col style="width: 92px;"/>
                                    
         <col style="width: 92px;"/>
                                    
         <col/>
                                    
         <col style="width: 60px;"/>
                                    
      </colgroup>
                                    
      <tbody>
                                    
         <td>
                                    
            <span class="password-status-label ( done，notdone )">
                                    
               <b></b>
                                    
               ...
                                    
            </span>
                                    
         </td>
                                    
         <td>
                                    
            <strong>
                                    
               ...
                                    
            </strong>
                                    
         </td>
                                    
         <td class="viceText-FontColor>
                                    
            ...
                                    
         </td>
                                    
         <td class="text-align-right>
                                    
            ...
                                    
         </td>
                                    
      </tbody>
                                    
   </table>
                                    
</div>

表单中插入表格

这里的实例结构对于不同项目的UI的兼容性较差，在不同项目上，可能需要进行二次定义，或者直接重构

notice it

银行	单笔限额（元）	每日限额（元）	满足条件
工商银行	无限制	无限制	开通商务支付业务

                                
                                    <div class="form-table-wrap">
                                    
   <table class="form-table">
                                    
      <colgroup class="current">
                                    
         <col />
                                    
         <col />
                                    
         <col />
                                    
         <col />
                                    
      </colgroup>
                                    
      <thead>
                                    
         <th> ... </th>
                                    
         <th> ... </th>
                                    
         <th> ... </th>
                                    
         <th> ... </th>
                                    
      </thead>
                                    
      <tbody>
                                    
         <td> ... </td>
                                    
         <td> ... </td>
                                    
         <td> ... </td>
                                    
         <td> ... </td>
                                    
      </tbody>
                                    
   </table>
                                    
</div>

银行卡列表

这里的实例结构对于不同项目的UI的兼容性较差，在不同项目上，可能需要进行二次定义，或者直接重构

结构中的li标签即为“一张银行卡”，通过.work，.notwork，.waiting三个类的切换，实现银行卡的“已验证”，“重新验证”，“验证中”三种状态的切换
如：<li class="( work,notwork,waiting )">

工商银行

**********6877
已验证
审核不通过重新绑定

审核中
工商银行

**********6877
已验证
审核不通过重新绑定

审核中
工商银行

**********6877
已验证
审核不通过重新绑定

审核中
工商银行

**********6877
已验证
审核不通过重新绑定

审核中
+ 添加银行卡

                                
                                    <div class="bankcard-list-wrap">
                                    
   <ul class="bankcard-list">
                                    
      <li class="( work,notwork,waiting )">
                                    
         <div class="bank-box">
                                    
            <div class="bank-icon icon-银行英文简写">
                                    
            银行名称
                                    
         </div>
                                    
         <h3>
                                    
            卡号
                                    
         </h3>
                                    
         <span class="work-tag">
                                    
            已验证
                                    
         </span>
                                    
         <div class="notwork">
                                    
            审核不通过
                                    
            <a href="###" class="bank-card-btn">
                                    
               重新绑定
                                    
            </a>
                                    
         </div>
                                    
         <div class="waiting">
                                    
            审核中
                                    
         </div>
                                    
      </li>
                                    
      <li class="add-card">
                                    
         <a href="###" class="link-standard"> + 添加银行卡 </a>
                                    
      </li>
                                    
   </ul>
                                    
</div>

过滤器行内结构

这里的实例结构对于不同项目的UI的兼容性较差，在不同项目上，可能需要进行二次定义，或者直接重构

结构中用到的所有表单元素，均不用套用标准表单的结构，直接在元素用引用对应的表单样式即可，不明问ray

起止时间

xxxx-xx-xx

--

xxxx-xx-xx

                                
                                    <div class="fliter-inline-wrap">
                                    
   <span class="lt">
                                    
      ...
                                    
   </span>
                                    
   <div class="fliter-inline-width1">
                                    
      ...
                                    
   </div>
                                    
   <div class="fliter-inline-bar">
                                    
      ...
                                    
   </div>
                                    
   <button class="btn primary small-btn" type="submit">
                                    
      ...
                                    
   </button>
                                    
</div>

网上银行选择

                                
                                    <div class="ebank-wrap">
                                    
   <ul class="ebanks">
                                    
      <li class="active">
                                    
         <label class="ebank-label">
                                    
            <i></i>
                                    
            <span class="etag"> 企业（个人） </span>
                                    
            <span class="bank-bg （bank-...）"></span>
                                    
            <input type="radio" style="display: none;" name="ebank/>
                                    
         </label>
                                    
      </li>
                                    
      <li>
                                    
         <label class="more-ebank">
                                    
            查看更多
                                    
         </label>
                                    
      </li>
                                    
   </ul>
                                    
</div>

模态窗口

基准窗口样式

there are nothing here

当模态窗口出现时，bodyDOM中添加类.modal-open
模态窗口中的内容区块（包括按钮区块），如需要改变彼此之间的间距，需要添加排版工具类，如class="magin-（top，bottom，left，right）-（40，30，20，10）px"
模态窗口高度不限，宽度随媒介宽度改变，最低宽度为650像素

模态窗口测试

                                
                                    <div class="modal-background">
                                    
   <div class="modal-layer">
                                    
      <div class="modal-position">
                                    
         <div class="modal-wrap">
                                    
            <div class="modal-head">
                                    
               <button class="modal-close">
                                    
                  <i></i>
                                    
               </button>
                                    
            </div>
                                    
            <div class="modal-body">
                                    
               ...
                                    
            </div>
                                    
         </div>
                                    
      </div>
                                    
   </div>
                                    
</div>

排版

标题

<h1>标题内容

<h2>标题内容

<h3>标题内容

<h4>标题内容

<h5>标题内容

<h6>标题内容

主体字符串尺寸

主体内容

主体内容

主体内容

主体内容

主体内容

主体内容

对齐

按钮

可作按钮的标签或元素

预定义样式

按钮尺寸

按钮的行内排列

按钮在某些特殊情况下

路径导航

实例

表格

表格标题

标准表格

表单

表单框架

keyin 类型的表单

模拟 <select> 标签

多选和单选表单

弹出模态窗口

日期控件

特殊结构表单

表单校验

表单组件尺寸

图表

图表标题

标准图表

图表图例

标签页

标准标签页

交易额（元）

306,000.00

交易笔数（笔）

300

交易用户量（人）

5,216

分页

标准分页

分页行内排列

业务流程提示

实例

...成功！

正在...

...失败！

验证中...！

...成功！

...信息！

...错误！

...等待！

警示

实例

特殊页面组件

数据统计部件

当前数据统计

总收入(元) 共 157 笔

30,000.00

总支出(元) 共 2508 笔

23,000.00

可提金额 单位：元

7,000,000,00 提现

未来7天内可提金额 单位：元

3,000,000,00

10,000.00

25,000.00

188,000.00

178,800.00

1,112,580,000.00

`<h1>`标题内容

`<h2>`标题内容

`<h3>`标题内容

`<h4>`标题内容

`<h5>`标题内容

`<h6>`标题内容

可提金额单位：元

未来7天内可提金额单位：元