logo

CSS

浏览器默认样式统一,基础样式,网格,表格、表单、按钮及常用组件样式。

List


基本使用

纯文本列表

list-box + list-item
list-box默认左侧开口的,在其后追加list-box-primary左侧列表没有开口,文字溢出显示省略号。

文本文本纯文本文本文本纯文本文本文本纯文本文本文本纯文本

文本文本纯文本文本文本纯文本文本文本纯文本文本文本纯文本

<div class="list-box">
    <div class="list-item">
        <h4>
            <span class="title-text">
                文本文本纯文本文本文本纯文本文本文本纯文本文本文本纯文本
            </span>
        </h4>
    </div>
    ......
</div>                                                  
        

list-info + dl(推荐使用这个,结构简单,可扩展性强)
list-info默认左侧闭口的,在其后追加list-info-offset左侧列表有开口。列表文字溢出没有省略号,list-item上加text-ellipsis溢出有省略号。

文本文本纯文本文本文本纯文本文本文本纯文本文本文本纯文本
文本文本纯文本文本文本纯文本文本文本纯文本文本文本纯文本
<div class="list-info">
    <dl>
        <dd class="list-item-indent text-ellipsis">
            文本文本纯文本文本文本纯文本文本文本纯文本文本文本纯文本
        </dd>
   </dl>
   ......
</div>                                                  
        

列表标题与注释

list-box + list-item

文本文本纯文本文本文本纯文本文本文本纯文本文本文本纯文本

  • 注释注释注释
  • 2017-11-01

文本文本纯文本文本文本纯文本文本文本纯文本文本文本纯文本

  • 注释注释注释
  • 2017-11-01
<div class="list-box">
    <div class="list-item">
        <h4>
            <span class="title-text">
                文本文本纯文本文本文本纯文本文本文本纯文本文本文本纯文本
            </span>
            <i class="fc fc-circle-add"></i>
        </h4>
                    
        <ul class="list-item-desc">
            <li>注释注释注释</li>
            <li>2017-11-01</li>
         </ul>
            
    </div>
</div>
......                                                                          
        

list-info + dl(推荐使用这个,,结构简单,可扩展性强)

文本文本文本文本
  • 注释注释注释
  • 2017-11-01
文本文本文本文本

注释注释

<div class="list-info list-info-offset list-info-large">
    <dl>
        <dd>
            文本文本文本文本
                    
            <ul class="list-item-desc">
                <li>注释注释注释</li>
                <li>2017-11-01</li>
            </ul>
            
        </dd>                            
    </dl>
    <dl>
        <dd>
            文本文本文本文本
                    
            <p class="list-item-subtitle">注释注释</p>
            
        </dd>
    </dl>
</div>
......                                                                          
        

单行图标与文本组合

list-info + dl

单位
单位
上海互联网软件有限公司
<div class="list-info">
    <dl>
                    
        <dt>
            <i class="fc fc-department"></i>
        </dt>
        
        <dd class="text-ellipsis">
            单位
        </dd>
        <dd class="list-item-auto">
            上海互联网软件有限公司
        </dd>
    </dl>
    <dl>
        <dt>
            <i class="fc fc-department"></i>
        </dt>
        <dd class="text-ellipsis">
             单位
        </dd>
        <dd class="list-item-auto list-item-auto-ellipsis text-right">
            区
        </dd>
    </dl>
</div>                                                  
        
单行图文组合
单行图文组合
<div class="list-info list-info-offset">
    <dl>
                    
        <dd class="list-item-auto">
            <span class="item-icon item-icon-bg-green item-icon-small">
                <i class="fc fc-task"></i>
            </span>
        </dd>
        
        <dd>
            单行图文组合
        </dd>
</dl>
                        ......        
</div>                                                  
        

两行图标和文本组合

panel + media-box

图文组合列表

20

标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一 2017-02-17

由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状,有自己的运行轨道。

标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一 2017-02-17

由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状,有自己的运行轨道。

<div class="panel">
    <h3 class="panel-hd">
        图文组合列表
    </h3>
    <div class="panel-bd">
        <div class="media-box">
            <div class="media-box-hd">
                <span class="item-icon item-icon-bg-blue">
                    <i class="fc fc-task"></i>
                </span>
                <span class="tip-news tip-news-round">20</span>
            </div>
            <div class="media-box-bd">
                <h4 class="media-box-title">
                    <span class="media-box-title-text text-ellipsis">标题一标题</span>
                    <span class="media-box-title-misc">2017-02-17</span>
                </h4>
                <p class="media-box-desc text-ellipsis">由各种物质组成的巨型球状天体</p>
            </div>
    </div>    
   </div>
