代码拉取完成，页面将自动刷新
同步操作将从 easysoft/zui 强制同步，此操作会覆盖自 Fork 仓库以来所做的任何修改，且无法恢复！！！
确定后同步将在后台操作，完成时将刷新页面，请耐心等待。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="ZUI，一个简单吸引人的前端框架。">
<meta name="author" content="Zentao">
<title>ZUI - 开源HTML5跨屏框架</title>
<link href="../css/zui.min.css" rel="stylesheet">
<link href="../css/example.css" rel="stylesheet">
<script src="../../assets/jquery.js"></script>
<script src="../../dist/js/zui.min.js"></script>
<script src="../assets/js/example.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">ZUI</a>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span id="navbarCurrent">examples</span> <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu">
<li><a href="alerts.html">alerts</a></li>
<li><a href="article.html">article</a></li>
<li><a href="breadcrumb.html">breadcrumb</a></li>
<li><a href="button-groups.html">button-groups</a></li>
<li><a href="buttons.html">buttons</a></li>
<li><a href="cards.html">cards</a></li>
<li><a href="carousel.html">carousel</a></li>
<li><a href="chosen.html">chosen</a></li>
<li><a href="collapse.html">collapse</a></li>
<li><a href="colorset.html">colorset</a></li>
<li><a href="comment.html">comment</a></li>
<li><a href="dropdowns.html">dropdowns</a></li>
<li><a href="forms.html">forms</a></li>
<li><a href="grid.html">grid</a></li>
<li><a href="icons.html">icons</a></li>
<li><a href="input-groups.html">input-groups</a></li>
<li><a href="kindeditor.html">kindeditor</a></li>
<li><a href="labels.html">labels</a></li>
<li><a href="lightbox.html">Lightbox</a></li>
<li><a href="list-group.html">list-group</a></li>
<li><a href="list.html">list</a></li>
<li><a href="modals.html">modals</a></li>
<li><a href="navbars.html">navbars</a></li>
<li><a href="navs.html">navs</a></li>
<li><a href="pager.html">pager</a></li>
<li><a href="panels.html">panels</a></li>
<li><a href="popovers.html">popovers</a></li>
<li><a href="progress.html">progress</a></li>
<li><a href="tables.html">tables</a></li>
<li><a href="tabs.html">tabs</a></li>
<li><a href="textbox.html">textbox</a></li>
<li><a href="tooltip.html">tooltip</a></li>
<li><a href="type.html">type</a></li>
</ul>
</li>
<li id="navbarNext"><a href="###">NEXT <i class="icon-angle-right icon-large"></i></a></li>
</ul>
</div>
</nav>
<article class="article-small">
<section class="page-section">
<h1 class="header-dividing">内容列表视图</h1>
<table class="table">
<tr>
<td>头部</td>
<td>包含当前列表标题</td>
</tr>
<tr>
<td>列表</td>
<td>多个列表部分请使用<code>section</code></td>
</tr>
<tr>
<td>底部</td>
<td>底部显示页码及其他提示信息</td>
</tr>
</table>
<p>一般内容列表视图</p>
<div contenteditable="false" spellcheck="false" class="segment no-padding">
<br>
<ul class="breadcrumb breadcrumb-block">
<li><i class="icon-location-arrow icon-muted"></i></li>
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ul>
<div class="list">
<header>
<div class="pull-right">
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" class="btn btn-default active"><i class="icon-th-list"></i></button>
<button type="button" class="btn btn-default"><i class="icon-th"></i></button>
<button type="button" class="btn btn-default"><i class="icon-th-large"></i></button>
</div>
</div>
<h3><i class="icon-list-ul icon-border-circle"></i> Contents List <small>26 articles</small></h3>
</header>
<section class="items items-hover">
<div class="item">
<div class="item-heading">
<div class="pull-right"><a href="###"><i class="icon-pencil"></i> edit</a> <a href="#"><i class="icon-remove"></i> delete</a></div>
<h4><span class="label label-success">NEW</span> <a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
</div>
<div class="item-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, necessitatibus, animi magni illo vel ducimus quia dolorum modi temporibus iste fugit laudantium minima minus sit debitis. Autem voluptate dolorum saepe!
</div>
<div class="item-footer">
<a href="#" class="text-muted"><i class="icon-comments"></i> 243</a>
<span class="text-muted">2013-11-11 16:14:37</span>
</div>
</div>
<div class="item">
<div class="item-heading">
<div class="pull-right"><a href="###"><i class="icon-pencil"></i> edit</a> <a href="#"><i class="icon-remove"></i> delete</a></div>
<h4><a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
</div>
<div class="item-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, necessitatibus, animi magni illo vel ducimus quia dolorum modi temporibus iste fugit laudantium minima minus sit debitis. Autem voluptate dolorum saepe!
</div>
<div class="item-footer">
<a href="#"><i class="icon-comments"></i> 243</a>
<span class="text-muted">2013-11-11 16:14:37</span>
</div>
</div>
<div class="item">
<div class="item-heading">
<div class="pull-right"><a href="###"><i class="icon-pencil"></i> edit</a> <a href="#"><i class="icon-remove"></i> delete</a></div>
<h4><a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
</div>
<div class="item-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, necessitatibus, animi magni illo vel ducimus quia dolorum modi temporibus iste fugit laudantium minima minus sit debitis. Autem voluptate dolorum saepe!
</div>
<div class="item-footer">
<a href="#"><i class="icon-comments"></i> 243</a>
<span class="text-muted">2013-11-11 16:14:37</span>
</div>
</div>
<div class="item">
<div class="item-heading">
<div class="pull-right"><a href="###"><i class="icon-pencil"></i> edit</a> <a href="#"><i class="icon-remove"></i> delete</a></div>
<h4><a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
</div>
<div class="item-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, necessitatibus, animi magni illo vel ducimus quia dolorum modi temporibus iste fugit laudantium minima minus sit debitis. Autem voluptate dolorum saepe!
</div>
<div class="item-footer">
<a href="#"><i class="icon-comments"></i> 243</a>
<span class="text-muted">2013-11-11 16:14:37</span>
</div>
</div>
<div class="item">
<div class="item-heading">
<div class="pull-right"><a href="###"><i class="icon-pencil"></i> edit</a> <a href="#"><i class="icon-remove"></i> delete</a></div>
<h4><a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
</div>
<div class="item-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, necessitatibus, animi magni illo vel ducimus quia dolorum modi temporibus iste fugit laudantium minima minus sit debitis. Autem voluptate dolorum saepe!
</div>
<div class="item-footer">
<a href="#"><i class="icon-comments"></i> 243</a>
<span class="text-muted">2013-11-11 16:14:37</span>
</div>
</div>
<div class="item">
<div class="item-heading">
<div class="pull-right"><a href="###"><i class="icon-pencil"></i> edit</a> <a href="#"><i class="icon-remove"></i> delete</a></div>
<h4><a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
</div>
<div class="item-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, necessitatibus, animi magni illo vel ducimus quia dolorum modi temporibus iste fugit laudantium minima minus sit debitis. Autem voluptate dolorum saepe!
</div>
<div class="item-footer">
<a href="#"><i class="icon-comments"></i> 243</a>
<span class="text-muted">2013-11-11 16:14:37</span>
</div>
</div>
</section>
<footer>
<ul class="pager">
<li class="previous"><a href="#">« 上一页</a></li>
<li><a href="#">1</a></li>
<li><a href="#">⋯</a></li>
<li><a href="#">6</a></li>
<li class="active"><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">⋯</a></li>
<li><a href="#">12</a></li>
<li class="next"><a href="#">下一页 »</a></li>
</ul>
</footer>
</div>
</div>
<p>一个更紧凑的视图</p>
<div contenteditable="true" spellcheck="false" class="segment no-padding">
<br>
<ul class="breadcrumb breadcrumb-block">
<li><i class="icon-location-arrow icon-muted"></i></li>
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ul>
<div class="list list-condensed">
<header>
<div class="pull-right">
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" class="btn btn-default active"><i class="icon-th-list"></i></button>
<button type="button" class="btn btn-default"><i class="icon-th"></i></button>
<button type="button" class="btn btn-default"><i class="icon-th-large"></i></button>
</div>
</div>
<h3><i class="icon-list-ul icon-border-circle"></i> Contents List <small>26 articles</small></h3>
</header>
<section class="items items-hover">
<div class="item">
<div class="item-heading">
<div class="pull-right"><a href="###"><i class="icon-pencil"></i> edit</a> <a href="#"><i class="icon-remove"></i> delete</a></div>
<h4><span class="label label-success">NEW</span> <a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
</div>
<div class="item-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, necessitatibus, animi magni illo vel ducimus quia dolorum modi temporibus iste fugit laudantium minima minus sit debitis. Autem voluptate dolorum saepe!
</div>
<div class="item-footer">
<a href="#" class="text-muted"><i class="icon-comments"></i> 243</a>
<span class="text-muted">2013-11-11 16:14:37</span>
</div>
</div>
<div class="item">
<div class="item-heading">
<div class="pull-right"><a href="###"><i class="icon-pencil"></i> edit</a> <a href="#"><i class="icon-remove"></i> delete</a></div>
<h4><a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
</div>
<div class="item-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, necessitatibus, animi magni illo vel ducimus quia dolorum modi temporibus iste fugit laudantium minima minus sit debitis. Autem voluptate dolorum saepe!
</div>
<div class="item-footer">
<a href="#"><i class="icon-comments"></i> 243</a>
<span class="text-muted">2013-11-11 16:14:37</span>
</div>
</div>
<div class="item">
<div class="item-heading">
<div class="pull-right"><a href="###"><i class="icon-pencil"></i> edit</a> <a href="#"><i class="icon-remove"></i> delete</a></div>
<h4><a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
</div>
<div class="item-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, necessitatibus, animi magni illo vel ducimus quia dolorum modi temporibus iste fugit laudantium minima minus sit debitis. Autem voluptate dolorum saepe!
</div>
<div class="item-footer">
<a href="#"><i class="icon-comments"></i> 243</a>
<span class="text-muted">2013-11-11 16:14:37</span>
</div>
</div>
<div class="item">
<div class="item-heading">
<div class="pull-right"><a href="###"><i class="icon-pencil"></i> edit</a> <a href="#"><i class="icon-remove"></i> delete</a></div>
<h4><a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
</div>
<div class="item-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, necessitatibus, animi magni illo vel ducimus quia dolorum modi temporibus iste fugit laudantium minima minus sit debitis. Autem voluptate dolorum saepe!
</div>
<div class="item-footer">
<a href="#"><i class="icon-comments"></i> 243</a>
<span class="text-muted">2013-11-11 16:14:37</span>
</div>
</div>
<div class="item">
<div class="item-heading">
<div class="pull-right"><a href="###"><i class="icon-pencil"></i> edit</a> <a href="#"><i class="icon-remove"></i> delete</a></div>
<h4><a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
</div>
<div class="item-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, necessitatibus, animi magni illo vel ducimus quia dolorum modi temporibus iste fugit laudantium minima minus sit debitis. Autem voluptate dolorum saepe!
</div>
<div class="item-footer">
<a href="#"><i class="icon-comments"></i> 243</a>
<span class="text-muted">2013-11-11 16:14:37</span>
</div>
</div>
<div class="item">
<div class="item-heading">
<div class="pull-right"><a href="###"><i class="icon-pencil"></i> edit</a> <a href="#"><i class="icon-remove"></i> delete</a></div>
<h4><a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
</div>
<div class="item-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, necessitatibus, animi magni illo vel ducimus quia dolorum modi temporibus iste fugit laudantium minima minus sit debitis. Autem voluptate dolorum saepe!
</div>
<div class="item-footer">
<a href="#"><i class="icon-comments"></i> 243</a>
<span class="text-muted">2013-11-11 16:14:37</span>
</div>
</div>
</section>
<footer>
<ul class="pager">
<li class="previous"><a href="#">« 上一页</a></li>
<li><a href="#">1</a></li>
<li><a href="#">⋯</a></li>
<li><a href="#">6</a></li>
<li class="active"><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">⋯</a></li>
<li><a href="#">12</a></li>
<li class="next"><a href="#">下一页 »</a></li>
</ul>
</footer>
</div>
</div>
<p>带项目缩略图</p>
<div contenteditable="false" spellcheck="false" class="segment no-padding">
<br>
<ul class="breadcrumb breadcrumb-block">
<li><i class="icon-location-arrow icon-muted"></i></li>
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ul>
<div class="list">
<header>
<div class="pull-right">
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" class="btn btn-default active"><i class="icon-th-list"></i></button>
<button type="button" class="btn btn-default"><i class="icon-th"></i></button>
<button type="button" class="btn btn-default"><i class="icon-th-large"></i></button>
</div>
</div>
<h3><i class="icon-list-ul icon-border-circle"></i> Contents List <small>26 articles</small></h3>
</header>
<section class="items items-hover">
<div class="item">
<div class="item-heading">
<div class="pull-right"><a href="###"><i class="icon-pencil"></i> edit</a> <a href="#"><i class="icon-remove"></i> delete</a></div>
<h4><span class="label label-success">NEW</span> <a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
</div>
<div class="item-content">
<div class="media pull-left">
<div class="media-place-holder" style="width:200px;height:100px;line-height:100px">200x100</div>
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, necessitatibus, animi magni illo vel ducimus quia dolorum modi temporibus iste fugit laudantium minima minus sit debitis. Autem voluptate dolorum saepe!
</div>
</div>
<div class="item-footer">
<span class="label">tag1</span>
<a href="#" class="text-muted"><i class="icon-comments"></i> 243</a>
<span class="text-muted">2013-11-11 16:14:37</span>
</div>
</div>
<div class="item">
<div class="item-heading">
<div class="pull-right"><a href="###"><i class="icon-pencil"></i> edit</a> <a href="#"><i class="icon-remove"></i> delete</a></div>
<h4><span class="label label-success">NEW</span> <a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
</div>
<div class="item-content">
<div class="media pull-left">
<div class="media-place-holder" style="width:200px;height:100px;line-height:100px">200x100</div>
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, necessitatibus, animi magni illo vel ducimus quia dolorum modi temporibus iste fugit laudantium minima minus sit debitis. Autem voluptate dolorum saepe!
</div>
</div>
<div class="item-footer">
<span class="label">tag1</span>
<a href="#" class="text-muted"><i class="icon-comments"></i> 243</a>
<span class="text-muted">2013-11-11 16:14:37</span>
</div>
</div>
<div class="item">
<div class="item-heading">
<div class="pull-right"><a href="###"><i class="icon-pencil"></i> edit</a> <a href="#"><i class="icon-remove"></i> delete</a></div>
<h4><span class="label label-success">NEW</span> <a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
</div>
<div class="item-content">
<div class="media pull-right">
<div class="media-place-holder" style="width:200px;height:100px;line-height:100px">200x100</div>
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, necessitatibus, animi magni illo vel ducimus quia dolorum modi temporibus iste fugit laudantium minima minus sit debitis. Autem voluptate dolorum saepe!
</div>
</div>
<div class="item-footer">
<span class="label">tag1</span>
<a href="#" class="text-muted"><i class="icon-comments"></i> 243</a>
<span class="text-muted">2013-11-11 16:14:37</span>
</div>
</div>
<div class="item">
<div class="item-heading">
<div class="pull-right"><a href="###"><i class="icon-pencil"></i> edit</a> <a href="#"><i class="icon-remove"></i> delete</a></div>
<h4><span class="label label-success">NEW</span> <a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
</div>
<div class="item-content">
<div class="media pull-right">
<div class="media-place-holder" style="width:200px;height:100px;line-height:100px">200x100</div>
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, necessitatibus, animi magni illo vel ducimus quia dolorum modi temporibus iste fugit laudantium minima minus sit debitis. Autem voluptate dolorum saepe!
</div>
</div>
<div class="item-footer">
<span class="label">tag1</span>
<a href="#" class="text-muted"><i class="icon-comments"></i> 243</a>
<span class="text-muted">2013-11-11 16:14:37</span>
</div>
</div>
<div class="item">
<div class="item-heading">
<div class="pull-right"><a href="###"><i class="icon-pencil"></i> edit</a> <a href="#"><i class="icon-remove"></i> delete</a></div>
<h4><span class="label label-success">NEW</span> <a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
</div>
<div class="item-content">
<div class="media">
<div class="media-place-holder" style="height:100px;line-height:100px">200x100</div>
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, necessitatibus, animi magni illo vel ducimus quia dolorum modi temporibus iste fugit laudantium minima minus sit debitis. Autem voluptate dolorum saepe!
</div>
</div>
<div class="item-footer">
<span class="label">tag1</span>
<a href="#" class="text-muted"><i class="icon-comments"></i> 243</a>
<span class="text-muted">2013-11-11 16:14:37</span>
</div>
</div>
<div class="item">
<div class="item-heading">
<div class="pull-right"><a href="###"><i class="icon-pencil"></i> edit</a> <a href="#"><i class="icon-remove"></i> delete</a></div>
<h4><span class="label label-success">NEW</span> <a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
</div>
<div class="item-content">
<div class="media">
<div class="media-place-holder" style="height:100px;line-height:100px">200x100</div>
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, necessitatibus, animi magni illo vel ducimus quia dolorum modi temporibus iste fugit laudantium minima minus sit debitis. Autem voluptate dolorum saepe!
</div>
</div>
<div class="item-footer">
<span class="label">tag1</span>
<a href="#" class="text-muted"><i class="icon-comments"></i> 243</a>
<span class="text-muted">2013-11-11 16:14:37</span>
</div>
</div>
</section>
<footer>
<ul class="pager">
<li class="previous"><a href="#">« 上一页</a></li>
<li><a href="#">1</a></li>
<li><a href="#">⋯</a></li>
<li><a href="#">6</a></li>
<li class="active"><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">⋯</a></li>
<li><a href="#">12</a></li>
<li class="next"><a href="#">下一页 »</a></li>
</ul>
</footer>
</div>
</div>
</section>
</article>
</body>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手