蓝色欧美样式bootstrap后台数据管理网页模板代码下载

蓝色欧美样式bootstrap后台数据管理网页模板代码下载

1. 引入CSS

<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="bower_components/material-design-iconic-font/dist/css/material-design-iconic-font.min.css">
<link rel="stylesheet" href="bower_components/animate.css/animate.min.css">
<link rel="stylesheet" href="bower_components/metisMenu/dist/metisMenu.min.css">
<link rel="stylesheet" href="bower_components/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css">
<link rel="stylesheet" href="bower_components/Waves/dist/waves.min.css">
<link rel="stylesheet" href="bower_components/toastr/toastr.css">
<link rel="stylesheet" href="bower_components/datatables/media/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="css/style.css">

2. 引入JS

<script src="bower_components/html5shiv/dist/html5shiv.min,js"></script>
<script src="bower_components/respondJs/dest/respond.min.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/metisMenu/dist/metisMenu.min.js"></script>
<script src="bower_components/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.js"></script>
<script src="bower_components/Waves/dist/waves.min.js"></script>
<script src="bower_components/toastr/toastr.js"></script>
<script src="bower_components/datatables/media/js/jquery.dataTables.min.js"></script>
<script src="bower_components/datatables.net-responsive/js/dataTables.responsive.js"></script>
<script src="bower_components/moment/min/moment.min.js"></script>
<script src="bower_components/Chart.js/Chart.js"></script>
<script src="bower_components/flot/jquery.flot.js"></script>
<script src="bower_components/flot/jquery.flot.resize.js"></script>
<script src="bower_components/flot.tooltip/js/jquery.flot.tooltip.js"></script>
<script src="bower_components/jquery.easy-pie-chart/dist/jquery.easypiechart.js"></script>
<script src="js/common.js"></script>

3. HTML代码

  <!--Preloader-->
<div id="preloader">
      <div class="refresh-preloader"><div class="preloader"><i>.</i><i>.</i><i>.</i></div></div>
