数据表格插件是一个展示大量数据的强力工具。

实例

在下面的例子中,表格左侧5列和右侧两列分别固定在两侧,其宽度不受外部容器宽度影响,中间位置的列则在宽度不够时会隐藏超出的部分,隐藏的列可以通过拖拽表头移动到可视区域,也可以使用下方的滚动条来调整隐藏的列显示区域。当向下滚动页面时,如果表头一旦处于不可见的位置时,则表头会调整样式而固定在页面顶端保持一直可见。

<!-- HTML 代码 -->
<table class="table datatable">
  <thead>
    <tr>
      <th>#</th>
      <th>时间</th>
      ...
    </tr>
  </thead>
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
    ...
  </tbody>
</table>


/* JS 代码 */
$('table.datatable').datatable();

启用排序

只需要更改一个参数即可启用数据排序功能。DataTable支持对数字、日期或字符串进行升序和降序排序。

/* JS 代码 */
$('table.datatable').datatable({sortable: true});

选中行

启用该选项后,单击行会更改选中与非选中状态。

/* JS 代码 */
$('table.datatable').datatable({checkable: true});

综合示例

你可以启用所有增强选项。

/* JS 代码 */
$('table.datatable').datatable({checkable: true, sortable: true});

用法

启动参数

参数 可选值 说明
checkable
  • false (默认)
  • true
是否启用行选中状态维护,启用后将在列首显示多选按钮
checkByClickRow
  • false
  • true (默认)

是否点击行的任意位置来切换选中状态

仅在checkable选项为true时生效

checkedClass 字符串,默认为"active"

行选中时,为表格中的<tr>标签增加的类名由该参数指定

仅在checkable选项为true时生效

storage
  • false
  • true (默认)
是否启用本地存储来增强用户体验。启用该选项之后,表格排序状态及选中的行在用户刷新页面之后仍然会还原为之前的扎状态。
sortable
  • false (默认)
  • true
是否启用表格排序,点击表头能够以该列来为数据排序
fixedHeader
  • false
  • true (默认)
是否固定表格头部,如果启用当页面滚动到下方导致表头不可见时重新定位表头到页面顶部保持可见
fixedHeaderOffset 数字,默认值为0

当标题固定时距离顶部的高度,当页面顶部包含其他固定的内容时需要调整该值

仅在fixedHeaderOffset选项为true时生效

fixedLeftWidth 数字或者表示百分比的字符串,默认值为"30%" 左侧固定的所有列的宽度,可以指定为百分比
fixedRightWidth 数字或者表示百分比的字符串,默认值为"30%" 右侧固定的所有列的宽度,可以指定为百分比
flexHeadDrag
  • false
  • true (默认)
是否能够通告拖拽可变区域的头部来调整可见区域
scrollPos
  • 'in' (默认)
  • 'out'
滚动条位置
rowHover
  • false
  • true (默认)
是否在行上启用鼠标悬停样式
colHover
  • false
  • true (默认)
是否在列上启用鼠标悬停样式,仅当鼠标悬停表头时生效
minColWidth 数字,默认为20 列的最小宽度
minFixedLeftWidth 数字,默认为200 左侧所有固定列的最小宽度
minFixedRightWidth 数字,默认为200 右侧所有固定列的最小宽度
minFlexAreaWidth 数字,默认为200 中间可变区域最小宽度
/* JS 代码 */
$('table.datatable').datatable(
{
    checkable: true,
    sortable: true,
    checkedClass: "checked",
    minFixedLeftWidth: 300
    // 更多参数...
});

启动参数也可以直接使用data-*属性写在要增强的HTML标签上。

事件

Datatable中的事件既可以使用jQuery原生方法来绑定,也可以写在启动参数中。

事件名称 jQuery事件名称 说明 事件参数
afterLoad "afterLoad.zui.datatable" 数据加载完毕后调用
  • event.data 表格数据
ready "ready.zui.datatable" 渲染完毕后调用,可以在此事件中为DOM绑定其他事件
sort "sort.zui.datatable" 表格重新排序之后
  • event.sorter.index 数字,排序所依据的列序号
  • event.sorter.sortUp 排序方向,true为升序,false 为降序
sizeChanged "sizeChanged.zui.datatable" 列宽发生更改时发生
  • event.changes.change 字符串,变化的类型,"fixedLeftWidth" 为左侧所有固定列总宽度发生变化,"fixedRightWidth" 为右侧所有固定列总宽度发生变化,"colWidth" 为单个列宽度发生变化
  • event.changes.oldWidth 数字,发生变化之前的宽度值
  • event.changes.newWidth 数字,新的宽度值
  • event.changes.colIndex 数字,如果是单个列宽发生变化,则该值指示发生变化列的序号
checksChanged "checksChanged.zui.datatable" 当行的选中状态发生变化时发生
  • event.checks.checkedAll 如果为true 标识当前所有行都被选中,反之则表示至少有一行为被选中
  • event.checks.checks 数字数组,包含所有已选中的行的ID
