列表

普通文本列表

示例:

html:

<ul class="bui-list"> <li class="bui-btn"> 列表2 </li> <li class="bui-btn"> 列表2 </li> </ul>

右边图标

示例:

html:

<ul class="bui-list"> <li class="bui-btn bui-box"> <div class="span1">列表2</div> <i class="icon-listright"></i> </li> <li class="bui-btn bui-box"> <div class="span1">列表2</div> <div class="bui-badges">15</div> <i class="icon-listright"></i> </li> </ul>

分栏标题

示例:

html:

<ul class="bui-list"> <li class="bui-btn bui-btn-title"> A </li> <li class="bui-btn bui-box"> <div class="span1">列表2</div> <i class="icon-listright"></i> </li> <li class="bui-btn bui-btn-title"> B </li> <li class="bui-btn bui-box"> <div class="span1">列表2</div> <i class="icon-listright"></i> </li> </ul>

左右边图标

示例:

html:

<ul class="bui-list"> <li class="bui-btn bui-box"> <div class="icon"><img src="images/applogo.png" alt=""></div> <div class="span1">列表2</div> <i class="icon-listright"></i> </li> <li class="bui-btn bui-box"> <div class="icon"><img src="images/applogo.png" alt=""><span class="bui- badges"></span></div> <div class="span1">列表3</div> <i class="icon-listright"></i> </li> </ul>

图文列表

示例:

html:

<ul class="bui-list"> <li class="bui-btn bui-box"> <div class="thumbnail"><img src="images/applogo.png" alt=""></div> <div class="span1"> <h3 class="item-title">群助手</h3> <p class="item-text">8个群有新消息</p> </div> <i class="icon-listright"></i> </li> <li class="bui-btn bui-box"> <div class="thumbnail"><img src="images/applogo.png" alt=""><span class="bui-badges">10</span></div> <div class="span1"> <h3 class="item-title">我的电脑</h3> <p class="item-text">你已在电脑登录,可传文件到电脑</p> </div> <i class="icon-listright"></i> </li> </ul>

复杂图文列表

示例:

html:

<ul class="bui-list"> <li class="bui-btn bui-box"> <div class="thumbnail"><img src="images/applogo.png" alt=""></div> <div class="span1"> <h3 class="item-title">群助手<span class="time bui-right">10:05</span> </h3> <p class="item-text">8个群有新消息</p> </div> <i class="icon-listright"></i> </li> <li class="bui-btn bui-box"> <div class="thumbnail"><img src="images/applogo.png" alt=""></div> <div class="span1"> <h3 class="item-title">我的电脑<span class="time bui-right">10:05</span></h3> <p class="item-text">你已在电脑登录,可传文件到电脑</p> </div> <i class="icon-listright"></i> </li> </ul>