</div>
  <div class="wrapper">
   <nav class="navbar">
 <div class="navbar-header container">
   <a href="#" class="menu-toggle"><i class="zmdi zmdi-menu"></i></a>
   <a href="index.html" class="logo"><img src="img/logo.png" alt="Logo Pacificonis"></a>
   <a href="index.html" class="icon-logo"></a>
 </div>
  <div class="navbar-container clearfix">
    <div class="pull-left">
      <a href="#" class="page-title text-uppercase">Dashboard</a>
    </div>
    <div class="pull-right">
      <div class="pull-left search-container">
        <form class="searchbox">
          <input type="search" placeholder="Search" name="search" class="searchbox-input">
          <input type="submit" class="searchbox-submit" value="">
          <span class="searchbox-icon"><span class="zmdi zmdi-search search-icon"></span></span>
        </form>
      </div>
      <ul class="nav pull-right right-menu">
        <li class="more-options dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown">
            <i class="zmdi zmdi-account-circle"></i>
          </a>
          <div class="more-opt-container dropdown-menu">
            <a href="#"><i class="zmdi zmdi-account-o"></i>Account<span class="badge badge-warning">3</span></a>
            <a href="#"><i class="zmdi zmdi-storage"></i>Storage <span class="badge badge-danger">2</span></a>
            <a href="#"><i class="zmdi zmdi-calendar-note"></i>Calendar <span class="badge badge-success">2</span></a>
            <a href="#"><i class="zmdi zmdi-chart-donut"></i>Analytics <span class="badge badge-success">7</span></a>
            <a href="#"><i class="zmdi zmdi-balance"></i>Balance <span class="badge badge-info">5</span></a>
            <a href="#"><i class="zmdi zmdi-run"></i>Exit</a>
          </div>
        </li>
        <li class="notification dropdown">
          <a class="dropdown-toggle">
            <i class="zmdi zmdi-notifications"></i>
            <span class="badge badge-primary">8</span>
          </a>
          <div class="dropdown-menu">
            <h4 class="text-center info-color m-0">You have 19 new notifications</h4>
            <div class="notification-container">
              <a href="#"><i class="zmdi zmdi-email warning-color m-r-5"></i> You have 16 messages <span class="pull-right">4 minutes ago</span></a>
              <a href="#"><i class="zmdi zmdi-twitter info-color m-r-5"></i> 3 new followers <span class="pull-right">12 minutes ago</span></a>
              <a href="#"><i class="zmdi zmdi-dropbox info-color m-r-5"></i> 7 changed files <span class="pull-right">18 minutes ago</span></a>
              <a href="#"><i class="zmdi zmdi-instagram warning-color m-r-5"></i> 26 new followers <span class="pull-right">22 minutes ago</span></a>
              <a href="#"><i class="zmdi zmdi-twitter info-color m-r-5"></i> 8 new followers <span class="pull-right">23 minutes ago</span></a>
            </div>
            <a href="#" class="text-uppercase clear-all">Clear all notifications</a>
            <div class="check-ok">
              <i class="zmdi zmdi-check"></i>
            </div>
          </div>
        </li>
        <li>
          <a class="sidepanel-toggle" href="#">
            <i class="zmdi zmdi-more-vert"></i>
          </a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<aside class="sidebar">
  <ul class="nav metismenu">
    <li class="profile-sidebar-container">
      <div class="profile-sidebar text-center">
        <div class="profile-userpic">
          <img src="img/profile_user.jpg" class="img-responsive img-circle center-block" alt="user">
          <span class="online"></span>
        </div>
        <div class="profile-usertitle">
          <div class="name">
            Marcus Doe
          </div>
          <div class="city">
            <i class="zmdi zmdi-pin"></i>San Francisco, CA
          </div>
        </div>
        <div class="profile-activity clearfix">
          <div class="pull-left">
            Photos
            <br>
            <span>56</span>
          </div>
          <div class="pull-right">
            Videos
            <br>
            <span>18</span>
          </div>
        </div>
      </div>
    </li>
    <li>
      <a href="#"><i class="zmdi zmdi-view-dashboard"></i>Dashboard<span class="zmdi arrow"></span></a>
      <ul class="nav nav-inside collapse">
        <li class="inside-title">Dashboard</li>
        <li><a href="index.html">Dashboard v1</a></li>
        <li><a href="dashboard-2.html">Dashboard v2</a></li>
        <li><a href="dashboard-3.html">Dashboard v3</a></li>
        <li><a href="dashboard-4.html">Dashboard v4</a></li>
      </ul>
    </li>
    <li>
      <a href="#"><i class="zmdi zmdi-view-compact"></i>Layouts<span class="zmdi arrow"></span></a>
      <ul class="nav nav-inside collapse">
        <li class="inside-title">Layouts</li>
        <li><a href="https://www.51qianduan.com/">51前端</a></li>
        <li><a href="boxed-layout.html">Boxed Layout</a></li>
        <li><a href="fixed-menu-boxed.html">Fixed Menu&Boxed Layout</a></li>
        <li><a href="fixed-sidebar.html">Fixed Sidebar</a></li>
        <li><a href="icon-menu-vertical.html">Vertical Icon Menu</a></li>
        <li><a href="icon-menu-horizontal.html">Horizontal Icon Menu</a></li>
        <li><a href="coming-soon.html">Default Layout</a></li>
      </ul>
    </li>
    <li>
      <a href="#"><i class="zmdi zmdi-google-pages"></i>Pages<span class="zmdi arrow"></span></a>
      <ul class="nav nav-inside collapse">
        <li class="inside-title">Pages</li>
        <li><a href="article.html">Article</a></li>
        <li><a href="coming-soon.html">Coming Soon</a></li>
        <li><a href="confirm-email.html">Confirm Email</a></li>
        <li><a href="contacts.html">Contacts</a></li>     
        <li><a href="faq-page.html">FAQ</a></li>
        <li><a href="file-upload.html">File Upload</a></li>
        <li><a href="idle-timer.html">Idle Timer</a></li>
        <li><a href="image-slider.html">Image Slider</a></li>
        <li><a href="lock-screen.html">Lock Screen</a></li>
        <li><a href="login.html">Login</a></li>
        <li><a href="registration.html">Registration</a></li>
        <li><a href="profile.html">Profile</a></li>
        <li><a href="maps.html">Maps</a></li>
        <li><a href="nestable.html">Nestable Lists</a></li>           
        <li><a href="projects.html">Projects</a></li>             
        <li><a href="resizable-panels.html">Resizable Panels</a></li>
        <li><a href="draggable-panels.html">Draggable panels</a></li>
        <li><a href="search.html">Search Results</a></li>
        <li><a href="tour-page.html">Tour</a></li>
        <li><a href="vote-list.html">Vote list</a></li>
        <li><a href="widgets.html">Widgets</a></li>
      </ul>
    </li>
    <li>
      <a href="#"><i class="zmdi zmdi-flower"></i>UI Kits<span class="zmdi arrow"></span></a>
      <ul class="nav nav-inside collapse">
        <li class="inside-title">UI Kits</li>
        <li><a href="animation.html">Animations</a></li>
        <li><a href="box-shadow.html">Box-shadow</a></li>
        <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
        <li><a href="buttons.html">Buttons</a></li>
        <li><a href="typography.html">Typography</a></li>
        <li><a href="checkboxes-radio.html">Checkboxes & Radio</a></li>
        <li><a href="checkboxes-radio-material.html">Checkboxes & Radio Material</a></li>
        <li><a href="labels-badges.html">Labels & Badges</a></li>
        <li><a href="colors.html">Colors</a></li>
        <li><a href="https://www.51qianduan.com/">51前端</a></li>
        <li><a href="components.html">Components</a></li>
        <li><a href="dropdowns.html">Dropdowns</a></li>
        <li><a href="grids.html">Grids</a></li>        
        <li><a href="media.html">Media</a></li>
        <li><a href="progressbars.html">Progressbars</a></li>
        <li><a href="tabs.html">Tabs</a></li>     
        <li><a href="ui-material-icons.html">Material Icons</a></li>
        <li><a href="ui-cards.html">Ui Cards</a></li>
        <li><a href="ui-treeview.html">Tree View</a></li>
        <li><a href="ui-range-slider.html">Range Slider</a></li> 
      </ul>
    </li>  
    <li>
      <a href="#"><i class="zmdi zmdi-comment-text-alt"></i>Forms<span class="zmdi arrow"></span></a>
      <ul class="nav nav-inside collapse">
        <li class="inside-title">Forms</li>
        <li><a href="form-elements.html">Form Elements</a></li>
        <li><a href="form-elements-material.html">Form Elements Material</a></li>
        <li><a href="https://www.51qianduan.com/">51前端</a></li>
        <li><a href="form-examples.html">Form Examples</a></li>
        <li><a href="form-wizard.html">Form Wizard</a></li>
        <li><a href="form-wysiwig.html">Form Wysiwig</a></li>
        <li><a href="x-editable.html">X-Editable</a></li>
      </ul>
    </li>
    <li>
      <a href="#"><i class="zmdi zmdi-border-all"></i>Tables<span class="zmdi arrow"></span></a>
      <ul class="nav nav-inside collapse">
        <li class="inside-title">Tables</li>
        <li><a href="tables.html">Tables</a></li>
        <li><a href="datatables.html">Data Tables</a></li>
        <li><a href="tables-editable.html">Editable Tables</a></li>
      </ul>
    </li>
    <li>
      <a href="#"><i class="zmdi zmdi-chart"></i>Charts<span class="zmdi arrow"></span></a>
      <ul class="nav nav-inside collapse">
        <li class="inside-title">Charts</li>
        <li><a href="chartjs.html">Chart.js</a></li>
        <li><a href="morrisjs.html">Morris.js</a></li>
        <li><a href="flot-chart.html">Flot Chart</a></li>
      </ul>
    </li>
    <li>
      <a href="#"><i class="zmdi zmdi-money"></i>E-commerce<span class="zmdi arrow"></span></a>
      <ul class="nav nav-inside collapse">
        <li class="inside-title">E-commerce</li>
        <li><a href="cart.html">Cart</a></li>
        <li><a href="clients.html">Clients</a></li>
        <li><a href="create-order.html">Create Order</a></li>
        <li><a href="invoice-list.html">Invoice list</a></li>
        <li><a href="invoice-details.html">Invoice Details</a></li>
        <li><a href="payments.html">Payments</a></li>
        <li><a href="pricing-tables.html">Pricing Tables</a></li>
        <li><a href="products-page.html">Products Page</a></li>
        <li><a href="product-view.html">Product View</a></li>
        <li><a href="search-products.html">Search Products</a></li>
      </ul>
    </li>
    <li>
      <a aria-expanded="false" href="#"><i class="zmdi zmdi-apps"></i>Apps<span class="zmdi arrow"></span></a>
      <ul aria-expanded="false" class="nav nav-inside collapse">
        <li class="inside-title">Apps</li>
        <li><a href="calendar.html">Calendar</a></li>
        <li><a href="chat.html">Chat</a></li>
        <li><a href="file-manager.html">File Manager</a></li>
        <li><a href="issue-list.html">Issue List</a></li>
        <li><a href="timeline.html">Timeline</a></li>
        <li class="menu-child">
          <a aria-expanded="false" href="#"><i class="zmdi zmdi-email"></i>Mailbox<span class="zmdi arrow"></span></a>
          <ul aria-expanded="false" class="nav nav-inside collapse">
            <li class="inside-title">Mailbox</li>
            <li><a href="email-inbox.html">Email Inbox</a></li>
            <li><a href="email-view.html">Email View</a></li>
            <li><a href="https://www.51qianduan.com/">51前端</a></li>
            <li><a href="email-templates.html">Email Templates</a></li>
          </ul>
        </li>
        <li class="menu-child">
          <a aria-expanded="false" href="#"><i class="zmdi zmdi-format-list-numbered"></i>Tasks<span class="zmdi arrow"></span></a>
          <ul aria-expanded="false" class="nav nav-inside collapse">
            <li class="inside-title">Tasks</li>
            <li><a href="task-list.html">Task List</a></li>
            <li><a href="task-detail.html">Task Detail</a></li>
            <li><a href="taskboard.html">Taskboard</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <a href="#"><i class="zmdi zmdi-notifications"></i>Notifications<span class="zmdi arrow"></span></a>
      <ul class="nav nav-inside collapse">
        <li class="inside-title">Notifications</li>
        <li><a href="notifications.html">Notifications</a></li>
        <li><a href="modals.html">Modals</a></li>
        <li><a href="sweet-alerts.html">Sweet-alerts</a></li>
        <li><a href="toastr-notifications.html">Toastr</a></li>
      </ul>
    </li>
    <li>
      <a href="#"><i class="zmdi zmdi-alert-circle"></i>Error pages<span class="zmdi arrow"></span></a>
      <ul class="nav nav-inside collapse">
        <li class="inside-title">Error pages</li>
        <li><a href="400.html">400</a></li>
        <li><a href="401.html">401</a></li>
        <li><a href="403.html">403</a></li>
        <li><a href="404.html">404</a></li>
        <li><a href="500.html">500</a></li>
        <li><a href="503.html">503</a></li>
      </ul>
    </li>
    <li>
      <a href="#"><i class="zmdi zmdi-view-dashboard"></i>Three Level Menu<span class="zmdi arrow"></span></a>
      <ul class="nav nav-inside collapse">
        <li class="inside-title">Level 2</li>
        <li><a href="#">Level 2</a></li>
        <li>
          <a class="third-level" href="#">Level 2<span class="zmdi arrow"></span></a>
          <ul class="nav nav-inside collapse">
            <li class="inside-title">Level 3</li>
            <li><a href="#">Level 3</a></li>
            <li><a href="#">Level 3</a></li>
            <li><a href="#">Level 3</a></li>
          </ul>
        </li>
        <li><a href="#">Level 2</a></li>
        <li><a href="#">Level 2</a></li>
      </ul>
    </li>
    <li>
      <a href="starter-page.html"><i class="zmdi zmdi-copy"></i>Starter Page</a>
    </li>
  </ul>
