多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
[TOC] ## 文本 type ### 文本大小 ![](https://box.kancloud.cn/73a785480262f087cc8d24c29a922b74_324x248.png) ~~~ <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> ~~~ ### 文本颜色 ![](https://box.kancloud.cn/02584963fd05dc68067fa31b315643e8_415x277.png) ~~~ <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> ~~~ ### 文本两端对齐 ![](https://box.kancloud.cn/251d230b0562fdd77f98939fdbb7fd07_412x228.png) ~~~ <div class="ui-whitespace"> <p class="ui-txt-justify-one">一行文本</p> <p class="ui-txt-justify">普通的多行文本内容:在首个《进击的巨人》预热视频中只是描述了一个巨人恰好拿起一人准备放进嘴巴里面,而另个场景则是超大型巨人附着浓重的烟雾将巨手拍下来。将于今年8月1日上映。</p> </div> ~~~ ## 布局 layout ### 平铺 ![](https://box.kancloud.cn/0f3a50a4b6ca36aa1bbf8f0d0f37d518_449x135.png) ~~~ <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布局排列,默认横排 ![](https://box.kancloud.cn/c1e941508af636151648cddb877d7c0b_452x626.png) ~~~ <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布局排列纵向,以此类推 ![](https://box.kancloud.cn/72c3cc4c5114cb5c0695780b04aa4fea_423x175.png) ~~~ <div class="ui-flex ui-flex-ver ui-flex-pack-center ui-flex-align-start"> <div>左中</div> <div>左中</div> </div> ~~~ ### flex网格布局 ![](https://box.kancloud.cn/83542a2cd9f370154dd2b98fe9f7db42_417x176.png) ~~~ <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 ![](https://box.kancloud.cn/6b009b2f7fd772f7cb142dd0eb598b9a_444x315.png) ~~~ <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 ![](https://box.kancloud.cn/ba1d112c013fac9230281270e0602516_434x335.png) ~~~ <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网格适合多行 ![](https://box.kancloud.cn/7c343985948ba4ef4a18e6c65a55c259_411x263.png) ~~~ <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网格 ![](https://box.kancloud.cn/f41a7f101c753e4957c321739438436c_411x265.png) ~~~ <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 ![](https://box.kancloud.cn/9add24ecf1186d82f27522de66556245_411x308.png) ~~~ <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> ~~~ ### 三列 ![](https://box.kancloud.cn/498c13d9c886e353aa0ef302dfc6e4f2_436x567.png) ~~~ <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> ~~~ ### 两列 ![](https://box.kancloud.cn/173f9edc062b1c2ea153fab88f91895f_398x303.png) ~~~ <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属性 ![](https://box.kancloud.cn/cb128a8c4221782a2473f29db1098ea7_440x250.png) ~~~ <p class="demo-desc">失去响应时,相对居中,默认高宽比为31.25%,重写需覆盖padding-top属性</p> <section class="ui-placehold-wrap"> <div class="ui-placehold">正在加载中...</div> </section> ~~~ ### 图片占位 ![](https://box.kancloud.cn/c72fb2e42e9b25a5447e6c7317b1b0e1_421x204.png) ~~~ <section class="ui-placehold-img"> <span style="background-image:url(http://placeholder.qiniudn.com/640x200)"></span> </section> ~~~ ## 1px解决方案 border ### 1px解决方案 ![](https://box.kancloud.cn/b4adc033ae47b5a77a2a7ecb7eb6608a_419x401.png) ~~~ <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 ### 箭头链接 ![](https://box.kancloud.cn/c09f8340c60662b9acf7218346a365e1_401x110.png) ~~~ <div class="ui-arrowlink">箭头链接</div> ~~~ ## 文字截断 nowrap ### 一行文字截断 ![](https://box.kancloud.cn/98896120aa6a51ce1ff4d9f946790c4f_396x110.png) ~~~ <div class="ui-nowrap ui-whitespace"> 一行文字超出长度省略,内容文字超出长度省略,内容文字超出长度省略,内容文字超出长度省略,内容文字超出长度省略,内容文字超出长度省略,内容文字超出长度省略,内容文字超出长度省略,内容文字超出长度省略,内容文字超出长度省略,内容文字超出长度省略 </div> ~~~ ### 一行文字截断弹性布局 ![](https://box.kancloud.cn/75f6d1dfd1bcd6e4cfa57d1f6472e125_394x229.png) ~~~ <div class="ui-nowrap-flex ui-whitespace"> 一行文字超出长度省略,内容文字超出长度省略,内容文字超出长度省略,内容文字超出长度省略,内容文字超出长度省略,内容文字超出长度省略,内容文字超出长度省略,内容文字超出长度省略,内容文字超出长度省略,内容文字超出长度省略,内容文字超出长度省略 </div> ~~~ ### 多行文字截断,默认两行 ![](https://box.kancloud.cn/037c8d84caa4d8d40d3d2b7007e2acf6_390x227.png) ~~~ <div class="ui-nowrap-multi ui-whitespace"> 多行文字超出长度省略,内容文字超出长度省略,内容文字超出长度省略,内容文字超出长度省略,内容文字超出长度省略,内容文字超出长度省略,内容文字超出长度省略,内容文字超出长度省略,内容文字超出长度省略,内容文字超出长度省略,内容文字超出长度省略 </div> ~~~ ## 两端留白 whitespace ### 两端留白,640以下10px,以上15px ![](https://box.kancloud.cn/94e131e73c57ac44e85162c16d78e11d_402x121.png) ~~~ <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两端对齐一行多行 ![](https://box.kancloud.cn/96ef8957908426dd5f1fd5d4a673098c_414x356.png) ~~~ <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> ~~~ ### 弹性布局 ![](https://box.kancloud.cn/ef65c9e98fa3a5c913315ddd9d68f637_418x137.png) ~~~ <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 图标 ![](https://box.kancloud.cn/b3926c260207eb61cee30b53895f84a5_339x713.png) ![](https://box.kancloud.cn/401cb29934d776ce815e9554c6d5652b_323x695.png) ![](https://box.kancloud.cn/fb1da6f7a192370544608e78ffeef42d_319x602.png) ![](https://box.kancloud.cn/7b2212d085eadd6f4a8ddd8567fb29e1_336x198.png) ~~~ <ul class="icon-lists clear"> <li> <i class="ui-icon-add"></i> <div class="code">&#xf615;</div> <div class="fontclass">.ui-icon-add</div> </li> <li> <i class="ui-icon-more"></i> <div class="code">&#xf616;</div> <div class="fontclass">.ui-icon-more</div> </li> <li> <i class="ui-icon-arrow"></i> <div class="code">&#xf600;</div> <div class="fontclass">.ui-icon-arrow</div> </li> <li> <i class="ui-icon-return"></i> <div class="code">&#xf614;</div> <div class="fontclass">.ui-icon-return</div> </li> <li> <i class="ui-icon-checked"></i> <div class="code">&#xf601;</div> <div class="fontclass">.ui-icon-checked</div> </li> <li> <i class="ui-icon-checked-s"></i> <div class="code">&#xf602;</div> <div class="fontclass">.ui-icon-checked-s</div> </li> <li> <i class="ui-icon-info-block"></i> <div class="code">&#xf603;</div> <div class="fontclass">.ui-icon-info-block</div> </li> <li> <i class="ui-icon-success-block"></i> <div class="code">&#xf604;</div> <div class="fontclass">.ui-icon-success-block</div> </li> <li> <i class="ui-icon-warn-block"></i> <div class="code">&#xf605;</div> <div class="fontclass">.ui-icon-warn-block</div> </li> <li> <i class="ui-icon-info"></i> <div class="code">&#xf606;</div> <div class="fontclass">.ui-icon-info</div> </li> <li> <i class="ui-icon-success"></i> <div class="code">&#xf607;</div> <div class="fontclass">.ui-icon-success</div> </li> <li> <i class="ui-icon-warn"></i> <div class="code">&#xf608;</div> <div class="fontclass">.ui-icon-warn</div> </li> <li> <i class="ui-icon-next"></i> <div class="code">&#xf617;</div> <div class="fontclass">.ui-icon-next</div> </li> <li> <i class="ui-icon-prev"></i> <div class="code">&#xf618;</div> <div class="fontclass">.ui-icon-prev</div> </li> <li> <i class="ui-icon-tag"></i> <div class="code">&#xf60d;</div> <div class="fontclass">.ui-icon-tag</div> </li> <li> <i class="ui-icon-tag-pop"></i> <div class="code">&#xf60f;</div> <div class="fontclass">.ui-icon-tag-pop</div> </li> <li> <i class="ui-icon-tag-s"></i> <div class="code">&#xf60e;</div> <div class="fontclass">.ui-icon-tag-s</div> </li> <li> <i class="ui-icon-warn-lg"></i> <div class="code">&#xf609;</div> <div class="fontclass">.ui-icon-warn-lg</div> </li> <li> <i class="ui-icon-close"></i> <div class="code">&#xf60a;</div> <div class="fontclass">.ui-icon-close</div> </li> <li> <i class="ui-icon-close-progress"></i> <div class="code">&#xf619;</div> <div class="fontclass">.ui-icon-close-progress</div> </li> <li> <i class="ui-icon-close-page"></i> <div class="code">&#xf60b;</div> <div class="fontclass">.ui-icon-close-page</div> </li> <li> <i class="ui-icon-emo"></i> <div class="code">&#xf61a;</div> <div class="fontclass">.ui-icon-emo</div> </li> <li> <i class="ui-icon-delete"></i> <div class="code">&#xf61b;</div> <div class="fontclass">.ui-icon-delete</div> </li> <li> <i class="ui-icon-search"></i> <div class="code">&#xf60c;</div> <div class="fontclass">.ui-icon-search</div> </li> <li> <i class="ui-icon-order"></i> <div class="code">&#xf61c;</div> <div class="fontclass">.ui-icon-order</div> </li> <li> <i class="ui-icon-news"></i> <div class="code">&#xf61d;</div> <div class="fontclass">.ui-icon-news</div> </li> <li> <i class="ui-icon-personal"></i> <div class="code">&#xf61e;</div> <div class="fontclass">.ui-icon-personal</div> </li> <li> <i class="ui-icon-dressup"></i> <div class="code">&#xf61f;</div> <div class="fontclass">.ui-icon-dressup</div> </li> <li> <i class="ui-icon-cart"></i> <div class="code">&#xf620;</div> <div class="fontclass">.ui-icon-cart</div> </li> <li> <i class="ui-icon-history"></i> <div class="code">&#xf621;</div> <div class="fontclass">.ui-icon-history</div> </li> <li> <i class="ui-icon-wallet"></i> <div class="code">&#xf622;</div> <div class="fontclass">.ui-icon-wallet</div> </li> <li> <i class="ui-icon-refresh"></i> <div class="code">&#xf623;</div> <div class="fontclass">.ui-icon-refresh</div> </li> <li> <i class="ui-icon-thumb"></i> <div class="code">&#xf624;</div> <div class="fontclass">.ui-icon-thumb</div> </li> <li> <i class="ui-icon-file"></i> <div class="code">&#xf625;</div> <div class="fontclass">.ui-icon-file</div> </li> <li> <i class="ui-icon-hall"></i> <div class="code">&#xf626;</div> <div class="fontclass">.ui-icon-hall</div> </li> <li> <i class="ui-icon-voice"></i> <div class="code">&#xf627;</div> <div class="fontclass">.ui-icon-voice</div> </li> <li> <i class="ui-icon-unfold"></i> <div class="code">&#xf628;</div> <div class="fontclass">.ui-icon-unfold</div> </li> <li> <i class="ui-icon-gototop"></i> <div class="code">&#xf629;</div> <div class="fontclass">.ui-icon-gototop</div> </li> <li> <i class="ui-icon-share"></i> <div class="code">&#xf62a;</div> <div class="fontclass">.ui-icon-share</div> </li> <li> <i class="ui-icon-home"></i> <div class="code">&#xf62b;</div> <div class="fontclass">.ui-icon-home</div> </li> <li> <i class="ui-icon-pin"></i> <div class="code">&#xf62c;</div> <div class="fontclass">.ui-icon-pin</div> </li> <li> <i class="ui-icon-star"></i> <div class="code">&#xf62d;</div> <div class="fontclass">.ui-icon-star</div> </li> <li> <i class="ui-icon-bugle"></i> <div class="code">&#xf62e;</div> <div class="fontclass">.ui-icon-bugle</div> </li> <li> <i class="ui-icon-trend"></i> <div class="code">&#xf62f;</div> <div class="fontclass">.ui-icon-trend</div> </li> <li> <i class="ui-icon-unchecked"></i> <div class="code">&#xf610;</div> <div class="fontclass">.ui-icon-unchecked</div> </li> <li> <i class="ui-icon-unchecked-s"></i> <div class="code">&#xf611;</div> <div class="fontclass">.ui-icon-unchecked-s</div> </li> <li> <i class="ui-icon-play-active"></i> <div class="code">&#xf630;</div> <div class="fontclass">.ui-icon-play-active</div> </li> <li> <i class="ui-icon-stop-active"></i> <div class="code">&#xf631;</div> <div class="fontclass">.ui-icon-stop-active</div> </li> <li> <i class="ui-icon-play"></i> <div class="code">&#xf632;</div> <div class="fontclass">.ui-icon-play</div> </li> <li> <i class="ui-icon-stop"></i> <div class="code">&#xf633;</div> <div class="fontclass">.ui-icon-stop</div> </li> <li> <i class="ui-icon-set"></i> <div class="code">&#xf634;</div> <div class="fontclass">.ui-icon-set</div> </li> <li> <i class="ui-icon-add-group"></i> <div class="code">&#xf635;</div> <div class="fontclass">.ui-icon-add-group</div> </li> <li> <i class="ui-icon-add-people"></i> <div class="code">&#xf636;</div> <div class="fontclass">.ui-icon-add-people</div> </li> <li> <i class="ui-icon-pc"></i> <div class="code">&#xf637;</div> <div class="fontclass">.ui-icon-pc</div> </li> <li> <i class="ui-icon-scan"></i> <div class="code">&#xf638;</div> <div class="fontclass">.ui-icon-scan</div> </li> <li> <i class="ui-icon-tag-svip"></i> <div class="code">&#xf613;</div> <div class="fontclass">.ui-icon-tag-svip</div> </li> <li> <i class="ui-icon-tag-vip"></i> <div class="code">&#xf612;</div> <div class="fontclass">.ui-icon-tag-vip</div> </li> <li> <i class="ui-icon-male"></i> <div class="code">&#xf639;</div> <div class="fontclass">.ui-icon-male</div> </li> <li> <i class="ui-icon-female"></i> <div class="code">&#xf63a;</div> <div class="fontclass">.ui-icon-female</div> </li> <li> <i class="ui-icon-collect"></i> <div class="code">&#xf63b;</div> <div class="fontclass">.ui-icon-collect</div> </li> <li> <i class="ui-icon-commented"></i> <div class="code">&#xf63c;</div> <div class="fontclass">.ui-icon-commented</div> </li> <li> <i class="ui-icon-like"></i> <div class="code">&#xf63d;</div> <div class="fontclass">.ui-icon-like</div> </li> <li> <i class="ui-icon-liked"></i> <div class="code">&#xf63e;</div> <div class="fontclass">.ui-icon-liked</div> </li> <li> <i class="ui-icon-comment"></i> <div class="code">&#xf63f;</div> <div class="fontclass">.ui-icon-comment</div> </li> <li> <i class="ui-icon-collected"></i> <div class="code">&#xf640;</div> <div class="fontclass">.ui-icon-collected</div> </li> </ul> ~~~