使用启动参数处理事件
$('table.datatable').datatable(
{
    sort: function(event)
    {
        console.log(event);
        // console.log("表格已重新排序!");
        // 处理 sort 事件
        // ...
    }
});
使用jQuery方法绑定事件处理函数
$('table.datatable').datatable().on("sort.zui.datatable", function(event)
{
    console.log(event);
    // console.log("表格已重新排序!");
    // 处理 sort 事件
    // ...
});

数据

增强现有表格

直接对一个包含完整头部和数据的普通表格进行增强。DataTable或自动获取所有表头和行上的数据,并配置相关选项。

增强现有的表格能够在DataTable组件不可用时也能够正常显示原表格数据。

在启动选项中初始化数据

通过设置启动选项的data属性来初始化数据。

更新数据

当数据表格所依据的原始数据发生变更时,需要手动调用load方法来更新数据表格。

// 当原始数据发生变更时:
$('table.datatable').datatable('load');

在日历上能够让用户直观了解日常安排并进行规划。ZUI提供了实用简单的日历插件。

实例

在下面的示例中展示了按月展示的日程安排。点击日历上方的操作按钮切换月份,拖动日历中的事件到其他位置来重新安排时间。

按周或查看某一天的日程视图将在后续版本中到来。

<!-- HTML 代码 -->
<div id="calendar" class="calendar"></div>

/* JS 代码 */
$('#calendar').calendar();

使用方法

启动参数

参数 说明
startView
  • "month" (默认),月份视图
起始视图,默认为月份视图
startDate
  • "today" (默认),其实日期为当天
  • "2014-8-14",表示日期的字符串
  • 一个Date实例
起始视图所在的日期
limitEventTitle
  • true (默认)
  • false
是否限制事件标题长度,如果为true则会限制事件标题在一行显示,超出部分将隐藏
storage
  • true (默认)
  • false
是否启用本地存储来增强体验,如果为ture则会记录用户所在的视图和日期,刷新或关闭浏览器再次访问会重现最后的视图
withHeader
  • true (默认)
  • false
是否显示带操作栏的头部,如果为true则会显示头部,包含切换视图或日期的按钮
dragThenDrop
  • true (默认)
  • false
是否启用事件拖放功能,如果为true则能够拖拽一个事件到另一个日期方框内来更改事件日程
lang
  • null (默认)
  • "zh-cn"
当前界面所使用的语言,如果留空则会从html标签上读取lang属性
data {calendars: {}, events: []} 初始加载的日历数据

方法

日历插件提供一组方法来向日历添加新的时间、更改已有事件或者删除已有事件。

获取日历对象实例

要使用日历对象方法,需要首先获取日历对象实例。每一个日历对象示例的引用都存储在对应的jQuery对象的data中,名称为zui.calendar

/* 获取日历对象实例 */
var calendar = $('#calendar').data('zui.calendar');
切换或刷新视图

要切换不同的视图或所显示的日期范围,请使用日历对象的display(view, date)方法。

/* 切换视图或刷新视图 */
var calendar = $('#calendar').data('zui.calendar');
calendar.display('month', '2014-8-14');   // 切换视图为月份视图,并将日期范围限定为2014年8月
calendar.display('month');                // 切换视图为月份视图,使用当前日期范围
calendar.display();                       // 重新刷新当前视图
增加事件
增加一个事件

将一个新的事件对象作为参数来调用addEvents方法。

/* 增加一个事件 */
var calendar = $('#calendar').data('zui.calendar');
var newEvent = {title: '吃饭了', desc: '要吃更多', start: '2014-8-14 12:00', end: '2014-8-14 13:00'};
calendar.addEvents(newEvent);
增加多个事件

将包含一组事件的数组作为参数调用addEvents方法则可以一次性添加多个事件。

/* 增加多个事件 */
var calendar = $('#calendar').data('zui.calendar');
var newEvents =
[
  {title: '吃饭了', desc: '要吃更多', start: '2014-8-14 12:00', end: '2014-8-14 13:00'},
  {title: '学习了', desc: '要学更多', start: '2014-8-14 13:00', end: '2014-8-14 17:00'}
];
calendar.addEvents(newEvents);
事件对象
事件对象实例可以指定以下属性:
属性 说明
title 字符串 事件标题
desc 字符串, 可选 事件描述
allDay
  • true
  • false (默认)
是否为全天事件
start
  • "2014-8-14",表示日期的字符串
  • 一个Date实例
事件开始的时间
end
  • "2014-8-14",表示日期的字符串
  • 一个Date实例
事件结束的时间,如果allDay属性为true(即为全天事件)时该属性可选
calendar 字符串,可选 事件所在的日历
data 任何值 一个额外的属性用来存储其他与该事件关联的数据
移除事件

指定需要移除的事件的id属性,或者同时指定多个id并放在一个数组中作为参数来调用removeEvents方法。