</aside>
<div class="side-panel">
    <ul class="nav nav-tabs nav-justified m-0">
      <li class="active">
        <a href="#tab-side-1" data-toggle="tab"><i class="zmdi zmdi-comment-text"></i></a>
      </li>
      <li>
        <a href="#tab-side-2" data-toggle="tab"><i class="zmdi zmdi-settings"></i></a>
      </li>
    </ul>
    <div class="tab-content">
      <div class="tab-pane fade in active" id="tab-side-1">
       <div class="side-title">Activities</div>
        <div class="p-15"> 
          <ul class="timeline">
              <li>
                  <div class="timeline-icon primary-bg"><i class="zmdi zmdi-plus"></i></div>
                  <div class="timeline-body">
                      <div class="timeline-header">
                          <span class="author">Jana Pena is now Follwing you</span>
                          <span class="date">2 min ago</span>
                      </div>
                  </div>
              </li>
              <li>
                  <div class="timeline-icon success-bg"><i class="zmdi zmdi-favorite"></i></div>
                  <div class="timeline-body">
                      <div class="timeline-header">
                          <span class="author">Helen likes your photo</span>
                          <span class="date">23 min ago</span>
                      </div>
                  </div>
              </li>
              <li>
                  <div class="timeline-icon warning-bg"><i class="zmdi zmdi-email"></i></div>
                  <div class="timeline-body">
                      <div class="timeline-header">
                          <span class="author">Colin send email</span>
                          <span class="date">34 min ago</span>
                      </div>
                  </div>
              </li>
              <li>
                  <div class="timeline-icon success-bg"><i class="zmdi zmdi-coffee"></i></div>
                  <div class="timeline-body">
                      <div class="timeline-header">
                          <span class="author">Starbucks invites you</span>
                          <span class="date">44 min ago</span>
                      </div>
                  </div>
              </li>
              <li>
                  <div class="timeline-icon info-bg"><i class="zmdi zmdi-videocam"></i></div>
                  <div class="timeline-body">
                      <div class="timeline-header">
                          <span class="author">Peter added new video</span>
                          <span class="date">56 min ago</span>
                      </div>
                  </div>
              </li>
          </ul>
        </div>
          <div class="side-title">Contacts</div>
          <div class="p-15"> 
          <ul class="media-list side-contacts">
              <li class="media notification-message">
                  <div class="media-left">
                      <img class="img-circle avatar" src="img/contacts/3.png" alt="user">
                  </div>
                  <div class="media-body">
                    <span>Katerina Dankovich</span><br>
                      <span class="contact-status text-success">Online</span>
                  </div>
              </li>
              <li class="media notification-message">
                  <div class="media-left">
                      <img class="img-circle avatar" src="img/contacts/4.png" alt="user">
                  </div>
                  <div class="media-body">
                    <span>Helen Doe</span><br>
                      <span class="contact-status text-warning">Away</span>
                  </div>
              </li>
              <li class="media notification-message">
                  <div class="media-left">
                      <img class="img-circle avatar" src="img/contacts/2.png" alt="user">
                  </div>
                  <div class="media-body">
                    <span>Phil Simons</span><br>
                      <span class="contact-status text-success">Online</span>
                  </div>
              </li>
              <li class="media notification-message">
                  <div class="media-left">
                      <img class="img-circle avatar" src="img/contacts/1.png" alt="user">
                  </div>
                  <div class="media-body">
                    <span>Peter Johnson</span><br>
                      <span class="contact-status text-muted">Offline</span>
                  </div>
              </li>
              <li class="media notification-message">
                  <div class="media-left">
                      <img class="img-circle avatar" src="img/contacts/5.png" alt="user">
                  </div>
                  <div class="media-body">
                    <span>Kate Owl</span><br>
                      <span class="contact-status text-danger">Busy</span>
                  </div>
              </li>
          </ul>
        </div>
      </div>
      <div class="tab-pane fade" id="tab-side-2">
         <table class="table table-settings">
            <tbody><tr>
                    <td>
                        <h5>Alerts</h5>
                        <p>Sets alerts to get notified when changes occur to get new alerming items</p>
                    </td>
                    <td><div class="checkbox checkbox-primary">
                        <label><input type="checkbox">
                          <i></i></label>
                      </div></td>
                </tr>
                <tr>
                    <td>
                        <h5>Notifications</h5>
                        <p>You will receive notification email for any notifications if you set notification</p>
                    </td>
                    <td>
                    <div class="checkbox checkbox-primary">
                      <label><input type="checkbox" checked>
                        <i></i></label>
                    </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <h5>Messages</h5>
                        <p>You will receive notification on email after setting messages notifications</p>                            
                    </td>
                    <td>
                    <div class="checkbox checkbox-primary">
                      <label><input type="checkbox">
                        <i></i></label>
                    </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <h5>Warnings</h5>
                        <p>You will get warnning only some specific setttings or alert system</p>
                    </td>
                    <td>
                    <div class="checkbox checkbox-primary">
                      <label><input type="checkbox" checked>
                        <i></i></label>
                    </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <h5>Sidebar</h5>
                        <p>You can hide/show use with sidebar collapsw settings</p>
                    </td>
                    <td>
                    <div class="checkbox checkbox-primary">
                      <label><input type="checkbox" checked>
                        <i></i></label>
                    </div>
                    </td>
                </tr>
        </tbody></table>
      </div>
    </div>