</div>                                                  
        

list-info+dl(以下三种主要区别在左侧线条)

第一种
两行图文组合

由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状,有自己的运行轨道。

两行图文组合

由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状,有自己的运行轨道。

<div class="list-info list-info-large">
    <dl>
                    
        <dd class="list-item-auto">
         
            <img class="avatar avatar-radius margin-base-left" alt="" src="http://192.168.40.107:10081/BUA/UserAvatar/GetUserAvatar?randomNum=636451433835701388&userUid=fengjiang">
                    
        </dd>
          
        <dd class="text-ellipsis">
             两行图文组合
            <p class="list-item-subtitle text-ellipsis">
                星球有一定的形状,有自己的运行轨道。
            </p>
        </dd>
    </dl>
    ......
</div>                                                  
        
第二种
两行图文组合

由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状,有自己的运行轨道。

两行图文组合

由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状,有自己的运行轨道。

<div class="list-info list-info-large">
    <dl>
                    
        <dt>
         
            <img class="avatar avatar-radius margin-base-left" alt="" src="http://192.168.40.107:10081/BUA/UserAvatar/GetUserAvatar?randomNum=636451433835701388&userUid=fengjiang">
                    
        </dt>
          
        <dd class="text-ellipsis">
             两行图文组合
            <p class="list-item-subtitle text-ellipsis">
                星球有一定的形状,有自己的运行轨道。
            </p>
        </dd>
    </dl>
    ......
</div>                                                  
        
第三种 ( 可取代panel + media-box )
list-info + dl(推荐使用这个,结构简单,可扩展性强)
20
两行图文组合

由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状,有自己的运行轨道。

2017-11-01
两行图文组合

由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状,有自己的运行轨道。

<div class="list-info list-info-large list-info-offset">
    <dl>
                    
        <dt>
         
            <img class="avatar avatar-radius margin-base-left" alt="" src="http://192.168.40.107:10081/BUA/UserAvatar/GetUserAvatar?randomNum=636451433835701388&userUid=fengjiang">
            <span class="tip-news tip-news-round">20</span>
                    
        </dt>
          
        <dd class="text-ellipsis">
             两行图文组合
            <p class="list-item-subtitle text-ellipsis">
                星球有一定的形状,有自己的运行轨道。
            </p>
        </dd>
                    
        <dd class="list-item-auto text-assistant font-size-12 flex-vertical-top">
              2017-11-01
        </dd>
        
    </dl>
    ......
</div>                                                  
        

列表分类样式

A

列表列表
列表列表

B

两行图文组合

由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状,有自己的运行轨道。

两行图文组合

由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状,有自己的运行轨道。

<div class="list-category">
                    <h4>A</h4>
    <div class="list-info margin-none-bottom">
        <dl>
            <dd class="list-item-indent text-ellipsis">
                列表列表
            </dd>
        </dl>
......
    </div>
                    <h4>B</h4>
    <div class="list-info list-info-large">
        <dl>
            <dt>
                <img class="avatar avatar-radius" alt="" src="http://192.168.40.107:10081/BUA/UserAvatar/GetUserAvatar?randomNum=636451433835701388&userUid=fengjiang">
            </dt>
            <dd class="text-ellipsis">
                 两行图文组合
                <p class="list-item-subtitle text-ellipsis">由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状,有自己的运行轨道。</p>
            </dd>
       </dl>
......
    </div>
</div>                                                  
        

列表分级

列表分级样式一般用于上下级展示,在.list-info样式基础上加.list-info-level样式

列表分级最多支持9级,所有的下级标签嵌套在.sub-list-items样式里,然后在dl中加入level

  • .level1
  • .level2
  • ......
  • .level8
  • .level9