/* 移除事件 */
var calendar = $('#calendar').data('zui.calendar');
calendar.removeEvents('4343');                   // 移除id为4343的事件
calendar.removeEvents(['4343', '4344', '4345']); // 一次性移除多个事件
更新事件
更新事件属性

将更新对象或者由包含更新对象的数组作为参数来调用方法updateEvents

/* 移除事件 */
var calendar = $('#calendar').data('zui.calendar');
calendar.updateEvents(    // 更新一个事件
{
    event: '343', // 要更新的事件
    changes:
    [
       {
          change: 'title',          // 要更改的属性名称,
          to:     '一个新的事件标题'  // 更改后的值
       },
       {                            // 同时更改另一个属性
          change: 'start',          // 要更改的属性名称,
          to:     '2014-8-15 9:00'  // 更改后的值
       }
    ]
});
calendar.updateEvents(    // 一次性更新多个事件
[
    {
        event: '343', // 更新第一个事件
        changes:
        [
           {
              change: 'title',          // 要更改的属性名称,
              to:     '一个新的事件标题'  // 更改后的值
           },
           {                            // 同时更改另一个属性
              change: 'start',          // 要更改的属性名称,
              to:     '2014-8-15 9:00'  // 更改后的值
           }
        ]
    },
    {
        event: '344', // 更新另一个事件
        changes:
        [
            // ...
        ]
    },
]);
增加日历
增加一个日历

将一个新的日历对象作为参数来调用addCalendars方法。

/* 增加一个日历 */
var calendar = $('#calendar').data('zui.calendar');
var newCalendar = {name: 'work', title: '工作', desc: '这是一个工作日历', color: '#ff0000'};
calendar.addCalendars(newCalendar);
增加多个日历

将包含一组日历的数组作为参数调用addCalendars方法则可以一次性添加多个日历。

/* 增加多个日历 */
var calendar = $('#calendar').data('zui.calendar');
var newCalendars =
[
  {name: 'work', title: '工作', desc: '这是一个工作日历', color: '#ff0000'},
  {name: 'home', title: '家庭', desc: '这是一个家庭日历', color: '#00ff00'}
];
calendar.addCalendars(newCalendars);
日历对象
日历对象实例可以指定以下属性:
属性 说明
name 字符串,为全英文标识 日历名称
title 字符串,可选 日历标题
desc 字符串, 可选 日历描述
color 表示十六进制颜色值的字符串,可选 日历颜色
获取和同步数据

当进行日历事件的添加、更新或者移除操作时注意同步数据。

你随时可以获取当前所有日历或事件的数据。

/* 获取日历数据 */
var calendar  = $('#calendar').data('zui.calendar');
var calendars = calendar.calendars; // 获取所有日历对象实例
var events    = calendar.events;    // 获取所有事件对象实例

当前获取了日历事件数据后可以手动直接更改所有属性,不过需要调用display()方法才能够将更改应用到界面中。

事件

日历中的事件既可以使用jQuery原生方法来绑定,也可以写在启动参数中。

事件名称 jQuery事件名称 说明 特别的事件参数
clickTodayBtn "clickTodayBtn.zui.calendar" 点击日历头部的当天按钮时发生
clickNextBtn "clickNextBtn.zui.calendar" 点击当前视图下一个日期范围按钮时发生
clickPrevBtn "clickPrevBtn.zui.calendar" 点击当前视图上一个日期范围按钮时发生
clickEvent "clickEvent.zui.calendar" 当点击一个事件时发生
  • event.event 事件对象实例,当前点击的事件对象实例
  • event.events 事件对象实例数组,当前所有事件
beforeAddCalendars "beforeAddCalendars.zui.calendar" 在向日历添加一个新的日历之前发生,如果在该事件处理函数中返回false,则会取消添加
  • event.newCalendar 新的日历对象实例
  • event.data 所有日历事件数据
addCalendars "addCalendars.zui.calendar" 在向日历添加一个新的日历之后发生
  • event.newCalendars 所有新的日历对象实例
  • event.data 所有日历事件数据
beforeAddEvent "beforeAddEvent.zui.calendar" 在向日历添加一个新的事件之前发生,如果在该事件处理函数中返回false,则会取消添加
  • event.newEvent 新的事件对象实例
  • event.data 所有日历事件数据
addEvents "addEvents.zui.calendar" 在向日历添加一个或多个新的事件之后发生
  • event.newEvents 所有新的事件对象实例
  • event.data 所有日历事件数据
beforeRemoveEvent "beforeRemoveEvent.zui.calendar" 在向日历移除一个事件之前发生,如果在该事件处理函数中返回false,则会取消移除
  • event.event 需要移除的事件对象实例
  • event.eventId 需要移除的事件id
  • event.data 所有日历事件数据
removeEvents "removeEvents.zui.calendar" 在向日历移除一个或多个事件之后发生
  • event.removedEvents 所有需要移除的事件对象实例
  • event.data 所有日历事件数据
