bootstrap实现自适应后台左侧菜单及仪表盘首页效果代码
代码语言：html
所属分类：响应式
代码描述：bootstrap实现自适应后台左侧菜单及仪表盘首页效果代码，包括左侧自适应多级菜单、仪表盘、图表、表格、动态布局效果。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/dataTables.bootstrap4.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
<style>
html {
position: relative;
min-height: 100%;
}
body {
overflow-x: hidden;
}
body.sticky-footer {
margin-bottom: 56px;
}
body.sticky-footer .content-wrapper {
min-height: calc(100vh - 56px - 56px);
}
body.fixed-nav {
padding-top: 56px;
}
.content-wrapper {
min-height: calc(100vh - 56px);
padding-top: 1rem;
}
.scroll-to-top {
position: fixed;
right: 15px;
bottom: 3px;
display: none;
width: 50px;
height: 50px;
text-align: center;
color: white;
background: rgba(52, 58, 64, 0.5);
line-height: 45px;
}
.scroll-to-top:focus, .scroll-to-top:hover {
color: white;
}
.scroll-to-top:hover {
background: #343a40;
}
.scroll-to-top i {
font-weight: 800;
}
.smaller {
font-size: 0.7rem;
}
.o-hidden {
overflow: hidden !important;
}
.z-0 {
z-index: 0;
}
.z-1 {
z-index: 1;
}
#mainNav .navbar-collapse {
overflow: auto;
max-height: 75vh;
}
#mainNav .navbar-collapse .navbar-nav .nav-item .nav-link {
cursor: pointer;
}
#mainNav .navbar-collapse .navbar-sidenav .nav-link-collapse:after {
float: right;
content: '\f107';
font-family: 'FontAwesome';
}
#mainNav .navbar-collapse .navbar-sidenav .nav-link-collapse.collapsed:after {
content: '\f105';
}
#mainNav .navbar-collapse .navbar-sidenav .sidenav-second-level,
#mainNav .navbar-collapse .navbar-sidenav .sidenav-third-level {
padding-left: 0;
}
#mainNav .navbar-collapse .navbar-sidenav .sidenav-second-level > li > a,
#mainNav .navbar-collapse .navbar-sidenav .sidenav-third-level > li > a {
display: block;
padding: 0.5em 0;
}
#mainNav .navbar-collapse .navbar-sidenav .sidenav-second-level > li > a:focus, #mainNav .navbar-collapse .navbar-sidenav .sidenav-second-level > li > a:hover,
#mainNav .navbar-collapse .navbar-sidenav .sidenav-third-level > li > a:focus,
#mainNav .navbar-collapse .navbar-sidenav .sidenav-third-level > li > a:hover {
text-decoration: none;
}
#mainNav .navbar-collapse .navbar-sidenav .sidenav-second-level > li > a {
padding-left: 1em;
}
#mainNav .navbar-collapse .navbar-sidenav .sidenav-third-level > li > a {
padding-left: 2em;
}
#mainNav .navbar-collapse .sidenav-toggler {
display: none;
}
#mainNav .navbar-collapse .navbar-nav > .nav-item.dropdown > .nav-link {
position: relative;
min-width: 45px;
}
#mainNav .navbar-collapse .navbar-nav > .nav-item.dropdown > .nav-link:after {
float: right;
width: auto;
content: '\f105';
border: none;
font-family: 'FontAwesome';
}
#mainNav .navbar-collapse .navbar-nav > .nav-item.dropdown > .nav-link .indicator {
position: absolute;
top: 5px;
left: 21px;
font-size: 10px;
}
#mainNav .navbar-collapse .navbar-nav > .nav-item.dropdown.show > .nav-link:after {
content: '\f107';
}
#mainNav .navbar-collapse .navbar-nav > .nav-item.dropdown .dropdown-menu > .dropdown-item > .dropdown-message {
overflow: hidden;
max-width: none;
text-overflow: ellipsis;
}
@media (min-width: 992px) {
#mainNav .navbar-brand {
width: 250px;
}
#mainNav .navbar-collapse {
overflow: visible;
max-height: none;
}
#mainNav .navbar-collapse .navbar-sidenav {
position: absolute;
top: 0;
left: 0;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
margin-top: 56px;
}
#mainNav .navbar-collapse .navbar-sidenav > .nav-item {
width: 250px;
padding: 0;
}
#mainNav .navbar-collapse .navbar-sidenav > .nav-item > .nav-link {
padding: 1em;
}
#mainNav .navbar-collapse .navbar-sidenav > .nav-item .sidenav-second-level,
#mainNav .navbar-collapse .navbar-sidenav > .nav-item .sidenav-third-level {
padding-left: 0;
list-style: none;
}
#mainNav .navbar-collapse .navbar-sidenav > .nav-item .sidenav-second-level > li,
#mainNav .navbar-collapse .navbar-sidenav > .nav-item .sidenav-third-level > li {
width: 250px;
}
#mainNav .navbar-collapse .navbar-sidenav > .nav-item .sidenav-second-level > li > a,
#mainNav .navbar-collapse .navbar-sidenav > .nav-item .sidenav-third-level > li > a {
padding: 1em;
}
#mainNav .navbar-collapse .navbar-sidenav > .nav-item .sidenav-second-level > li > a {
padding-left: 2.75em;
}
#mainNav .navbar-collapse .navbar-sidenav > .nav-item .sidenav-third-level > li > a {
padding-left: 3.75em;
}
#mainNav .navbar-collapse .navbar-nav > .nav-item.dropdown > .nav-link {
min-width: 0;
}
#mainNav .navbar-collapse .navbar-nav > .nav-item.dropdown > .nav-link:after {
width: 24px;
text-align: center;
}
#mainNav .navbar-collapse .navbar-nav > .nav-item.dropdown .dropdown-menu > .dropdown-item > .dropdown-message {
max-width: 300px;
}
}
#mainNav.fixed-top .sidenav-toggler {
display: none;
}
@media (min-width: 992px) {
#mainNav.fixed-top .navbar-sidenav {
height: calc(100vh - 112px);
}
#mainNav.fixed-top .sidenav-toggler {
position: absolute;
top: 0;
left: 0;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
margin-top: calc(100vh - 56px);
}
#mainNav.fixed-top .sidenav-toggler > .nav-item {
width: 250px;
padding: 0;
}
#mainNav.fixed-top .sidenav-toggler > .nav-item > .nav-link {
padding: 1em;
}
}
#mainNav.fixed-top.navbar-dark .sidenav-toggler {
background-color: #212529;
}
#mainNav.fixed-top.navbar-dark .sidenav-toggler a i {
color: #adb5bd;
}
#mainNav.fixed-top.navbar-light .sidenav-toggler {
background-color: #dee2e6;
}
#mainNav.fixed-top.navbar-light .sidenav-toggler a i {
color: rgba(0, 0, 0, 0.5);
}
body.sidenav-toggled #mainNav.fixed-top .sidenav-toggler {
overflow-x: hidden;
width: 55px;
}
body.sidenav-toggled #mainNav.fixed-top .sidenav-toggler .nav-item,
body.sidenav-toggled #mainNav.fixed-top .sidenav-toggler .nav-link {
width: 55px !important;
}
body.sidenav-toggled #mainNav.fixed-top #sidenavToggler i {
-webkit-transform: scaleX(-1);
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: 'FlipH';
}
#mainNav.static-top .sidenav-toggler {
display: none;
}
@media (min-width: 992px) {
#mainNav.static-top .sidenav-toggler {
display: flex;
}
}
body.sidenav-toggled #mainNav.static-top #sidenavToggler i {
-webkit-transform: scaleX(-1);
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: 'FlipH';
}
.content-wrapper {
overflow-x: hidden;
background: white;
}
@media (min-width: 992px) {
.content-wrapper {
margin-left: 250px;
}
}
#sidenavToggler i {
font-weight: 800;
}
.navbar-sidenav-tooltip.show {
display: none;
}
@media (min-width: 992px) {
body.sidenav-toggled .content-wrapper {
margin-left: 55px;
}
}
body.sidenav-toggled .navbar-sidenav {
width: 55px;
}
body.sidenav-toggled .navbar-sidenav .nav-link-text {
display: none;
}
body.sidenav-toggled .navbar-sidenav .nav-item,
body.sidenav-toggled .navbar-sidenav .nav-link {
width: 55px !important;
}
body.sidenav-toggled .navbar-sidenav .nav-item:after,
body.sidenav-toggled .navbar-sidenav .nav-link:after {
display: none;
}
body.sidenav-toggled .navbar-sidenav .nav-item {
white-space: nowrap;
}
body.sidenav-toggled .navbar-sidenav-tooltip.show {
display: flex;
}
#mainNav.navbar-dark .navbar-collapse .navbar-sidenav .nav-link-collapse:after {
color: #868e96;
}
#mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item > .nav-link {
color: #868e96;
}
#mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item > .nav-link:hover {
color: #adb5bd;
}
#mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item .sidenav-second-level > li > a,
#mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item .sidenav-third-level > li > a {
color: #868e96;
}
#mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item .sidenav-second-level > li > a:focus, #mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item .sidenav-second-level > li > a:hover,
#mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item .sidenav-third-level > li > a:focus,
#mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item .sidenav-third-level > li > a:hover {
color: #adb5bd;
}
#mainNav.navbar-dark .navbar-collapse .navbar-nav > .nav-item.dropdown > .nav-link:after {
color: #adb5bd;
}
@media (min-width: 992px) {
#mainNav.navbar-dark .navbar-collapse .navbar-sidenav {
background: #343a40;
}
#mainNav.navbar-dark .navbar-collapse .navbar-sidenav li.active a {
color: white !important;
background-color: #495057;
}
#mainNav.navbar-dark .navbar-collapse .navbar-sidenav li.active a:focus, #mainNav.navbar-dark .navbar-collapse .navbar-sidenav li.active a:hover {
color: white;
}
#mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item .sidenav-second-level,
#mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item .sidenav-third-level {
background: #343a40;
}
}
#mainNav.navbar-light .navbar-collapse .navbar-sidenav .nav-link-collapse:after {
color: rgba(0, 0, 0, 0.5);
}
#mainNav.navbar-light .navbar-collapse .navbar-sidenav > .nav-item > .nav-link {
color: rgba(0, 0, 0, 0.5);
}
#mainNav.navbar-light .navbar-collapse .navbar-sidenav > .nav-item > .nav-link:hover {
color: rgba(0, 0, 0, 0.7);
}
#mainNav.navbar-light .navbar-collapse .navbar-sidenav > .nav-item .sidenav-second-level > li > a,
#mainNav.navbar-light .navbar-collapse .navbar-sidenav > .nav-item .sidenav-third-level > li > a {
color: rgba(0, 0, 0, 0.5);
}
#mainNav.navbar-light .navbar-collapse .navbar-sidenav > .nav-item .sidenav-second-level > li > a:focus, #mainNav.navbar-light .navbar-collapse .navbar-sidenav > .nav-item .sidenav-second-level > li > a:hover,
#mainNav.navbar-light .navbar-collapse .navbar-sidenav > .nav-item .sidenav-third-level > li > a:focus,
#mainNav.navbar-light .navbar-collapse .navbar-sidenav > .nav-item .sidenav-third-level > li > a:hover {
color: rgba(0, 0, 0, 0.7);
}
#mainNav.navbar-light .navbar-collapse .navbar-nav > .nav-item.dropdown > .nav-link:after {
color: rgba(0, 0, 0, 0.5);
}
@media (min-width: 992px) {
#mainNav.navbar-light .navbar-collapse .navbar-sidenav {
background: #f8f9fa;
}
#mainNav.navbar-light .navbar-collapse .navbar-sidenav li.active a {
color: #000 !important;
background-color: #e9ecef;
}
#mainNav.navbar-light .navbar-collapse .navbar-sidenav li.active a:focus, #mainNav.navbar-light .navbar-collapse .navbar-sidenav li.active a:hover {
color: #000;
}
#mainNav.navbar-light .navbar-collapse .navbar-sidenav > .nav-item .sidenav-second-level,
#mainNav.navbar-light .navbar-collapse .navbar-sidenav > .nav-item .sidenav-third-level {
background: #f8f9fa;
}
}
.card-body-icon {
position: absolute;
z-index: 0;
top: -25px;
right: -25px;
font-size: 5rem;
-webkit-transform: rotate(15deg);
-ms-transform: rotate(15deg);
transform: rotate(15deg);
}
@media (min-width: 576px) {
.card-columns {
column-count: 1;
}
}
@media (min-width: 768px) {
.card-columns {
column-count: 2;
}
}
@media (min-width: 1200px) {
.card-columns {
column-count: 2;
}
}
.card-login {
max-width: 25rem;
}
.card-register {
max-width: 40rem;
}
footer.sticky-footer {
position: absolute;
right: 0;
bottom: 0;
width: 100%;
height: 56px;
background-color: #e9ecef;
line-height: 55px;
}
@media (min-width: 992px) {
footer.sticky-footer {
width: calc(100% - 250px);
}
}
@media (min-width: 992px) {
body.sidenav-toggled footer.sticky-footer {
width: calc(100% - 55px);
}
}
</style>
</head>
<body class="fixed-nav sticky-footer bg-dark" id="page-top">
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
<a class="navbar-brand" href="index.html">Start Bootstrap</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav navbar-sidenav" id="exampleAccordion">
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Dashboard">
<a class="nav-link" href="index.html">
<i class="fa fa-fw fa-dashboard"></i>
<span class="nav-link-text">Dashboard</span>
</a>
</li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Charts">
<a class="nav-link" href="charts.html">
<i class="fa fa-fw fa-area-chart"></i>
<span class="nav-link-text">Charts</span>
</a>
</li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Tables">
<a class="nav-link" href="tables.html">
<i class="fa fa-fw fa-table"></i>
<span class="nav-link-text">Tables</span>
</a>
</li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Components">
<a class="nav-link nav-link-collapse collapsed" data-toggle="collapse" href="#collapseComponents" data-parent="#exampleAccordion">
<i class="fa fa-fw fa-wrench"></i>
<span class="nav-link-text">Components</span>
</a>
<ul class="sidenav-second-level collapse" id="collapseComponents">
<li>
<a href="navbar.html">Navbar</a>
</li>
<li>
<a href="cards.html">Cards</a>
</li>
</ul>
</li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Example Pages">
<a class="nav-link nav-link-collapse collapsed" data-toggle="collapse" href="#collapseExamplePages" data-parent="#exampleAccordion">
<i class="fa fa-fw fa-file"></i>
<span class="nav-link-text">Example Pages</span>
</a>
<ul class="sidenav-second-level collapse" id="collapseExamplePages">
<li>
<a href="login.html">Login Page</a>
</li>
<li>
<a href="register.html">Registration Page</a>
</li>
<li>
<a href="forgot-password.html">Forgot Password Page</a>
</li>
<li>
<a href="blank.html">Blank Page</a>
</li>
</ul>
</li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Menu Levels">
<a class="nav-link nav-link-collapse collapsed" data-toggle="collapse" href="#collapseMulti" data-parent="#exampleAccordion">
<i class="fa fa-fw fa-sitemap"></i>
<span class="nav-link-text">Menu Levels</span>
</a>
<ul class="sidenav-second-level collapse" id="collapseMulti">
<li>
<a href="#">Second Level Item</a>
</li>
<li>
<a href="#">Second Level Item</a>
</li>
<li>
<a href="#">Second Level Item</a>
</li>
<li>
<a class="nav-link-collapse collapsed" data-toggle="collapse" href="#collapseMulti2">Third Level</a>
<ul class="sidenav-third-level collapse" id="collapseMulti2">
<li>
<a href="#">Third Level Item</a>
</li>
<li>
<a href="#">Third Level Item</a>
</li>
<li>
<a href="#">Third Level Item</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Link">
<a class="nav-link" href="#">
<i class="fa fa-fw fa-link"></i>
<span class="nav-link-text">Link</span>
</a>
</li>
</ul>
<ul class="navbar-nav sidenav-toggler">
<li class="nav-item">
<a class="nav-link text-center" id="sidenavToggler">
<i class="fa fa-fw fa-angle-left"></i>
</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle mr-lg-2" id="messagesDropdown" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-fw fa-envelope"></i>
<span class="d-lg-none">Messages
<span class="badge badge-pill badge-primary">12 New</span>
</span>
<span class="indicator text-primary d-none d-lg-block">
<i class="fa fa-fw fa-circle"></i>
</span>
</a>
<div class="dropdown-menu" aria-labelledby="messagesDropdown">
<h6 class="dropdown-header">New Messages:</h6>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<strong>David Miller</strong>
<span class="small float-right text-muted">11:21 AM</span>
<div class="dropdown-message small">Hey there! This new version of SB Admin is pretty awesome! These messages clip off when they reach the end of the box so they don't overflow over to the sides!</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<strong>Jane Smith</strong>
<span class="small float-right text-muted">11:21 AM</span>
<div class="dropdown-message small">I was wondering if you could meet for an appointment at 3:00 instead of 4:00. Thanks!</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<strong>John Doe</strong>
<span class="small float-right text-muted">11:21 AM</span>
<div class="dropdown-message small">I've sent the final files over to you for review. When you're able to sign off of them let me know and we can discuss distribution.</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item small" href="#">View all messages</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle mr-lg-2" id="alertsDropdown" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-fw fa-bell"></i>
<span class="d-lg-none">Alerts
<span class="badge badge-pill badge-warning">6 New</span>
</span>
<span class="indicator text-warning d-none d-lg-block">
<i class="fa fa-fw fa-circle"></i>
</span>
</a>
<div class="dropdown-menu" aria-labelledby="alertsDropdown">
<h6 class="dropdown-header">New Alerts:</h6>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<span class="text-success">
<strong>
<i class="fa fa-long-arrow-up fa-fw"></i>Status Update</strong>
</span>
<span class="small float-right text-muted">11:21 AM</span>
<div class="dropdown-message small">This is an automated server response message. All systems are online.</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<span class="text-danger">
<strong>
<i class="fa fa-long-arrow-down fa-fw"></i>Status Update</strong>
</span>
<span class="small float-right text-muted">11:21 AM</span>
<div class="dropdown-message small">This is an automated server response message. All systems are online.</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<span class="text-success">
<strong>
<i class="fa fa-long-arrow-up fa-fw"></i>Status Update</strong>
</span>
<span class="small float-right text-muted">11:21 AM</span>
<div class="dropdown-message small">This is an automated server response message. All systems are online.</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item small" href="#">View all alerts</a>
</div>
</li>
<li class="nav-item">
<form class="form-inline my-2 my-lg-0 mr-lg-2">
<div class="input-group">
<input class="form-control" type="text" placeholder="Search for...">
<span class="input-group-append">
<button class="btn btn-primary" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</form>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="modal" data-target="#exampleModal">
<i class="fa fa-fw fa-sign-out"></i>Logout</a>
</li>
</ul>
</div>
</nav>
<div class="content-wrapper">
<div class="container-fluid">
<!-- Breadcrumbs-->
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="#">Dashboard</a>
</li>
<li class="breadcrumb-item active">My Dashboard</li>
</ol>
<!-- Icon Cards-->
<div class="row">
<div class="col-xl-3 col-sm-6 mb-3">
<div class="card text-white bg-primary o-hidden h-100">
<div class="card-body">
<div class="card-body-icon">
<i class="fa fa-fw fa-comments"></i>
</div>
<div class="mr-5">26 New Messages!</div>
</div>
<a class="card-footer text-white clearfix small z-1" href="#">
<span class="float-left">View Details</span>
<span class="float-right">
<i class="fa fa-angle-right"></i>
</span>
</a>
</div>
</div>
<div class="col-xl-3 col-sm-6 mb-3">
<div class="card text-white bg-warning o-hidden h-100">
<div class="card-body">
<div class="card-body-icon">
<i class="fa fa-fw fa-list"></i>
</div>
<div class="mr-5">11 New Tasks!</div>
</div>
<a class="card-footer text-white clearfix small z-1" href="#">
<span class="float-left">View Details</span>
<span class="float-right">
<i class="fa fa-angle-right"></i>
</span>
</a>
</div>
</div>
<div class="col-xl-3 col-sm-6 mb-3">
<div class="card text-white bg-success o-hidden h-100">
<div class="card-body">
<div class="card-body-icon">
<i class="fa fa-fw fa-shopping-cart"></i>
</div>
<div class="mr-5">123 New Orders!</div>
</div>
<a class="card-footer text-white clearfix small z-1" href="#">
<span class="float-left">View Details</span>
<span class="float-right">
<i class="fa fa-angle-right"></i>
</span>
</a>
</div>
</div>
<div class="col-xl-3 col-sm-6 mb-3">
<div class="card text-white bg-danger o-hidden h-100">
<div class="card-body">
<div class="card-body-icon">
<i class="fa fa-fw fa-support"></i>
</div>
<div class="mr-5">13 New Tickets!</div>
</div>
<a class="card-footer text-white clearfix small z-1" href="#">
<span class="float-left">View Details</span>
<span class="float-right">
<i class="fa fa-angle-right"></i>
</span>
</a>
</div>
</div>
</div>
<!-- Area Chart Example-->
<div class="card mb-3">
<div class="card-header">
<i class="fa fa-area-chart"></i> Area Chart Example</div>
<div class="card-body">
<canvas id="myAreaChart" width="100%" height="30"></canvas>
</div>
<div class="card-footer small text-muted">Updated yesterday at 11:59 PM</div>
</div>
<div class="row">
<div class="col-lg-8">
<!-- Example Bar Chart Card-->
<div class="card mb-3">
<div class="card-header">
<i class="fa fa-bar-chart"></i> Bar Chart Example</div>
<div class="card-body">
<div class="row">
<div class="col-sm-8 my-auto">
<canvas id="myBarChart" width="100" height="50"></canvas>
</div>
<div class="col-sm-4 text-center my-auto">
<div class="h4 mb-0 text-primary">$34,693</div>
<div class="small text-muted">YTD Revenue</div>
<hr>
<div class="h4 mb-0 text-warning">$18,474</div>
<div class="small text-muted">YTD Expenses</div>
<hr>
<div class="h4 mb-0 text-success">$16,219</div>
<div class="small text-muted">YTD Margin</div>
</div>
</div>
</div>
<div class="card-footer small text-muted">Updated yesterday at 11:59 PM</div>
</div>
<!-- Card Columns Example Social Feed-->
<div class="mb-0 mt-4">
<i class="fa fa-newspaper-o"></i> News Feed</div>
<hr class="mt-2">
<div class="card-columns">
<!-- Example Social Card-->
<div class="card mb-3">
<a href="#">
<img class="card-img-top img-fluid w-100" src="//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png" alt="">
</a>
<div class="card-body">
<h6 class="card-title mb-1"><a href="#">David Miller</a></h6>
<p class="card-text small">These waves are looking pretty good today!
<a href="#">#surfsup</a>
</p>
</div>
<hr class="my-0">
<div class="card-body py-2 small">
<a class="mr-3 d-inline-block" href="#">
<i class="fa fa-fw fa-thumbs-up"></i>Like</a>
<a class="mr-3 d-inline-block" href="#">
<i class="fa fa-fw fa-comment"></i>Comment</a>
<a class="d-inline-block" href="#">
<i class="fa fa-fw fa-share"></i>Share</a>
</div>
<hr class="my-0">
<div class="card-body small bg-faded">
<div class="media">
<img class="d-flex mr-3" src="//repo.bfw.wiki/bfwrepo/image/60d41f5173b0d.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_45,h_45,/quality,q_90" alt="">
<div class="media-body">
<h6 class="mt-0 mb-1"><a href="#">John Smith</a></h6>Very nice! I wish I was there! That looks amazing!
<ul class="list-inline mb-0">
<li class="list-inline-item">
<a href="#">Like</a>
</li>
<li class="list-inline-item">·</li>
<li class="list-inline-item">
<a href="#">Reply</a>
</li>
</ul>
<div class="media mt-3">
<a class="d-flex pr-3" href="#">
<img src="//repo.bfw.wiki/bfwrepo/image/60d41f5173b0d.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_45,h_45,/quality,q_90" alt="">
</a>
<div class="media-body">
<h6 class="mt-0 mb-1"><a href="#">David Miller</a></h6>Next time for sure!
<ul class="list-inline mb-0">
<li class="list-inline-item">
<a href="#">Like</a>
</li>
<li class="list-inline-item">·</li>
<li class="list-inline-item">
<a href="#">Reply</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="card-footer small text-muted">Posted 32 mins ago</div>
</div>
<!-- Example Social Card-->
<div class="card mb-3">
<a href="#">
<img class="card-img-top img-fluid w-100" src="//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png" alt="">
</a>
<div class="card-body">
<h6 class="card-title mb-1"><a href="#">John Smith</a></h6>
<p class="card-text small">Another day at the office...
<a href="#">#workinghardorhardlyworking</a>
</p>
</div>
<hr class="my-0">
<div class="card-body py-2 small">
<a class="mr-3 d-inline-block" href="#">
<i class="fa fa-fw fa-thumbs-up"></i>Like</a>
<a class="mr-3 d-inline-block" href="#">
<i class="fa fa-fw fa-comment"></i>Comment</a>
<a class="d-inline-block" href="#">
<i class="fa fa-fw fa-share"></i>Share</a>
</div>
<hr class="my-0">
<div class="card-body small bg-faded">
<div class="media">
<img class="d-flex mr-3" src="//repo.bfw.wiki/bfwrepo/image/60d41f5173b0d.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_45,h_45,/quality,q_90" alt="">
<div class="media-body">
<h6 class="mt-0 mb-1"><a href="#">Jessy Lucas</a></h6>Where did you get that camera?! I want one!
<ul class="list-inline mb-0">
<li class="list-inline-item">
<a href="#">Like</a>
</li>
<li class="list-inline-item">·</li>
<li class="list-inline-item">
<a href="#">Reply</a>
</li>
</ul>
</div>
</div>
</div>
<div class="card-footer small text-muted">Posted 46 mins ago</div>
</div>
<!-- Example Social Card-->
<div class="card mb-3">
<a href="#">
<img class="card-img-top img-fluid w-100" src="//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png" alt="">
</a>
<div class="card-body">
<h6 class="card-title mb-1"><a href="#">Jeffery Wellings</a></h6>
<p class="card-text small">Nice shot from the skate park!
<a href="#">#kickflip</a>
<a href="#">#holdmybeer</a>
<a href="#">#igotthis</a>
</p>
</div>
<hr class="my-0">
<div class="card-body py-2 small">
<a class="mr-3 d-inline-block" href="#">
<i class="fa fa-fw fa-thumbs-up"></i>Like</a>
<a class="mr-3 d-inline-block" href="#">
<i class="fa fa-fw fa-comment"></i>Comment</a>
<a class="d-inline-block" href="#">
<i class="fa fa-fw fa-share"></i>Share</a>
</div>
<div class="card-footer small text-muted">Posted 1 hr ago</div>
</div>
<!-- Example Social Card-->
<div class="card mb-3">
<a href="#">
<img class="card-img-top img-fluid w-100" src="//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png" alt="">
</a>
<div class="card-body">
<h6 class="card-title mb-1"><a href="#">David Miller</a></h6>
<p class="card-text smal.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0