html5 可折叠表格,AmazeUI折叠式卡片布局，整合内容列表、表格组件实现

折叠式卡片布局在PC版网站中可能不常见，但是在手机版，小屏幕的网页浏览会大发异彩。

AmazeUI也提供了折叠式卡片布局，虽然官网上有例子，但是这种折叠式卡片布局，整合内容列表、表格组件还是需要一番功夫。

比如如下图，利用AmazeUI的折叠式卡片布局，整合其提供的内容列表与表格组件。

整个页面的代码如下：

折叠式布局下的内容列表、表格

折叠式卡片布局

卡片1-文字

纯属文字

卡片2-内容列表

• 标题1

  2015-05-12

• 超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长标题2

  2015-05-12

• 标题3

  2015-05-12

卡片3-表格

表头1表头2表头3

内容1超长超长超长内容2内容3内容1超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长内容2内容3内容1超长超长超长内容2内容3

关键的地方，注释都有注释了。也提供了超长内容的处理方式。

dl-dt-dd是HTML中原生态的列表布局，与ul-li这一组是一样地位，但是用得少，可能给人淡忘了。

如果AmazeUI的折叠式卡片布局里面要整合组件，必须移除底部那20px的留白，否则很难看的。感觉这个组件专门为文字设置的，框架的原义不希望你整合东西。

同时表格注意设置好第一行的各个宽度，以规定好各行。

到此这篇关于AmazeUI折叠式卡片布局，整合内容列表、表格组件实现的文章就介绍到这了,更多相关AmazeUI折叠式卡片布局内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！