beforeChange "beforeChange.zui.calendar" 更改一个事件之前发生,如果在该事件处理函数中返回false,则会取消本次更改
  • event.event 要更改的事件对象实例
  • event.change 要更改的属性名称
  • event.from 更改之前该属性的值
  • event.to 更改之后新的值
change "change.zui.calendar" 当一个或多个事件发生更改时发生
  • event.data 所有日历事件数据
  • event.changes 数组,所有更改明细,每一项包含下列属性:
    • event.event 要更改的事件对象实例
    • event.change 要更改的属性名称
    • event.from 更改之前该属性的值
    • event.to 更改之后新的值
beforeDisplay "beforeDisplay.zui.calendar" 在重新显示视图之前发生,如果在该事件处理函数中返回false,则会取消显示
  • event.view 字符串,要显示的视图名称
  • event.date 日期事件对象实例,要显示的日期
display "display.zui.calendar" 在重新显示视图之后发生
  • event.view 字符串,要显示的视图名称
  • event.date 日期事件对象实例,要显示的日期
clickCell "clickCell.zui.calendar" 当点击一个日期单元格时发生
  • event.view 字符串,当前视图名称
  • event.date 日期事件对象实例,当前单元格的日期
使用启动参数处理事件
$('calendar').calendar(
{
    clickEvent: function(event)
    {
        console.log(event);
        // console.log("你点击了一个事件");
        // 处理 clickEvent 事件
        // ...
    }
});
使用jQuery方法绑定事件处理函数
$('calendar').calendar().on("clickEvent.zui.calendar", function(event)
{
    console.log(event);
    // console.log("你点击了一个事件");
    // 处理 clickEvent 事件
    // ...
});

类型

基本类型

创建文章
标题不能为空
http://demo.chanzhi.org/article/id@ .html

更为紧凑的表单

创建文章
标题不能为空
http://demo.chanzhi.org/article/id@ .html
头部 头部包含文章标题、文章信息和摘要
正文 正文的多个部分使用section
底部 底部显示版权及文章的其他信息

普通文章视图


文章标题

发布时间:
2013-11-07 17:14:22
作者:
Catouse
NEW 火爆 原创 235

摘要:Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, necessitatibus provident quasi suscipit laborum nemo tenetur ad accusantium explicabo pariatur?

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur.

Lorem ipsum dolor sit amet, consectetur.

Lorem ipsum dolor sit amet, consectetur.

Lorem ipsum dolor sit amet, consectetur.
Lorem ipsum dolor sit amet, consectetur.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, ad, libero hic voluptatem sapiente possimus recusandae laboriosam adipisci voluptates inventore perferendis nam aliquid odio nostrum voluptate quasi totam itaque. Veritatis, dolore, sint, reiciendis repellat est non enim tenetur unde odio eius recusandae ut quae vero incidunt dolorem excepturi consectetur itaque.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat, officiis!

Lorem ipsum dolor sit amet, consectetur.

Voluptates, repellat, voluptatibus temporibus facere veritatis ab similique quas nobis provident ratione eum sequi officiis sunt atque reprehenderit ut ipsum vel tempora alias consectetur numquam consequatur dignissimos eligendi rerum voluptas cupiditate tempore neque quam itaque illo veniam aspernatur distinctio praesentium labore et quod autem officia est beatae fuga corrupti inventore.

Architecto, officiis, incidunt, excepturi, repudiandae iusto quam tempora blanditiis sed quae aliquam quaerat soluta distinctio nulla vero at. Reprehenderit, aperiam laboriosam dolores eius quam autem magnam est fugiat minima nihil. Aut, minus, nemo iure fuga corporis repellendus perspiciatis iusto veritatis iste similique. Totam ut repudiandae nemo cumque aperiam aut sint.

Lorem ipsum dolor sit amet, consectetur.

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis soluta eveniet aspernatur facere quisquam veniam eos voluptates similique quis voluptas.
  • Quaerat, aut atque praesentium quidem consequatur consequuntur repudiandae error maxime laboriosam nesciunt vitae illo laborum voluptas enim aliquid eius ad!
  • Qui, soluta, ipsum, alias reiciendis iusto natus ullam distinctio nam exercitationem culpa veniam mollitia id sapiente quisquam nihil totam in.

Magnam, modi, repellat beatae perferendis illo dicta illum dolore minus aperiam sit perspiciatis voluptas molestias eaque numquam ipsum deserunt at aut quam quisquam tenetur. Repellat, ratione nihil voluptate sit pariatur quasi ipsum? Sapiente, fugit nesciunt placeat ut expedita id inventore nobis iure adipisci ullam aliquid laboriosam facere officiis molestiae mollitia!

Lorem ipsum. Quis, ut. Officia, odio? Eos, modi! Autem, doloremque!
Lorem ipsum. Dolor, rem. Iure, quaerat. Quibusdam, nam. Blanditiis, quo.
Lorem ipsum. Aliquid, dicta. Architecto, perspiciatis. Eos, corporis. Similique, cum.
Lorem ipsum. Id, minus! Eos, sit. Quae, dolores? Consectetur, deleniti!
Lorem ipsum. Nam, excepturi. Assumenda, cumque! Vero, eligendi. Odit, porro.

