console
$(document).ready(function () {
mainApp.initFunction();
$("#sideNav").click(function(){
if($(this).hasClass('closed')){
$('.navbar-side').animate({left: '0px'});
$(this).removeClass('closed');
$('#page-wrapper').animate({'margin-left' : '260px'});
}
else{
$(this).addClass('closed');
$('.navbar-side').animate({left: '-260px'});
$('#page-wrapper').animate({'margin-left' : '0px'});
}
});
});
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
Bootstrap
</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<div id="wrapper">
<nav class="navbar navbar-default top-navbar" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
<span class="sr-only">
Toggle navigation
</span>
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
</button>
<a class="navbar-brand" href="index.html">
<i class="fa fa-gear">
</i>
<strong>
HYBRID
</strong>
</a>
</div>
<ul class="nav navbar-top-links navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
<i class="fa fa-envelope fa-fw">
</i>
<i class="fa fa-caret-down">
</i>
</a>
<ul class="dropdown-menu dropdown-messages">
<li>
<a href="#">
<div>
<strong>
John Doe
</strong>
<span class="pull-right text-muted">
<em>
Today
</em>
</span>
</div>
<div>
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s...
</div>
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
<div>
<strong>
John Smith
</strong>
<span class="pull-right text-muted">
<em>
Yesterday
</em>
</span>
</div>
<div>
Lorem Ipsum has been the industry's standard dummy text ever since an
kwilnw...
</div>
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
<div>
<strong>
John Smith
</strong>
<span class="pull-right text-muted">
<em>
Yesterday
</em>
</span>
</div>
<div>
Lorem Ipsum has been the industry's standard dummy text ever since the...
</div>
</a>
</li>
<li class="divider">
</li>
<li>
<a class="text-center" href="#">
<strong>
Read All Messages
</strong>
<i class="fa fa-angle-right">
</i>
</a>
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
<i class="fa fa-tasks fa-fw">
</i>
<i class="fa fa-caret-down">
</i>
</a>
<ul class="dropdown-menu dropdown-tasks">
<li>
<a href="#">
<div>
<p>
<strong>
Task 1
</strong>
<span class="pull-right text-muted">
60% Complete
</span>
</p>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60"
aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">
60% Complete (success)
</span>
</div>
</div>
</div>
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
<div>
<p>
<strong>
Task 2
</strong>
<span class="pull-right text-muted">
28% Complete
</span>
</p>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="28"
aria-valuemin="0" aria-valuemax="100" style="width: 28%">
<span class="sr-only">
28% Complete
</span>
</div>
</div>
</div>
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
<div>
<p>
<strong>
Task 3
</strong>
<span class="pull-right text-muted">
60% Complete
</span>
</p>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60"
aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">
60% Complete (warning)
</span>
</div>
</div>
</div>
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
<div>
<p>
<strong>
Task 4
</strong>
<span class="pull-right text-muted">
85% Complete
</span>
</p>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="85"
aria-valuemin="0" aria-valuemax="100" style="width: 85%">
<span class="sr-only">
85% Complete (danger)
</span>
</div>
</div>
</div>
</a>
</li>
<li class="divider">
</li>
<li>
<a class="text-center" href="#">
<strong>
See All Tasks
</strong>
<i class="fa fa-angle-right">
</i>
</a>
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
<i class="fa fa-bell fa-fw">
</i>
<i class="fa fa-caret-down">
</i>
</a>
<ul class="dropdown-menu dropdown-alerts">
<li>
<a href="#">
<div>
<i class="fa fa-comment fa-fw">
</i>
New Comment
<span class="pull-right text-muted small">
4 min
</span>
</div>
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
<div>
<i class="fa fa-twitter fa-fw">
</i>
3 New Followers
<span class="pull-right text-muted small">
12 min
</span>
</div>
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
<div>
<i class="fa fa-envelope fa-fw">
</i>
Message Sent
<span class="pull-right text-muted small">
4 min
</span>
</div>
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
<div>
<i class="fa fa-tasks fa-fw">
</i>
New Task
<span class="pull-right text-muted small">
4 min
</span>
</div>
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
<div>
<i class="fa fa-upload fa-fw">
</i>
Server Rebooted
<span class="pull-right text-muted small">
4 min
</span>
</div>
</a>
</li>
<li class="divider">
</li>
<li>
<a class="text-center" href="#">
<strong>
See All Alerts
</strong>
<i class="fa fa-angle-right">
</i>
</a>
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
<i class="fa fa-user fa-fw">
</i>
<i class="fa fa-caret-down">
</i>
</a>
<ul class="dropdown-menu dropdown-user">
<li>
<a href="#">
<i class="fa fa-user fa-fw">
</i>
User Profile
</a>
</li>
<li>
<a href="#">
<i class="fa fa-gear fa-fw">
</i>
Settings
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
<i class="fa fa-sign-out fa-fw">
</i>
Logout
</a>
</li>
</ul>
</li>
</ul>
</nav>
<nav class="navbar-default navbar-side" role="navigation">
<div id="sideNav" href="">
<i class="fa fa-caret-right">
</i>
</div>
<div class="sidebar-collapse">
<ul class="nav" id="main-menu">
<li>
<a class="active-menu" href="index.html">
<i class="fa fa-dashboard">
</i>
Dashboard
</a>
</li>
<li>
<a href="ui-elements.html">
<i class="fa fa-desktop">
</i>
UI Elements
</a>
</li>
<li>
<a href="chart.html">
<i class="fa fa-bar-chart-o">
</i>
Charts
</a>
</li>
<li>
<a href="tab-panel.html">
<i class="fa fa-qrcode">
</i>
Tabs & Panels
</a>
</li>
<li>
<a href="table.html">
<i class="fa fa-table">
</i>
Responsive Tables
</a>
</li>
<li>
<a href="form.html">
<i class="fa fa-edit">
</i>
Forms
</a>
</li>
<li>
<a href="#">
<i class="fa fa-sitemap">
</i>
Multi-Level Dropdown
<span class="fa arrow">
</span>
</a>
<ul class="nav nav-second-level collapse">
<li>
<a href="#">
Second Level Link
</a>
</li>
<li>
<a href="#">
Second Level Link
</a>
</li>
<li>
<a href="#">
Second Level Link
<span class="fa arrow">
</span>
</a>
<ul class="nav nav-third-level collapse">
<li>
<a href="#">
Third Level Link
</a>
</li>
<li>
<a href="#">
Third Level Link
</a>
</li>
<li>
<a href="#">
Third Level Link
</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="empty.html">
<i class="fa fa-fw fa-file">
</i>
Empty Page
</a>
</li>
</ul>
</div>
</nav>
<div id="page-wrapper">
<div id="page-inner">
<div class="row">
<div class="col-md-12">
<h1 class="page-header">
Dashboard
<small>
Summary of your App
</small>
</h1>
<ol class="breadcrumb">
<li>
<a href="#">
Home
</a>
</li>
<li>
<a href="#">
Library
</a>
</li>
<li class="active">
Data
</li>
</ol>
</div>
</div>
<div class="tlinks">
Collect from
<a href="http://www.cssmoban.com/">
网页模板
</a>
</div>
<div class="row">
<div class="col-md-4 col-sm-12 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
Tasks Panel
</div>
<div class="panel-body">
<div class="list-group">
<a href="#" class="list-group-item">
<span class="badge">
7 minutes ago
</span>
<i class="fa fa-fw fa-comment">
</i>
Commented on a post
</a>
<a href="#" class="list-group-item">
<span class="badge">
16 minutes ago
</span>
<i class="fa fa-fw fa-truck">
</i>
Order 392 shipped
</a>
<a href="#" class="list-group-item">
<span class="badge">
36 minutes ago
</span>
<i class="fa fa-fw fa-globe">
</i>
Invoice 653 has paid
</a>
<a href="#" class="list-group-item">
<span class="badge">
1 hour ago
</span>
<i class="fa fa-fw fa-user">
</i>
A new user has been added
</a>
<a href="#" class="list-group-item">
<span class="badge">
1.23 hour ago
</span>
<i class="fa fa-fw fa-user">
</i>
A new user has added
</a>
<a href="#" class="list-group-item">
<span class="badge">
yesterday
</span>
<i class="fa fa-fw fa-globe">
</i>
Saved the world
</a>
</div>
<div class="text-right">
<a href="#">
More Tasks
<i class="fa fa-arrow-circle-right">
</i>
</a>
</div>
</div>
</div>
</div>
<div class="col-md-8 col-sm-12 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
Responsive Table Example
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>
S No.
</th>
<th>
First Name
</th>
<th>
Last Name
</th>
<th>
User Name
</th>
<th>
Email ID.
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
John
</td>
<td>
Doe
</td>
<td>
John15482
</td>
<td>
name@site.com
</td>
</tr>
<tr>
<td>
2
</td>
<td>
Kimsila
</td>
<td>
Marriye
</td>
<td>
Kim1425
</td>
<td>
name@site.com
</td>
</tr>
<tr>
<td>
3
</td>
<td>
Rossye
</td>
<td>
Nermal
</td>
<td>
Rossy1245
</td>
<td>
name@site.com
</td>
</tr>
<tr>
<td>
4
</td>
<td>
Richard
</td>
<td>
Orieal
</td>
<td>
Rich5685
</td>
<td>
name@site.com
</td>
</tr>
<tr>
<td>
5
</td>
<td>
Jacob
</td>
<td>
Hielsar
</td>
<td>
Jac4587
</td>
<td>
name@site.com
</td>
</tr>
<tr>
<td>
6
</td>
<td>
Wrapel
</td>
<td>
Dere
</td>
<td>
Wrap4585
</td>
<td>
name@site.com
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<footer>
</footer>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js">
</script>
</body>
</html>
body {
font-family: 'Open Sans', sans-serif;
background: #32C2CD url(../img/bg-img.jpg) !important;
}
#wrapper {
width: 100%;
}
#page-wrapper {
padding: 15px 15px;
min-height: 600px;
background: #E6E6E6;
}
#page-inner {
width:100%;
margin:10px 20px 10px 0px;
background-color:transparent;
padding:10px;
min-height:1200px;
}
.text-center {
text-align:center;
}
.no-boder {
border:1px solid #f3f3f3;
}
h1, .h1, h2, .h2, h3, .h3 {
margin-top: 7px;
margin-bottom: -5px;
}
h2 {
color: #000;
}
h4 {
padding-top:10px;
}
.square-btn-adjust {
border: 0px solid transparent;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
.tlinks{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}
p {
font-size:16px;
line-height:25px;
padding-top:20px;
}
.navbar-side {
z-index: 0;
}
.panel{
border-radius:0px;
}
.navbar-side .nav > li > a > i{
color: #FFFFFF;
padding: 8px;
width: 30px;
text-align: center;
}
.top-navbar{
position: fixed;
width: 100%;
z-index: 300;
-webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
}
.navbar-side {
z-index: 1;
position: fixed;
width: 260px;
top: 80px;
}
#page-wrapper {
position: relative;
top: 55px;
}
.top-navbar .nav > li > a:hover, .top-navbar .nav > li > a:focus {
text-decoration: none;
background-color: #2497BA;
color: #fff;
}
.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
background-color: #23C1CD;
border-color: #24C2CD;
}
.breadcrumb {
padding: 18px;
margin-bottom: 20px;
list-style: none;
background-color: #FFFFFF;
border-radius: 0;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05); box-shadow: 0 1px 1px rgba(0,0,0,.05);
}
.dropdown-menu>li>a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: 400;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
font-size: 13px;
}
.dropdown-menu>li>a i {
color: #24C2CE;
}
.text-muted {
color: #FB5651;
}
.badge {
display: inline-block;
min-width: 10px;
padding: 4px 7px;
font-size: 11px;
font-weight: 700;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
background-color: #24C2CE;
border-radius: 10px;
}
.page-header {
padding-bottom: 9px;
margin: 10px 0 20px;
border-bottom: 1px solid transparent;
text-align: left;}
.panel-left{
width: 100px;
height: 100px;
background: #32D088;
border: 2px solid white;
border-radius: 100%;
overflow: hidden;
margin: 12px;}
.panel-left .fa-5x {
font-size: 3em;
color: rgba(255, 255, 255, 0.69);
padding: 29px 0;
margin-bottom:30px;
}
.panel-right{
height: 124px;
background: transparent;
margin-bottom: 0;
color: #2B2E33;
background-color: #fff;
float: left;text-align: left;padding-left: 20px;}
.panel-right h3{
font-size: 40px;
padding: 18px 10px 13px 0;
color: #8A8A8A;
}
.panel-back {
background-color:#fff;
}
.panel-default {
border-color: #ECECEC;
}
.panel-default > .panel-heading {
color: #000;
border-color: #FFF;
font-weight:bold;
background: #FFFFFF;
font-size: 16px;
padding: 15px 15px 0;}
.panel-heading {
border-bottom: 1px solid transparent;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.jumbotron{
padding:20px;
}
.jumbotron p {
margin-bottom: 15px;
font-size: 15px;
font-weight: 200;
}
.jumbotron, .well{
background:#fff;
}
.noti-box {
min-height: 100px;
padding: 20px;
}
.noti-box .icon-box {
display: block;
float: left;
margin: 0 15px 10px 0;
width: 70px;
height: 70px;
line-height: 75px;
vertical-align: middle;
text-align: center;
font-size: 40px;
}
.text-box p{
margin: 0 0 3px;
}
.main-text {
font-size: 25px;
font-weight:600;
}
.set-icon {
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}
.panel-primary{
display:inline-block;
margin-bottom: 30px;
width:100%;
}
.green {
color: #fff;
}
.blue {
background-color: #32CEE4;
color: #fff
}
.red {
background-color: #FB6E51;
color:#fff;
}
.brown {
background-color: #F5B252;
color:#fff;
}
.back-footer-red {
background-color: #F0433D;
color:#fff;
border-top: 0px solid #fff;
}
.icon-box-right {
display: block;
float: right;
margin: 0 15px 10px 0;
width: 70px;
height: 70px;
line-height: 75px;
vertical-align: middle;
text-align: center;
font-size: 40px;
}
.main-temp-back {
background: #8702A8;
color: #FFFFFF;
font-size: 16px;
font-weight: 300;
text-align: center;
}
.main-temp-back .text-temp {
font-size: 40px;
}
.back-dash {
padding:20px;
font-size:20px;
font-weight:500;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
background-color:#2EA7EB;
color:#fff;
}
.back-dash p {
padding-top:16px;
font-size:13px;
color:#fff;
line-height:25px;
text-align:justify;
}
.color-bottom-txt {
color: #000;
font-size: 16px;
line-height: 30px;
}
.main-chart {
background: #fff;
}
.easypiechart-panel {
text-align: center;
padding: 1px 0;
margin-bottom: 20px;
}
.placeholder h2 {
margin-bottom: 0px;
}
.donut {
width: 100%;
}
.easypiechart {
position: relative;
text-align: center;
width: 120px;
height: 120px;
margin: 20px auto 10px auto;
}
.easypiechart .percent {
display: block;
position: absolute;
font-size: 26px;
top: 38px;
width: 120px;
}
#easypiechart-blue .percent { color: #30a5ff;}
#easypiechart-teal .percent { color: #1ebfae;}
#easypiechart-orange .percent { color: #ffb53e;}
#easypiechart-red .percent { color: #ef4040;}
.chat-panel .panel-body {
height: 450px;
overflow-y: scroll;
}
.chat-box {
margin: 0;
padding: 0;
list-style: none;
}
.chat-box li {
margin-bottom: 15px;
padding-bottom: 5px;
border-bottom: 1px dotted #808080;
}
.chat-box li.left .chat-body {
margin-left: 90px;
}
.chat-box li .chat-body p {
margin: 0;
color: #8d8888;
}
.chat-img>img {
margin-left:20px;
}
footer p{
font-size: 14px;
}
.user-image {
margin: 25px auto;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
max-height:170px;
max-width:170px;
}
.top-navbar{
margin:0px;
}
.top-navbar .navbar-brand {
color: #fff;
width: 260px;
text-align: left;
height: 60px;
font-size: 24px;
font-weight: 700;
text-transform: uppercase;
line-height: 30px;
background: #24383A;
}
.navbar-brand b{
color: #4BD28C;
}
.top-navbar .nav > li {
position: relative;
display: inline-block;
margin: 0px;
padding: 0px;
}
.top-navbar .nav > li > a {
position: relative;
display: block;
padding: 20px;
color: #FFFFFF;
margin: 0px;
}
.top-navbar .nav > li > a:hover, .top-navbar .nav > li > a:focus {
text-decoration: none;
color: #319DB5 !important;
background: transparent;
}
.top-navbar .dropdown-menu{
min-width: 230px;
border-radius: 0 0 4px 4px;
}
.top-navbar .dropdown-menu > li > a:hover, .top-navbar .dropdown-menu > li > a:focus{
color: #225081;
background:none;
}
.dropdown-tasks{
width: 255px;
}
.dropdown-tasks .progress {
height: 8px;
margin-bottom: 8px;
overflow: hidden;
background-color: #f5f5f5;
border-radius: 0px;
}
.dropdown-tasks > li > a {
padding: 0px 15px;
}
.dropdown-tasks p {
font-size: 13px;
line-height: 21px;
padding-top: 4px;
}
.active-menu {
background-color: #18A0A9 !important;
color: #fff !important;
}
.active-menu i{
color: #fff !important;
}
.arrow {
float: right;
margin-top: 8px;
}
.fa.arrow:before {
content: "\f104";
}
.active > a > .fa.arrow:before {
content: "\f107";
}
.nav-second-level li,
.nav-third-level li {
border-bottom: none !important;
}
.nav-second-level li a {
padding-left: 37px;
}
.nav-third-level li a {
padding-left: 55px;
}
.sidebar-collapse , .sidebar-collapse .nav{
background:none;
}
.sidebar-collapse .nav {
padding:0;
}
.sidebar-collapse .nav > li > a {
color: #FFFFFF;
background:transparent;
text-shadow:none;
}
.sidebar-collapse > .nav > li > a {
padding: 12px 10px;
}
.sidebar-collapse > .nav > li {
border-bottom: 1px solid rgba(107, 108, 109, 0.19);
}
ul.nav.nav-second-level.collapse.in {
background: #096E75;
}
.sidebar-collapse .nav > li > a:hover,
.sidebar-collapse .nav > li > a:focus {
outline:0;
}
.navbar-side {
border:none;
background: #32C2CD url(../img/bg-img.jpg) !important;
}
.top-navbar {
background: #4A4A4A;
border-bottom:none;
}
.top-navbar .nav > li > a > i {
margin-right: 2px;
}
.top-navbar .navbar-brand:hover {
color: #1CC09F;
background-color: rgb(43, 46, 51);
}
.dropdown-user li {
margin: 8px 0;
}
.navbar-default {
border:0px solid black;
}
.navbar-header {
background: transparent;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background-color: #283643;
}
.navbar-default .navbar-toggle {
border-color: #fff;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #FFF;
}
.nav > li > a > i {
margin-right:10px;
color: #FFF;
}
.dropdown-menu>li>a>strong {
color: #1CC09F;
padding: 5px 0;
display: inline-block;
font-weight: 500;
}
#sideNav{
position: absolute;
right: -28px;
z-index: 3;
background-color: #CFCECE;
padding: 3px 9px;
top: -11px;
color: #283643;
cursor:pointer;
border-radius: 0 15px 15px 0;
width: 28px;
font-size: 16px;
}
ul.dropdown-menu.dropdown-messages li a div {
padding: 2px 0;
}
.btn-circle {
width: 50px;
height: 50px;
padding: 6px 0;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
text-align: center;
font-size: 12px;
line-height: 1.428571429;
}
@media(min-width:768px) {
#page-wrapper{
margin: 0 0 0 260px;
padding: 15px 30px;
min-height: 1200px;
}
.navbar-side {
width: 260px;
z-index: 1;
}
.navbar {
border-radius: 0px;
}
}
@media(max-width:480px) {
.page-header small {
display: block;
padding-top: 14px;
font-size: 19px;
}
.panel-left {
width: 85px;
height: 85px;
border-radius: 100%;
overflow: hidden;
margin: 14px;
}
}