isomorphic-table-cards实现卡片与表格视图模式切换排序效果代码-html代码-BFW代码库

isomorphic-table-cards实现卡片与表格视图模式切换排序效果代码

代码语言：html

所属分类：表格

代码描述：isomorphic-table-cards实现卡片与表格视图模式切换排序效果代码，可根据json数据自动生成表格或卡片并支持数据动态排序。

代码标签： isomorphic-table-cards 卡片表格视图模式切换排序

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/isomorphic-table-cards.css">
<style>
    html{
	color: #0f0f0f;
    background-color: #fafafa;
}
body{
	font-family: 'Roboto',arial;
	margin: 0;
	padding: 20px 20px 20px 50px;
    background-image: url(bg0.png);
    background-repeat: repeat-y;
}

a {
    text-decoration: none;
    font-weight: 600;
    color: #259DCB;
}
a:hover {
	color: navy;
}
h1{
	margin: 0 0 30px 0;
}
.github{
	display: inline-block;
	position: relative;
	top: 10px;
	left: 10px;
}
#opts{
	position: absolute;
	top: 10px;
	right: 20px;
	color: grey;
}
#opts > div{
	padding:5px;
}

.chakra1{
	background-color: #ffebee;
	border: solid 2px #f44336;
}
.chakra2{
	background-color: #fff3e0;
	border: solid 2px #ff9800;
}
.chakra3{
	background-color: #fff8e1;
	border: solid 2px #ffc107;
}
.chakra4{
	background-color: #e8f5e9;
	border: solid 2px #4caf50;
}
.chakra5{
	background-color: #e0f7fa;
	border: solid 2px #00bcd4;
}
.chakra6{
	background-color: #e8eaf6;
	border: solid 2px #3f51b5;
}
.chakra7{
	background-color: #f3e5f5;
	border: solid 2px #9c27b0;
}
</style>
    <script>
        var data = [
          {
            "name": "Amazonite",
            "chakra": 4,
            "spirit": "Self-determination"
          },
          {
            "name": "Amber",
            "chakra.........完整代码请登录后点击上方下载按钮下载查看