Adipisci reprehenderit placeat quos provident alias cupiditate ratione perspiciatis! Fuga, fugit id nisi sapiente voluptatibus quidem. Tempora, optio, animi, iste fugiat quisquam veniam aliquam sed labore at ad numquam eum nobis natus quasi magni. Sequi, dolor, sed, at, debitis accusamus ad qui voluptas est odit ipsa consequatur sint odio porro.

  1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, rerum, molestias possimus minima magnam libero iste amet ad. Ratione, deserunt, adipisci! Ducimus, nihil totam ad beatae corporis. Voluptatem, facere minima!
  2. Cupiditate, omnis, sit, ducimus, natus quo quam quia excepturi numquam deleniti totam odit illum voluptate id! Commodi, itaque magni saepe porro rem ducimus animi error ullam. Animi, consequatur totam natus.
  3. Quae, magni, dolorum odio quia labore asperiores sit dolorem vel hic laboriosam doloribus minima necessitatibus veritatis earum aliquid non rem ad id itaque pariatur repudiandae dolore eligendi illo nobis fuga.
Lorem.
Lorem ipsum dolor sit amet.
Ut.
Necessitatibus, fugit repellat fugiat a.
Aliquam.
Obcaecati cum suscipit consequuntur voluptas?
Minima!
Esse soluta iure corporis porro.
Sunt.
Delectus quos amet quidem eaque!

Nemo, dolorum nisi sequi recusandae deserunt soluta nobis itaque expedita atque excepturi quidem sapiente qui perferendis maiores quas consectetur nulla quae libero impedit ea corporis eos dicta blanditiis ad quis quos quaerat reiciendis aliquam minima rem nesciunt odit est mollitia ipsa vero ratione ipsum. Dolorum, reprehenderit sint vero distinctio aliquam.

一个更紧凑的文章视图


发布时间:
2013-11-07 17:14:22
作者:
Catouse
最新 火爆 原创

文章标题

发布时间:
2013-11-07 17:14:22
作者:
Catouse
原创

摘要:Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, necessitatibus provident quasi suscipit laborum nemo tenetur ad accusantium explicabo pariatur?

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur.

Lorem ipsum dolor sit amet, consectetur.

Lorem ipsum dolor sit amet, consectetur.

Lorem ipsum dolor sit amet, consectetur.
Lorem ipsum dolor sit amet, consectetur.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, ad, libero hic voluptatem sapiente possimus recusandae laboriosam adipisci voluptates inventore perferendis nam aliquid odio nostrum voluptate quasi totam itaque. Veritatis, dolore, sint, reiciendis repellat est non enim tenetur unde odio eius recusandae ut quae vero incidunt dolorem excepturi consectetur itaque.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat, officiis!

Voluptates, repellat, voluptatibus temporibus facere veritatis ab similique quas nobis provident ratione eum sequi officiis sunt atque reprehenderit ut ipsum vel tempora alias consectetur numquam consequatur dignissimos eligendi rerum voluptas cupiditate tempore neque quam itaque illo veniam aspernatur distinctio praesentium labore et quod autem officia est beatae fuga corrupti inventore.

Architecto, officiis, incidunt, excepturi, repudiandae iusto quam tempora blanditiis sed quae aliquam quaerat soluta distinctio nulla vero at. Reprehenderit, aperiam laboriosam dolores eius quam autem magnam est fugiat minima nihil. Aut, minus, nemo iure fuga corporis repellendus perspiciatis iusto veritatis iste similique. Totam ut repudiandae nemo cumque aperiam aut sint.

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis soluta eveniet aspernatur facere quisquam veniam eos voluptates similique quis voluptas.
  • Quaerat, aut atque praesentium quidem consequatur consequuntur repudiandae error maxime laboriosam nesciunt vitae illo laborum voluptas enim aliquid eius ad!
  • Qui, soluta, ipsum, alias reiciendis iusto natus ullam distinctio nam exercitationem culpa veniam mollitia id sapiente quisquam nihil totam in.

Magnam, modi, repellat beatae perferendis illo dicta illum dolore minus aperiam sit perspiciatis voluptas molestias eaque numquam ipsum deserunt at aut quam quisquam tenetur. Repellat, ratione nihil voluptate sit pariatur quasi ipsum? Sapiente, fugit nesciunt placeat ut expedita id inventore nobis iure adipisci ullam aliquid laboriosam facere officiis molestiae mollitia!

Lorem ipsum. Quis, ut. Officia, odio? Eos, modi! Autem, doloremque!
Lorem ipsum. Dolor, rem. Iure, quaerat. Quibusdam, nam. Blanditiis, quo.
Lorem ipsum. Aliquid, dicta. Architecto, perspiciatis. Eos, corporis. Similique, cum.
Lorem ipsum. Id, minus! Eos, sit. Quae, dolores? Consectetur, deleniti!
Lorem ipsum. Nam, excepturi. Assumenda, cumque! Vero, eligendi. Odit, porro.