</div>
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12">
          <ol class="breadcrumb breadcrumb-arrow">
            <li><a href="#">Dashboards</a></li>
            <li class="active">Dashboard v1</li>
          </ol>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-12">
          <div class="content-box">
            <div class="head head-with-btns clearfix">
              <h5 class="content-title text-color pull-left">Total sales statistics</h5>
              <div class="functions-btns pull-right">
                <button type="button" class="btn btn-info">
                 Week
                </button>
                <button type="button" class="btn btn-warning">
                 Month
                </button>
                <button type="button" class="btn btn-warning">
                 Year
                </button>
              </div>
            </div>
             <div class="content">
               <div id="js-legend" class="chart-legend"></div>
               <div class="chartjs-container full-page-chart">
                <canvas id="chart-line"></canvas>
               </div>
             </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-3 col-md-6">
          <div class="content-box warning-bg white">
            <div class="head clearfix">
              <h5 class="content-title pull-left">Orders</h5>
              <div class="functions-btns pull-right">
                <a class="refresh-btn" href="#"><i class="zmdi zmdi-refresh"></i></a>
                <a class="fullscreen-btn" href="#"><i class="zmdi zmdi-fullscreen"></i></a>
                <a class="close-btn" href="#"><i class="zmdi zmdi-close"></i></a>
              </div>
            </div>
            <div class="content">
              <div id="line-chart-3" class="flot-chart"></div>
              <p class="text-uppercase zero-m">Total orders</p>
              <p class="zero-m f-30">45,245,659</p>
            </div>
          </div>
        </div>
        <div class="col-lg-3 col-md-6">
          <div class="content-box">
            <div class="head clearfix">
              <h5 class="content-title text-color pull-left">Implementation of a plan</h5>
              <div class="functions-btns pull-right">
                <a href="https://www.51qianduan.com/">51前端</a>
                <a href="https://www.51qianduan.com/">51前端</a>
                <a href="https://www.51qianduan.com/">51前端</a>
              </div>
            </div>
            <div class="p-l-20">
              <button type="button" class="btn btn-info m-b-5">
               Week
              </button>
              <button type="button" class="btn btn-warning m-b-5">
               Month
              </button>
            </div>
            <div class="content">
              <div class="easychart text-right" data-percent="55"></div>
              <div class="p-absolute b-20 l-20">
                <p class="text-uppercase zero-m">Profit</p>
                <p class="zero-m danger-color f-30">254,395</p>
              </div>
            </div>
            <!-- Used for demo purposes. Remove if it is needed-->
            <div class="visible-lg visible-md" style="height: 6px;"></div>
          </div>
        </div>
        <div class="col-lg-3 col-md-6">
          <div class="content-box success-bg white">
            <div class="head clearfix">
              <h5 class="content-title pull-left">Visitors</h5>
              <div class="functions-btns pull-right">
                <a class="refresh-btn" href="#"><i class="zmdi zmdi-refresh"></i></a>
                <a class="fullscreen-btn" href="#"><i class="zmdi zmdi-fullscreen"></i></a>
                <a class="close-btn" href="#"><i class="zmdi zmdi-close"></i></a>
              </div>
            </div>
            <div class="content">
              <div id="line-chart-4" class="flot-chart"></div>
              <p class="text-uppercase zero-m">Total visitors</p>
              <p class="zero-m f-30">15,654,700</p>
            </div>
          </div>
        </div>
        <div class="col-lg-3 col-md-6">
          <div class="content-box info-bg white">
            <div class="head clearfix">
              <h5 class="content-title pull-left">Returns</h5>
              <div class="functions-btns pull-right">
                <a class="refresh-btn" href="#"><i class="zmdi zmdi-refresh"></i></a>
                <a class="fullscreen-btn" href="#"><i class="zmdi zmdi-fullscreen"></i></a>
                <a class="close-btn" href="#"><i class="zmdi zmdi-close"></i></a>
              </div>
            </div>
            <div class="content">
              <div id="line-chart-2" class="flot-chart"></div>
              <p class="text-uppercase zero-m">Total returns</p>
              <p class="zero-m f-30">573,935</p>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6">
          <div class="data-info">
            <table id="table2" class="display widget datatable">
              <thead>
                <tr>
                  <th>Currency</th>
                  <th>Buy</th>
                  <th>Sell</th>
                  <th>Change</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>UAH</td>
                  <td>22.35</td>
                  <td>23.30</td>
          <td><span class="zmdi zmdi-long-arrow-down danger-color f-s-18"></span> -0.26%</td>
                </tr>
                <tr>
                  <td>EUR</td>
                  <td>1.13</td>
                  <td>1.16</td>
          <td><span class="zmdi zmdi-long-arrow-up success-color f-s-18"></span> +0.38%</td>
                </tr>
                <tr>
                  <td>AUD</td>
                  <td>22.35</td>
                  <td>23.30</td>
          <td><span class="zmdi zmdi-long-arrow-up success-color f-s-18"></span> +0.38%</td>
                </tr>
                <tr>
                  <td>JPY</td>
                  <td>32.30</td>
                  <td>33.90</td>
          <td><span class="zmdi zmdi-long-arrow-up success-color f-s-18"></span> +0.38%</td>
                </tr>
                <tr>
                  <td>JPY</td>
                  <td>32.30</td>
                  <td>33.90</td>
          <td><span class="zmdi zmdi-long-arrow-down danger-color f-s-18"></span> -0.26%</td>
                </tr>
                <tr>
                  <td>CAD</td>
                  <td>0.86</td>
                  <td>0.91</td>
          <td><span class="zmdi zmdi-long-arrow-up success-color f-s-18"></span> +0.38%</td>
                </tr>
                <tr>
                  <td>UAH</td>
                  <td>22.35</td>
                  <td>23.30</td>
          <td><span class="zmdi zmdi-long-arrow-up success-color f-s-18"></span> +0.38%</td>
                </tr>
                <tr>
                  <td>EUR</td>
                  <td>1.13</td>
                  <td>1.16</td>
          <td><span class="zmdi zmdi-long-arrow-up success-color f-s-18"></span> +0.38%</td>
                </tr>
                <tr>
                  <td>AUD</td>
                  <td>22.35</td>
                  <td>23.30</td>
          <td><span class="zmdi zmdi-long-arrow-down danger-color f-s-18"></span> -0.26%</td>
                </tr>
                <tr>
                  <td>JPY</td>
                  <td>32.30</td>
                  <td>33.90</td>
          <td><span class="zmdi zmdi-long-arrow-down danger-color f-s-18"></span> -0.26%</td>
                </tr>
                <tr>
                  <td>CAD</td>
                  <td>0.86</td>
                  <td>0.91</td>
          <td><span class="zmdi zmdi-long-arrow-up success-color f-s-18"></span> +0.38%</td>
                </tr>
                <tr>
                  <td>JPY</td>
                  <td>32.30</td>
                  <td>33.90</td>
          <td><span class="zmdi zmdi-long-arrow-down danger-color f-s-18"></span> -0.26%</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="col-md-6">
          <div class="content-box o-hidden">
           <div class="head clearfix">
             <h5 class="content-title text-color pull-left">To do list</h5>
             <div class="functions-btns pull-right">
                <a href="https://www.51qianduan.com/">51前端</a>
                <a href="https://www.51qianduan.com/">51前端</a>
                <a href="https://www.51qianduan.com/">51前端</a>
             </div>
           </div>
            <div class="panel zero-m">
              <div class="panel-body todo">
                <ul class="list-group zero-m">
                  <li class="list-group-item">
                    <div class="checkbox checkbox-alt checkbox-primary">
                      <label>
                        <input type="checkbox">
                        <i></i>
                        Searches
                      </label>
                    </div>
                    <a class="trash pull-right"><span class="zmdi zmdi-close primary-color f-s-16"></span></a>
                  </li>
                  <li class="list-group-item">
                    <div class="checkbox checkbox-alt checkbox-primary">
                      <label>
                        <input type="checkbox">
                        <i></i>
                        Advertising
                      </label>
                    </div>
                    <a class="trash pull-right"><span class="zmdi zmdi-close primary-color f-s-16"></span></a>
                  </li>
                  <li class="list-group-item">
                    <div class="checkbox checkbox-alt checkbox-primary">
                      <label>
                        <input type="checkbox">
                        <i></i>
                        Links
                      </label>
                    </div>
                    <a class="trash pull-right"><span class="zmdi zmdi-close primary-color f-s-16"></span></a>
                  </li>
                  <li class="list-group-item">
                    <div class="checkbox checkbox-alt checkbox-primary">
                      <label>
                        <input type="checkbox">
                        <i></i>
                        Advertising
                      </label>
                    </div>
                    <a class="trash pull-right"><span class="zmdi zmdi-close primary-color f-s-16"></span></a>
                  </li>
                  <li class="list-group-item">
                    <div class="checkbox checkbox-alt checkbox-primary">
                      <label>
                        <input type="checkbox">
                        <i></i>
                        Links
                      </label>
                    </div>
                    <a class="trash pull-right"><span class="zmdi zmdi-close primary-color f-s-16"></span></a>
                  </li>
                  <li class="list-group-item">
                    <div class="checkbox checkbox-alt checkbox-primary">
                      <label>
                        <input type="checkbox">
                        <i></i>
                        Social media
                      </label>
                    </div>
                    <a class="trash pull-right"><span class="zmdi zmdi-close primary-color f-s-16"></span></a>
                  </li>
                  <li class="list-group-item">
                    <div class="checkbox checkbox-alt checkbox-primary">
                      <label>
                        <input type="checkbox">
                        <i></i>
                        Searches
                      </label>
                    </div>
                    <a class="trash pull-right"><span class="zmdi zmdi-close primary-color f-s-16"></span></a>
                  </li>
                  <li class="list-group-item">
                    <div class="checkbox checkbox-alt checkbox-primary">
                      <label>
                        <input type="checkbox">
                        <i></i>
                        Links
                      </label>
                    </div>
                    <a class="trash pull-right"><span class="zmdi zmdi-close primary-color f-s-16"></span></a>
                  </li>
                  <li class="list-group-item">
                    <div class="checkbox checkbox-alt checkbox-primary">
                      <label>
                        <input type="checkbox">
                        <i></i>
                        Links
                      </label>
                    </div>
                    <a class="trash pull-right"><span class="zmdi zmdi-close primary-color f-s-16"></span></a>
                  </li>
                  <li class="list-group-item">
                    <div class="checkbox checkbox-alt checkbox-primary">
                      <label>
                        <input type="checkbox">
                        <i></i>
                        Advertising
                      </label>
                    </div>
                    <a class="trash pull-right"><span class="zmdi zmdi-close primary-color f-s-16"></span></a>
                  </li>
                </ul>
              </div>
            </div>
            <!-- Used for demo purposes. Remove if it is needed-->
            <div class="visible-lg visible-md" style="height: 2px;"></div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-3 col-md-6">
          <div class="content-box p-20 twitter white f-s-16">
            <img src="img/avatar.png" class="pull-left m-r-10" alt="avatar">
            <span class="text-uppercase">John Massey</span>  <br>
            <span class="half-opacity">@john</span>
            <span class="zmdi zmdi-twitter p-absolute t-20 r-20 f-s-20"></span>
            <p class="m-t-20">Yet she income effect edward. Entire desire way design few. Mrs sentiments led solicitude estimating effect edward. Spite mirth money six above get going great own effect edward.</p>
            <div class="socials text-right f-s-20">
              <span class="share half-opacity"><i class="zmdi zmdi-share"></i></span>
              <span class="like half-opacity m-l-10"><i class="zmdi zmdi-thumb-up"></i></span>
            </div>
          </div>
        </div>
        <div class="col-lg-3 col-md-6">
            <div class="content-box p-20 facebook white f-s-16">
              <img src="img/avatar2.png" class="pull-left m-r-10" alt="avatar">
              <span class="text-uppercase">Maria Thompson</span>  <br>
              <span class="half-opacity">@mark</span>
              <span class="zmdi zmdi-facebook p-absolute t-20 r-20 f-s-20"></span>
              <p class="m-t-20">Yet she income effect edward. Entire desire way design few. Mrs sentiments led solicitude estimating effect edward. Spite mirth money six above get going great own effect edward.</p>
              <div class="socials text-right f-s-20">
                <span class="share half-opacity"><i class="zmdi zmdi-share"></i></span>
                <span class="like half-opacity m-l-10"><i class="zmdi zmdi-thumb-up"></i></span>
              </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6">
          <div class="content-box p-20 gplus white f-s-16">
            <img src="img/avatar3.png" class="pull-left m-r-10" alt="avatar">
            <span class="text-uppercase">Nelly Peterson</span>  <br>
            <span class="half-opacity">@alex</span>
            <span class="zmdi zmdi-google-plus p-absolute t-20 r-20 f-s-20"></span>
            <p class="m-t-20">Yet she income effect edward. Entire desire way design few. Mrs sentiments led solicitude estimating effect edward. Spite mirth money six above get going great own effect edward.</p>
            <div class="socials text-right f-s-20">
              <span class="share half-opacity"><i class="zmdi zmdi-share"></i></span>
              <span class="like half-opacity m-l-10"><i class="zmdi zmdi-thumb-up"></i></span>
            </div>
          </div>
        </div>
        <div class="col-lg-3 col-md-6">
          <div class="content-box p-20 soundcloud white f-s-16">
            <img src="img/avatar4.png" class="pull-left m-r-10" alt="avatar">
            <span class="text-uppercase">Jack Daniels</span>  <br>
            <span class="half-opacity">@jack</span>
            <span class="zmdi zmdi-soundcloud p-absolute t-20 r-20 f-s-20"></span>
            <p class="m-t-20">Yet she income effect edward. Entire desire way design few. Mrs sentiments led solicitude estimating effect edward. Spite mirth money six above get going great own effect edward.</p>
            <div class="socials text-right f-s-20">
              <span class="share half-opacity"><i class="zmdi zmdi-share"></i></span>
              <span class="like half-opacity m-l-10"><i class="zmdi zmdi-thumb-up"></i></span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <footer class="page-footer">Copyright &copy; 2018.Company name All rights reserved.<a href="https://www.51qianduan.com/">51前端</a></footer>
  </div>
  <script src="bower_components/jquery/dist/jquery.min.js"></script>
  <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
  <script src="bower_components/metisMenu/dist/metisMenu.min.js"></script>
  <script src="bower_components/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.js"></script>
  <script src="bower_components/Waves/dist/waves.min.js"></script>
  <script src="bower_components/toastr/toastr.js"></script>
  <script src="bower_components/datatables/media/js/jquery.dataTables.min.js"></script>
  <script src="bower_components/datatables.net-responsive/js/dataTables.responsive.js"></script>
  <script src="bower_components/moment/min/moment.min.js"></script>
  <script src="bower_components/Chart.js/Chart.js"></script>
  <script src="bower_components/flot/jquery.flot.js"></script>
  <script src="bower_components/flot/jquery.flot.resize.js"></script>
  <script src="bower_components/flot.tooltip/js/jquery.flot.tooltip.js"></script>
  <script src="bower_components/jquery.easy-pie-chart/dist/jquery.easypiechart.js"></script>
  <script>
    var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
    var lineChartData = {
        labels : ["MONDAY","TUESDAY","WEDNESDAY","THURSDAY","FRIDAY","SATURDAY","SUNDAY"],
        datasets : [
            {
                label: "Mens goods",
                fillColor : "rgba(73, 206, 255, 0.5)",
                strokeColor : "rgba(73, 206, 255, 0.7)",
                pointColor : "rgba(73, 206, 255, 0.9)",
                pointStrokeColor : "#fff",
                pointHighlightFill : "rgba(255, 193, 7, 1)",
                data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
            },
            {
                label: "Women goods",
                fillColor : "rgba(255, 187, 51, 0.5)",
                strokeColor : "rgba(255, 187, 51, 0.7)",
                pointColor : "rgba(255, 187, 51, 0.9)",
                pointStrokeColor : "#fff",
                pointHighlightFill : "rgba(244, 67, 54, 1)",
                data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
            },
            {
                label: "Children goods",
                fillColor : "rgba(153, 204, 0, 0.5)",
                strokeColor : "rgba(153, 204, 0, 0.7)",
                pointColor : "rgba(153, 204, 0, 0.9)",
                pointStrokeColor : "#fff",
                pointHighlightFill : "rgba(33, 150, 243, 1)",
                data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
            }
        ]
    }
  window.onload = function(){
      var ctx = document.getElementById("chart-line").getContext("2d");
      var myLine = new Chart(ctx).Line(lineChartData, {
        scaleShowVerticalLines: false,
//        scaleShowLabels: false,
//        maintainAspectRatio: true,
        datasetStrokeWidth : 6,
        pointDotRadius : 6,
        responsive: true,
        legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].pointColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
      });
      document.getElementById('js-legend').innerHTML = myLine.generateLegend();
  }
  </script>
  <script>
  $(function () {
  /* Make some random data for the Chart*/
      var d1 = [];
      for (var i = 0; i <= 10; i += 1) {
          d1.push([i, parseInt(Math.random() * 100)]);
      }
      var d2 = [];
      for (var i = 0; i <= 10; i += 1) {
          d2.push([i, parseInt(Math.random() * 100)]);
      }
      var d3 = [];
      for (var i = 0; i <= 10; i += 1) {
          d3.push([i, parseInt(Math.random() * 100)]);
      }
      var d4 = [];
      for (var i = 0; i <= 50; i += 1) {
          d4.push([i, parseInt(Math.random() * 100)]);
      }
      /* Chart Options */
      var options = {
          series: {
            shadowSize: 0,
            label: "Qty",
            lines: {
                show: true,
                lineWidth: 2
            },
            points: {
              show: true
            }
          },
          grid: {
            margin: 10,
            show: false,
            hoverable: true,
            clickable: true
          },
          yaxis: {
              max: 100,
              min: 0
          },
          legend: {
            show: false
          },
          tooltip: {
            show: true,
            cssClass: "flot-tooltip",
            defaultTheme: false,
            content: '%y.2',
            shifts: {
                x: 1,
                y: -45
            }
          }
      };
      var options2 = {
          series: {
            shadowSize: 5,
            label: "Qty",
            lines: {
                show: true,
                lineWidth: 2
            }
          },
          grid: {
            margin: 10,
            show: false,
            hoverable: true,
            clickable: false
          },
          legend: {
            show: false
          },
          tooltip: {
            show: true,
            cssClass: "flot-tooltip",
            defaultTheme: false,
            content: '%y.2',
            shifts: {
                x: 1,
                y: -45
            }
          }
      };
      /* Let's create the chart */
     if ($("#line-chart-2")[0]) {
          $.plot($("#line-chart-2"), [
              {data: d2, color: '#fff' }
          ], options);
      }
      if ($("#line-chart-3")[0]) {
          $.plot($("#line-chart-3"), [
              {data: d3, color: '#fff' }
          ], options);
      }
      if ($("#line-chart-4")[0]) {
          $.plot($("#line-chart-4"), [
              {data: d4, color: '#fff' }
          ], options2);
      }
  });
  </script>
  <script>
  $(function() {
      $('.easychart').easyPieChart({
        barColor: "#F44336",
        trackColor: '#cccccc',
        size: 115,
        lineWidth: 15,
        scaleLength: 0
      });
  });
  </script>
    <script>
    $('#table2').DataTable({
     "dom": '<"toolbar tool2">rtip',
      info: false,
      paging: false,
      responsive: true,
    });
    $("div.tool2").css("padding", "7px 20px").html('<h5 class="content-title">Exchange rates</h5>');
    //Todo
    $(document).on('mouseover', '.list-group .checkbox', function () {
      $('.list-group input:checkbox').each(function () {
        $(this).on("change", function () {
          if ($(this).is(":checked")) {
            $(this).closest(".list-group-item").addClass("checked-todo").removeClass("list-item");
          } else {
            $(this).closest(".list-group-item").removeClass("checked-todo");
          }
        });
      });
    });
    $(document).on('click', '.trash', function (e) {
      var clearedCompItem = $(this).closest(".list-group-item").remove();
      e.preventDefault();
    });
    //Social widget
    $('.socials span').on('click', function() {
        $(this).toggleClass("half-opacity");
    });
  </script>
    <script src="js/common.js"></script>

用户评论

18素材网

一个让开发更高效的素材分享平台,用于快速开发强大的Web界面。


官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:864918708
Css3+Html5讨论群
群号:864918708

加群请备注:从官网了解到