knockout+d3+bootstrap实现可编辑颜色文字的仪表盘卡片效果代码
代码语言:html
所属分类:布局界面
代码描述:knockout+d3+bootstrap实现可编辑颜色文字的仪表盘卡片效果代码
代码标签: knockout d3 bootstrap 可编辑 颜色 文字 仪表盘 卡片
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
<style>
body {
background: #e7edf2;
margin: 3em;
}
.green-bg {
background-color: #0da58e;
}
.lightgreen-bg {
background-color: #8cc152;
}
.lime-bg {
background-color: #cdda49;
}
.yellow-bg {
background-color: #fdc02f;
}
.orange-bg {
background-color: #fd9727;
}
.deeporange-bg {
background-color: #fc5830;
}
.red-bg {
background-color: #e2202c;
}
.pink-bg {
background-color: #e62565;
}
.purple-bg {
background-color: #9b2fae;
}
.deeppurple-bg {
background-color: #673fb4;
}
.blue-bg {
background-color: #4054b2;
}
.lightblue-bg {
background-color: #587bf8;
}
.log-box {
color: #fff;
}
.log-box h3 {
margin-top: 0;
margin-bottom: 3px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
line-height: 20px;
padding-bottom: 10px;
}
.log-box .log-box-button {
color: #fff;
display: none;
opacity: 0.5;
padding: 5px 8px;
font-size: 13px;
margin-bottom: -5px;
}
.log-box .log-box-button:hover {
opacity: 1;
}
.log-box .log-box-button-edit {
position: absolute;
right: 10px;
bottom: 10px;
}
.log-box .log-box-buttons-buttom {
.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0