Adipisci reprehenderit placeat quos provident alias cupiditate ratione perspiciatis! Fuga, fugit id nisi sapiente voluptatibus quidem. Tempora, optio, animi, iste fugiat quisquam veniam aliquam sed labore at ad numquam eum nobis natus quasi magni. Sequi, dolor, sed, at, debitis accusamus ad qui voluptas est odit ipsa consequatur sint odio porro.

  1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, rerum, molestias possimus minima magnam libero iste amet ad. Ratione, deserunt, adipisci! Ducimus, nihil totam ad beatae corporis. Voluptatem, facere minima!
  2. Cupiditate, omnis, sit, ducimus, natus quo quam quia excepturi numquam deleniti totam odit illum voluptate id! Commodi, itaque magni saepe porro rem ducimus animi error ullam. Animi, consequatur totam natus.
  3. Quae, magni, dolorum odio quia labore asperiores sit dolorem vel hic laboriosam doloribus minima necessitatibus veritatis earum aliquid non rem ad id itaque pariatur repudiandae dolore eligendi illo nobis fuga.
Lorem.
Lorem ipsum dolor sit amet.
Ut.
Necessitatibus, fugit repellat fugiat a.
Aliquam.
Obcaecati cum suscipit consequuntur voluptas?
Minima!
Esse soluta iure corporis porro.
Sunt.
Delectus quos amet quidem eaque!

Nemo, dolorum nisi sequi recusandae deserunt soluta nobis itaque expedita atque excepturi quidem sapiente qui perferendis maiores quas consectetur nulla quae libero impedit ea corporis eos dicta blanditiis ad quis quos quaerat reiciendis aliquam minima rem nesciunt odit est mollitia ipsa vero ratione ipsum. Dolorum, reprehenderit sint vero distinctio aliquam.

头部 包含当前列表标题
列表 多个列表部分请使用section
底部 底部显示页码及其他提示信息

图片链接

图片链接+标题


Cards  26 items

图片+标题


Cards  26 items

关于图片的说明 Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.
343   2013-11-12 15:05:56
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
343   2013-11-12 15:05:56
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
tag1 343
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
tag1 343
关于图片的说明
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, autem dolorum accusantium laboriosam architecto veritatis eaque pariatur quisquam ea odit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
343   2013-11-12 15:05:56
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
343   2013-11-12 15:05:56
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
tag1 343
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
tag1 343
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!

包装器内的图片+标题


Cards  26 items

关于图片的说明 Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.
343   2013-11-12 15:05:56
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
343   2013-11-12 15:05:56
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
tag1 343
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
tag1 343

无边框卡片


Cards  26 items

关于图片的说明 Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.
343   2013-11-12 15:05:56
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
343   2013-11-12 15:05:56
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
tag1 343
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
tag1 343
关于图片的说明
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, autem dolorum accusantium laboriosam architecto veritatis eaque pariatur quisquam ea odit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
343   2013-11-12 15:05:56
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
343   2013-11-12 15:05:56
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
tag1 343
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
tag1 343
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!

更为紧凑的模式

.cards-condensed


Cards  26 items

Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, autem dolorum accusantium laboriosam architecto veritatis eaque pariatur quisquam ea odit.
343   2013-11-12 15:05:56
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, autem dolorum accusantium laboriosam architecto veritatis eaque pariatur quisquam ea odit.
343   2013-11-12 15:05:56
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, autem dolorum accusantium laboriosam architecto veritatis eaque pariatur quisquam ea odit.
343   2013-11-12 15:05:56
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, autem dolorum accusantium laboriosam architecto veritatis eaque pariatur quisquam ea odit.
343   2013-11-12 15:05:56
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.
343   2013-11-12 15:05:56
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
343   2013-11-12 15:05:56
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
tag1 343
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
tag1 343
关于图片的说明
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, autem dolorum accusantium laboriosam architecto veritatis eaque pariatur quisquam ea odit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
343   2013-11-12 15:05:56
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
343   2013-11-12 15:05:56
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
tag1 343
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
tag1 343
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
头部 包含当前列表标题
列表 多个列表部分请使用section
底部 底部显示页码及其他提示信息

一般内容列表视图


Contents List  26 articles

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!
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!
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!
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!
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!
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!

一个更紧凑的视图


Contents List  26 articles

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!
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!
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!
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!
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!
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!

带项目缩略图


Contents List  26 articles

200x100
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!
200x100
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!
200x100
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!
200x100
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!
200x100
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!
200x100
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!

一般情况

26 comments

