基礎組件 · Frozen UI

[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"></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> ~~~