收件箱
20
收件箱
20
收件箱
20
收件箱
20
收件箱
20
收件箱
20
已删除的邮件
20
个性签名
20
<div class="list-info list-info-level">
    <dl>
        <dd>                               
            <span class="item-icon item-icon-small item-icon-bg-blue">
                 <i class="fc fc-receive-box"></i>
            </span>
            收件箱
       </dd>
       <dd class="list-item-auto text-assistant">
           20
           <i class="fc fc-direction-right"></i>
       </dd>
   </dl>
   <div class="sub-list-items">
       <dl class="level-1">
           ......
      </dl>
      <dl class="level-2">
          ......
      </dl>
      <dl class="level-1">
          ......
      </dl>
      <dl class="level-2">
          ......
      </dl>
      <dl class="level-3">
          ......
      </dl>
  </div>
      <dl>
          ......
      </dl>
      <dl>
          ......
      </dl>
   </div>
</div>
                

列表与表单组合

cell-bd + list-box + form(单行文本,多行文本,下拉框)

列表与单行文本框

form

标题
文本居右
是否开启
主题
<div class="cell">
    <h3 class="cell-hd">form</h3>
    <div class="cell-bd">
        <div class="list-box">
            <div class="list-item">
                <dl>
                    <dt>
                       标题
                    </dt>
                    <dd>
                        <input type="text" placeholder="请输入标题" class="cell-input" />
                    </dd>
                </dl>
           </div>
           <div class="list-item">
                <dl>
                    <dt>
                       文本居右
                     </dt>
                     <dd>
                        <input type="text" placeholder="请输入主题" class="cell-input text-right" />
                         <span class="cell-label">
                         <i class="fc fc-direction-right"></i>
                         </span>
                     </dd>
               </dl>
          </div>
          <div class="list-item">
               <dl>
                    <dt>
                       是否开启
                    </dt>
                    <dd class="flex-text-right">
                        <label class="control-checkbox control-checkbox-switch">
                            <input type="checkbox" value="" />
                            <i class="control-placeholder"></i>
                         </label>
                     </dd>
              </dl>
           </div>
       </div>
       <div class="list-box">
            <div class="list-item">
                <dl>
                    <dt>
                        主题
                    </dt>
                    <dd>
                        <input type="text" placeholder="请输入主题" class="cell-input" />
                    </dd>
                </dl>
            </div>
        </div>
     </div>
</div>
                
列表与多行文本框

多行文本框

0/50
<div class="cell">
    <h3 class="cell-hd">
        多行文本框
    </h3>
    <div class="cell-bd">
        <div class="list-box">
            <div class="list-item">
                    <div class="textarea-box">
                    <textarea placeholder="请输入评论" rows="3"></textarea>
                    <div class="text-assistant text-right">0/<span class="text-danger">50</span></div>
                 </div>
            </div>
       </div>
    </div>
</div>
                
列表与下拉框

选择

<div class="cell">
    <h3 class="cell-hd">选择</h3>
        <div class="cell-bd">
            <div class="list-box">
                <div class="list-item cell-select">
                    <div class="cell-select-bd">
                        <select>
                            <option value="1">微信号</option>
                            <option value="2">qq号</option>
                            <option value="3">Email</option>
                         </select>
                            <i class="fc fc-direction-right"></i>
                    </div>
                </div>
                <div class="list-item cell-select">
                    <dl>
                        <dt class="cell-select-hd">
                            <label>国家/地区</label>
                        </dt>
                        <dd class="cell-select-bd">
                            <select>
                                <option value="1">中国</option>
                                <option value="2">美国</option>
                                <option value="3">英国</option>
                            </select>
                            <i class="fc fc-direction-right"></i>
                        </dd>
                   </dl>
              </div>
             <div class="list-item cell-select">
                  <dl>
                      <dt class="cell-select-hd">
                          <label>国家/地区</label>
                      </dt>
                      <dd class="cell-select-bd cell-select-text-right">
                            <select>
                                <option value="1">中国</option>
                                <option value="2">美国</option>
                                <option value="3">英国</option>
                            </select>
                            <i class="fc fc-direction-right"></i>
                       </dd>
                  </dl>
            </div>
            <div class="list-item cell-select">
                <dl>
                    <dt class="cell-select-hd border-right border-default">
                        <select>
                            <option value="1">+86</option>
                            <option value="2">+80</option>
                            <option value="3">+84</option>
                            <option value="4">+87</option>
                         </select>
                        <i class="fc fc-direction-right"></i>
                   </dt>
                   <dd class="cell-select-bd">
                        <input type="number" pattern="[0-9]*" placeholder="请输入号码" />
                   </dd>
               </dl>
           </div>
        </div>
    </div>
</div>
                
侧栏导航