2 hours ago  #5
Catouse replied to Zhang Li
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, illo eaque a iure in quidem officiis numquam ducimus odio non. Architecto, repellendus optio maxime quae sed molestiae ipsa animi tenetur!
2 hours ago  #4
Catouse
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, illo eaque a iure in quidem officiis numquam ducimus odio non. Architecto, repellendus optio maxime quae sed molestiae ipsa animi tenetur!
4 hours ago  #3
Catouse
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, iusto at voluptatem quis aspernatur voluptas harum odit corporis consequatur dicta? Eos, unde, doloremque ab voluptatibus mollitia quam quas itaque quod repellendus sed optio cum blanditiis architecto excepturi quidem sint eaque.
1 days ago  #2
Catouse
Excepturi voluptates ea esse voluptas ad voluptate voluptatibus laboriosam velit. Totam, fuga, laboriosam, optio, qui id voluptates nam fugit quibusdam labore alias atque laudantium repudiandae veniam delectus architecto libero ducimus consequatur hic sunt ipsa. Labore, eligendi sapiente dolores quibusdam ipsum.
2 months ago  #1
Catouse
Assumenda, accusamus, inventore, ut, ea laboriosam quae sunt maxime labore quisquam quod nesciunt saepe quis. Debitis, fuga, ad, aut eaque vero vitae suscipit obcaecati nemo eligendi numquam id labore voluptas veniam sequi perspiciatis facilis voluptates dolorem minus quibusdam unde molestias.

回复缩进

26 comments

4 hours ago  #3
Catouse replied to Zhang Li
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, iusto at voluptatem quis aspernatur voluptas harum odit corporis consequatur dicta? Eos, unde, doloremque ab voluptatibus mollitia quam quas itaque quod repellendus sed optio cum blanditiis architecto excepturi quidem sint eaque.
4 hours ago  #3
Catouse replied to Zhang Li
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, iusto at voluptatem quis aspernatur voluptas harum odit corporis consequatur dicta? Eos, unde, doloremque ab voluptatibus mollitia quam quas itaque quod repellendus sed optio cum blanditiis architecto excepturi quidem sint eaque.
4 hours ago  #3
Catouse replied to Zhang Li
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, iusto at voluptatem quis aspernatur voluptas harum odit corporis consequatur dicta? Eos, unde, doloremque ab voluptatibus mollitia quam quas itaque quod repellendus sed optio cum blanditiis architecto excepturi quidem sint eaque.
4 hours ago  #3
Catouse replied to Zhang Li
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, iusto at voluptatem quis aspernatur voluptas harum odit corporis consequatur dicta? Eos, unde, doloremque ab voluptatibus mollitia quam quas itaque quod repellendus sed optio cum blanditiis architecto excepturi quidem sint eaque.
4 hours ago  #3
Catouse replied to Zhang Li
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, iusto at voluptatem quis aspernatur voluptas harum odit corporis consequatur dicta? Eos, unde, doloremque ab voluptatibus mollitia quam quas itaque quod repellendus sed optio cum blanditiis architecto excepturi quidem sint eaque.
4 hours ago  #3
Catouse replied to Zhang Li
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, iusto at voluptatem quis aspernatur voluptas harum odit corporis consequatur dicta? Eos, unde, doloremque ab voluptatibus mollitia quam quas itaque quod repellendus sed optio cum blanditiis architecto excepturi quidem sint eaque.
1 days ago  #2
Catouse
Excepturi voluptates ea esse voluptas ad voluptate voluptatibus laboriosam velit. Totam, fuga, laboriosam, optio, qui id voluptates nam fugit quibusdam labore alias atque laudantium repudiandae veniam delectus architecto libero ducimus consequatur hic sunt ipsa. Labore, eligendi sapiente dolores quibusdam ipsum.
4 hours ago  #3
Catouse replied to Zhang Li
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, iusto at voluptatem quis aspernatur voluptas harum odit corporis consequatur dicta? Eos, unde, doloremque ab voluptatibus mollitia quam quas itaque quod repellendus sed optio cum blanditiis architecto excepturi quidem sint eaque.
4 hours ago  #3
Catouse replied to Zhang Li
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, iusto at voluptatem quis aspernatur voluptas harum odit corporis consequatur dicta? Eos, unde, doloremque ab voluptatibus mollitia quam quas itaque quod repellendus sed optio cum blanditiis architecto excepturi quidem sint eaque.
2 months ago  #1
Catouse
Assumenda, accusamus, inventore, ut, ea laboriosam quae sunt maxime labore quisquam quod nesciunt saepe quis. Debitis, fuga, ad, aut eaque vero vitae suscipit obcaecati nemo eligendi numquam id labore voluptas veniam sequi perspiciatis facilis voluptates dolorem minus quibusdam unde molestias.

没有用户头像

直接删掉头像部分即可完美适应

26 comments

