[TOC]
## 文本 type
### 文本大小
~~~
<div class="ui-whitespace">
<p>默认字体大小32px, 行高为1.5</p>
<h1>标题：h1, 36px</h1>
<h2>栏目：h2, 34px</h2>
<h3>内文：导航，正文段落h3, 32px</h3>
<h4>内文：人名歌名标题等h4, 32px</h4>
<h5>副内文：h5, 同ui-txt-sub, 28px</h5>
<h6>辅助文字：h6, 同ui-txt-tips, 24px</h6>
</div>
~~~
### 文本颜色
~~~
<div class="ui-whitespace">
<p class="ui-txt-default">主要内容色</p>
<p class="ui-txt-white" style="background:#000">主要内容反色</p>
<p class="ui-txt-info">辅助次要内容色</p>
<p class="ui-txt-muted">时间，输入框，不可点击状态文本色</p>
<p class="ui-txt-warning">警示，会员红名，搜索热词，同ui-txt-red</p>
<p class="ui-txt-highlight">关键词高亮，同em</p>
<p><a>链接颜色</a></p>
<p class="ui-txt-feeds">feeds链接</p>
</div>
~~~
### 文本两端对齐
~~~
<div class="ui-whitespace">
<p class="ui-txt-justify-one">一行文本</p>
<p class="ui-txt-justify">普通的多行文本内容：在首个《进击的巨人》预热视频中只是描述了一个巨人恰好拿起一人准备放进嘴巴里面，而另个场景则是超大型巨人附着浓重的烟雾将巨手拍下来。将于今年8月1日上映。</p>
</div>
~~~
## 布局 layout
### 平铺
~~~
<ul class="ui-tiled">
<li><div>菜单</div><i>1</i></li>
<li><div>菜单</div><i>2</i></li>
<li><div>菜单</div><i>3</i></li>
</ul>
~~~
### flex布局排列，默认横排
~~~
<div class="ui-flex ui-flex-pack-start">
<div>左</div><div>左</div>
</div>
<div class="ui-flex ui-flex-pack-center">
<div>中</div><div>中</div>
</div>
<div class="ui-flex ui-flex-pack-end">
<div>右</div><div>右</div>
</div>
<div class="ui-flex ui-flex-align-start">
<div>上</div><div>上</div>
</div>
<div class="ui-flex ui-flex-align-center">
<div>中</div><div>中</div>
</div>
<div class="ui-flex ui-flex-align-end">
<div>下</div><div>下</div>
</div>
~~~
### flex布局排列纵向,以此类推
~~~
<div class="ui-flex ui-flex-ver ui-flex-pack-center ui-flex-align-start">
<div>左中</div>
<div>左中</div>
</div>
~~~
### flex网格布局
~~~
<ul class="ui-row-flex">
<li class="ui-col ui-flex ui-flex-pack-start"><div>左</div><div>左</div></li>
<li class="ui-col ui-flex ui-flex-pack-center"><div>中</div><div>中</div></li>
<li class="ui-col ui-flex ui-flex-pack-end"><div>右</div><div>右</div></li>
<li class="ui-col ui-flex ui-flex-ver ui-flex-align-end ui-flex-pack-end"><div>竖排右下</div><div>竖排右下</div></li>
</ul>
~~~
### 布局1
~~~
<header class="ui-header ui-header-stable ui-border-b">
<i class="ui-icon-return" onclick="history.back()"></i><h1>layout</h1><button class="ui-btn">回首页</button>
</header>
<footer class="ui-footer ui-footer-stable ui-border-t">
<ul class="ui-tiled">
<li><div>菜单</div><i>1</i></li>
<li><div>菜单</div><i>2</i></li>
<li><div>菜单</div><i>3</i></li>
</ul>
</footer>
<section class="ui-container ui-center">
内容
</section>
~~~
### 布局2
~~~
<header class="ui-header ui-header-positive ui-border-b">
<h1>标题</h1>
</header>
<div class="ui-footer ui-footer-stable ui-btn-group ui-border-t">
<button class="ui-btn-lg">
拒绝
</button>
<button class="ui-btn-lg">
拒绝
</button>
<button class="ui-btn-lg ui-btn-primary">
同意
</button>
</div>
<section class="ui-container ui-center">
内容
</section>
~~~
## 网格 grid
### float网格适合多行
~~~
<ul class="ui-row">
<li class="ui-col ui-col-50">50</li>
<li class="ui-col ui-col-50">50</li>
<li class="ui-col ui-col-25">25</li>
<li class="ui-col ui-col-75">75</li>
<li class="ui-col ui-col-33">33</li>
<li class="ui-col ui-col-67">67</li>
<li class="ui-col ui-col-20">20</li>
<li class="ui-col ui-col-80">80</li>
<li class="ui-col ui-col-10">10</li>
<li class="ui-col ui-col-90">90</li>
</ul>
~~~
### flex网格
~~~
<div class="ui-row-flex ui-whitespace">
<div class="ui-col ui-col">平均分</div>
<div class="ui-col ui-col">平均分</div>
<div class="ui-col ui-col">平均分</div>
<div class="ui-col ui-col">平均分</div>
</div>
<div class="ui-row-flex ui-whitespace">
<div class="ui-col ui-col-2">2/3</div>
<div class="ui-col">1/3</div>
</div>
<div class="ui-row-flex ui-whitespace">
<div class="ui-col ui-col-3">3/4</div>
<div class="ui-col">1/4</div>
</div>
<div class="ui-row-flex ui-whitespace">
<div class="ui-col ui-col-4">4/5</div>
<div class="ui-col">1/5</div>
</div>
<div class="ui-row-flex ui-whitespace">
<div class="ui-col ui-col-3">3/5</div>
<div class="ui-col ui-col-2">2/5</div>
</div>
~~~
### 竖排flex
~~~
<div class="ui-row-flex ui-whitespace ui-row-flex-ver">
<div class="ui-col">1/2</div>
<div class="ui-col">1/2</div>
</div>
<br>
<div class="ui-row-flex ui-whitespace ui-row-flex-ver">
<div class="ui-col ui-col-3">3/4</div>
<div class="ui-col">1/4</div>
</div>
~~~
### 三列
~~~
<ul class="ui-grid-trisect ui-border-b">
<li>
<div class="ui-grid-trisect-img">
<span style="background-image:url(http://placeholder.qiniudn.com/190x284)"></span>
</div>
<h4>高尔夫 <span>2.3M</span></h4>
<button class="ui-btn-s ui-btn-progress">免费</button>
</li>
<li>
<div class="ui-grid-trisect-img">
<span style="background-image:url(http://placeholder.qiniudn.com/190x284)"></span>
</div>
<h4>高尔夫 <span>2.3M</span></h4>
<button class="ui-btn-s ui-btn-progress">免费</button>
</li>
<li>
<div class="ui-grid-trisect-img">
<span style="background-image:url(http://placeholder.qiniudn.com/190x284)"></span>
</div>
<h4>高尔夫 <span>2.3M</span></h4>
<button class="ui-btn-s ui-btn-progress">免费</button>
</li>
<li>
<div class="ui-grid-trisect-img">
<span style="background-image:url(http://placeholder.qiniudn.com/190x284)"></span>
</div>
<h4>高尔夫 <span>2.3M</span></h4>
<button class="ui-btn-s ui-btn-progress">免费</button>
</li>
</ul>
~~~
### 两列
~~~
<ul class="ui-grid-halve">
<li>
<div class="ui-grid-halve-img">
<span style="background-image:url(http://placeholder.qiniudn.com/290x160)"></span>
</div>
</li>
<li>
<div class="ui-grid-halve-img">
<span style="background-image:url(http://placeholder.qiniudn.com/290x160)"></span>
</div>
</li>
<li>
<div class="ui-grid-halve-img">
<span style="background-image:url(http://placeholder.qiniudn.com/290x160)"></span>
</div>
</li>
<li>
<div class="ui-grid-halve-img">
<span style="background-image:url(http://placeholder.qiniudn.com/290x160)"></span>
</div>
</li>
</ul>
~~~
## 占位 placehold
占位解决方案失去响应时，相对居中，默认高宽比为31.25%，重写需覆盖padding-top属性
~~~
<p class="demo-desc">失去响应时，相对居中，默认高宽比为31.25%，重写需覆盖padding-top属性</p>
<section class="ui-placehold-wrap">
<div class="ui-placehold">正在加载中...</div>
</section>
~~~
### 图片占位
~~~
<section class="ui-placehold-img">
<span style="background-image:url(http://placeholder.qiniudn.com/640x200)"></span>
</section>
~~~
## 1px解决方案 border
### 1px解决方案
~~~
<ul class="ui-list-text border-list">
<li class="ui-border-t">上边框</li>
<li class="ui-border">边框</li>
<li class="ui-border-b">下边框</li>
<li class="ui-border-tb">上下边框</li>
<li class="ui-border-l">左边框</li>
<li class="ui-border-r">右边框</li>
<li class="ui-border-radius">
圆角边框
</li>
</ul>
~~~
## 箭头链接 arrowlink
### 箭头链接
~~~
<div class="ui-arrowlink">箭头链接</div>
~~~
## 文字截断 nowrap
### 一行文字截断
~~~
<div class="ui-nowrap ui-whitespace">
一行文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略
</div>
~~~
### 一行文字截断弹性布局
~~~
<div class="ui-nowrap-flex ui-whitespace">
一行文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略
</div>
~~~
### 多行文字截断，默认两行
~~~
<div class="ui-nowrap-multi ui-whitespace">
多行文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略
</div>
~~~
## 两端留白 whitespace
### 两端留白,640以下10px，以上15px
~~~
<ul class="ui-row ui-whitespace">
<li class="ui-col ui-col-50">50</li>
<li class="ui-col ui-col-50">50</li>
</ul>
~~~
## 两端对齐 justify
### text-align:justify两端对齐一行多行
~~~
<div>
<p class="demo-desc">一行</p>
<ul class="ui-justify ui-whitespace">
<li><div class="test-img"></div><p>xxx</p></li>
<li><div class="test-img"></div><p>xxx</p></li>
<li><div class="test-img"></div><p>xxx</p></li>
<li><div class="test-img"></div><p>xxx</p></li>
</ul>
<p class="demo-desc">多行</p>
<ul class="ui-justify ui-whitespace">
<li><div class="test-img"></div><p>xxx</p></li>
<li><div class="test-img"></div><p>xxx</p></li>
<li><div class="test-img"></div><p>xxx</p></li>
<li><div class="test-img"></div><p>xxx</p></li>
<li><div class="test-img"></div><p>xxx</p></li>
<li><div class="test-img"></div><p>xxx</p></li>
<li><div class="test-img"></div><p>xxx</p></li>
<li><div class="test-img"></div><p>xxx</p></li>
<li><div class="test-img"></div><p>xxx</p></li>
<li><div class="test-img"></div><p>xxx</p></li>
<li><div class="test-img"></div><p>xxx</p></li>
</ul>
</div>
~~~
### 弹性布局
~~~
<ul class="ui-justify-flex ui-whitespace">
<li class="test-img"></li>
<li class="test-img"></li>
<li class="test-img"></li>
<li class="test-img"></li>
</ul>
~~~
## 所有图标 icon
### ui-icon 图标
~~~
<ul class="icon-lists clear">
<li>
<i class="ui-icon-add"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-add</div>
</li>
<li>
<i class="ui-icon-more"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-more</div>
</li>
<li>
<i class="ui-icon-arrow"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-arrow</div>
</li>
<li>
<i class="ui-icon-return"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-return</div>
</li>
<li>
<i class="ui-icon-checked"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-checked</div>
</li>
<li>
<i class="ui-icon-checked-s"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-checked-s</div>
</li>
<li>
<i class="ui-icon-info-block"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-info-block</div>
</li>
<li>
<i class="ui-icon-success-block"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-success-block</div>
</li>
<li>
<i class="ui-icon-warn-block"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-warn-block</div>
</li>
<li>
<i class="ui-icon-info"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-info</div>
</li>
<li>
<i class="ui-icon-success"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-success</div>
</li>
<li>
<i class="ui-icon-warn"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-warn</div>
</li>
<li>
<i class="ui-icon-next"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-next</div>
</li>
<li>
<i class="ui-icon-prev"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-prev</div>
</li>
<li>
<i class="ui-icon-tag"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-tag</div>
</li>
<li>
<i class="ui-icon-tag-pop"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-tag-pop</div>
</li>
<li>
<i class="ui-icon-tag-s"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-tag-s</div>
</li>
<li>
<i class="ui-icon-warn-lg"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-warn-lg</div>
</li>
<li>
<i class="ui-icon-close"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-close</div>
</li>
<li>
<i class="ui-icon-close-progress"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-close-progress</div>
</li>
<li>
<i class="ui-icon-close-page"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-close-page</div>
</li>
<li>
<i class="ui-icon-emo"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-emo</div>
</li>
<li>
<i class="ui-icon-delete"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-delete</div>
</li>
<li>
<i class="ui-icon-search"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-search</div>
</li>
<li>
<i class="ui-icon-order"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-order</div>
</li>
<li>
<i class="ui-icon-news"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-news</div>
</li>
<li>
<i class="ui-icon-personal"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-personal</div>
</li>
<li>
<i class="ui-icon-dressup"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-dressup</div>
</li>
<li>
<i class="ui-icon-cart"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-cart</div>
</li>
<li>
<i class="ui-icon-history"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-history</div>
</li>
<li>
<i class="ui-icon-wallet"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-wallet</div>
</li>
<li>
<i class="ui-icon-refresh"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-refresh</div>
</li>
<li>
<i class="ui-icon-thumb"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-thumb</div>
</li>
<li>
<i class="ui-icon-file"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-file</div>
</li>
<li>
<i class="ui-icon-hall"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-hall</div>
</li>
<li>
<i class="ui-icon-voice"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-voice</div>
</li>
<li>
<i class="ui-icon-unfold"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-unfold</div>
</li>
<li>
<i class="ui-icon-gototop"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-gototop</div>
</li>
<li>
<i class="ui-icon-share"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-share</div>
</li>
<li>
<i class="ui-icon-home"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-home</div>
</li>
<li>
<i class="ui-icon-pin"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-pin</div>
</li>
<li>
<i class="ui-icon-star"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-star</div>
</li>
<li>
<i class="ui-icon-bugle"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-bugle</div>
</li>
<li>
<i class="ui-icon-trend"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-trend</div>
</li>
<li>
<i class="ui-icon-unchecked"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-unchecked</div>
</li>
<li>
<i class="ui-icon-unchecked-s"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-unchecked-s</div>
</li>
<li>
<i class="ui-icon-play-active"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-play-active</div>
</li>
<li>
<i class="ui-icon-stop-active"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-stop-active</div>
</li>
<li>
<i class="ui-icon-play"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-play</div>
</li>
<li>
<i class="ui-icon-stop"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-stop</div>
</li>
<li>
<i class="ui-icon-set"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-set</div>
</li>
<li>
<i class="ui-icon-add-group"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-add-group</div>
</li>
<li>
<i class="ui-icon-add-people"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-add-people</div>
</li>
<li>
<i class="ui-icon-pc"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-pc</div>
</li>
<li>
<i class="ui-icon-scan"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-scan</div>
</li>
<li>
<i class="ui-icon-tag-svip"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-tag-svip</div>
</li>
<li>
<i class="ui-icon-tag-vip"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-tag-vip</div>
</li>
<li>
<i class="ui-icon-male"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-male</div>
</li>
<li>
<i class="ui-icon-female"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-female</div>
</li>
<li>
<i class="ui-icon-collect"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-collect</div>
</li>
<li>
<i class="ui-icon-commented"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-commented</div>
</li>
<li>
<i class="ui-icon-like"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-like</div>
</li>
<li>
<i class="ui-icon-liked"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-liked</div>
</li>
<li>
<i class="ui-icon-comment"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-comment</div>
</li>
<li>
<i class="ui-icon-collected"></i>
<div class="code"></div>
<div class="fontclass">.ui-icon-collected</div>
</li>
</ul>
~~~