4 hours ago  #3
Catouse replied to Zhang Li
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, iusto at voluptatem quis aspernatur voluptas harum odit corporis consequatur dicta? Eos, unde, doloremque ab voluptatibus mollitia quam quas itaque quod repellendus sed optio cum blanditiis architecto excepturi quidem sint eaque.
4 hours ago  #3
Catouse replied to Zhang Li
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, iusto at voluptatem quis aspernatur voluptas harum odit corporis consequatur dicta? Eos, unde, doloremque ab voluptatibus mollitia quam quas itaque quod repellendus sed optio cum blanditiis architecto excepturi quidem sint eaque.
4 hours ago  #3
Catouse replied to Zhang Li
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, iusto at voluptatem quis aspernatur voluptas harum odit corporis consequatur dicta? Eos, unde, doloremque ab voluptatibus mollitia quam quas itaque quod repellendus sed optio cum blanditiis architecto excepturi quidem sint eaque.
4 hours ago  #3
Catouse replied to Zhang Li
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, iusto at voluptatem quis aspernatur voluptas harum odit corporis consequatur dicta? Eos, unde, doloremque ab voluptatibus mollitia quam quas itaque quod repellendus sed optio cum blanditiis architecto excepturi quidem sint eaque.
4 hours ago  #3
Catouse replied to Zhang Li
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, iusto at voluptatem quis aspernatur voluptas harum odit corporis consequatur dicta? Eos, unde, doloremque ab voluptatibus mollitia quam quas itaque quod repellendus sed optio cum blanditiis architecto excepturi quidem sint eaque.
4 hours ago  #3
Catouse replied to Zhang Li
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, iusto at voluptatem quis aspernatur voluptas harum odit corporis consequatur dicta? Eos, unde, doloremque ab voluptatibus mollitia quam quas itaque quod repellendus sed optio cum blanditiis architecto excepturi quidem sint eaque.
1 days ago  #2
Catouse
Excepturi voluptates ea esse voluptas ad voluptate voluptatibus laboriosam velit. Totam, fuga, laboriosam, optio, qui id voluptates nam fugit quibusdam labore alias atque laudantium repudiandae veniam delectus architecto libero ducimus consequatur hic sunt ipsa. Labore, eligendi sapiente dolores quibusdam ipsum.
4 hours ago  #3
Catouse replied to Zhang Li
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, iusto at voluptatem quis aspernatur voluptas harum odit corporis consequatur dicta? Eos, unde, doloremque ab voluptatibus mollitia quam quas itaque quod repellendus sed optio cum blanditiis architecto excepturi quidem sint eaque.
4 hours ago  #3
Catouse replied to Zhang Li
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, iusto at voluptatem quis aspernatur voluptas harum odit corporis consequatur dicta? Eos, unde, doloremque ab voluptatibus mollitia quam quas itaque quod repellendus sed optio cum blanditiis architecto excepturi quidem sint eaque.
2 months ago  #1
Catouse
Assumenda, accusamus, inventore, ut, ea laboriosam quae sunt maxime labore quisquam quod nesciunt saepe quis. Debitis, fuga, ad, aut eaque vero vitae suscipit obcaecati nemo eligendi numquam id labore voluptas veniam sequi perspiciatis facilis voluptates dolorem minus quibusdam unde molestias.
进行中
设计界面
撰写文档
紧急的任务
已完成
初步设计
数据库设计
需求整理
未完成
测试
发布
庆祝
不可拖拽
1 Html Panel : dl
Lorem.
Lorem ipsum dolor sit amet.
Ut.
Necessitatibus, fugit repellat fugiat a.
Aliquam.
Obcaecati cum suscipit consequuntur voluptas?
Minima!
Esse soluta iure corporis porro.
Sunt.
Delectus quos amet quidem eaque!
2 Html Panel : ul
  • Lorem ipsum dolor sit amet.
  • Corrupti, hic illo a doloribus!
  • Magnam consequatur veniam ullam temporibus.
  • Dolores, nobis ratione dolorem voluptate.
  • Nulla, ratione dignissimos nesciunt sequi.
  • Praesentium, dicta accusamus laborum laboriosam!
  • Facere commodi dolor quasi. Nihil.
  • Esse, similique nulla doloremque dolorum.
3 Html Panel : ol
  1. Lorem ipsum dolor sit amet.
  2. Corrupti, hic illo a doloribus!
  3. Magnam consequatur veniam ullam temporibus.
  4. Dolores, nobis ratione dolorem voluptate.
  5. Nulla, ratione dignissimos nesciunt sequi.
  6. Praesentium, dicta accusamus laborum laboriosam!
  7. Facere commodi dolor quasi. Nihil.
  8. Esse, similique nulla doloremque dolorum.
4 Panel heading
5 Table
Lorem ipsum. Debitis, consectetur. Ullam, asperiores.
Lorem ipsum. Saepe, mollitia. Placeat, vel!
Lorem ipsum. Amet, architecto! Natus, quis!
Lorem ipsum. Quam, nesciunt. Perspiciatis, vel!
Lorem ipsum. Et, aut! Molestias, necetatibus?
Lorem ipsum. Fugit, fuga? Iure, officiis.
Lorem ipsum. Saepe, neque! Deserunt, voluptates?
Lorem ipsum. Praesentium, eum! Numquam, molestias.
6 Panel heading
7 Panel heading
8 Panel heading
9 Panel heading