github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity
AdminLTE/pages/tables/simple.html

854 lines
33 KiB
HTML
Raw Normal View History

Redesign Redesigned from top to bottom
2014-02-01 15:49:36 +00:00
<!DOCTYPE html>
<html>
Reformat code
2015-09-19 18:05:54 +00:00
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Update adminlte version
2016-10-22 19:32:28 +00:00
<title>AdminLTE 3 | Simple Tables</title>
Reformat code
2015-09-19 18:05:54 +00:00
<!-- Tell the browser to be responsive to screen width -->
Dev release
2018-03-17 17:07:55 +00:00
<meta name="viewport" content="width=device-width, initial-scale=1">
Reformat code
2015-09-19 18:05:54 +00:00
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- Theme style -->
Dev release
2018-03-17 17:07:55 +00:00
<link rel="stylesheet" href="../../dist/css/adminlte.min.css">
<!-- Google Font: Source Sans Pro -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
Reformat code
2015-09-19 18:05:54 +00:00
</head>
Dev release
2018-03-17 17:07:55 +00:00
<body class="hold-transition sidebar-mini">
Reformat code
2015-09-19 18:05:54 +00:00
<div class="wrapper">
Dev release
2018-03-17 17:07:55 +00:00
<!-- Navbar -->
<nav class="main-header navbar navbar-expand bg-white navbar-light border-bottom">
<!-- Left navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#"><i class="fa fa-bars"></i></a>
</li>
<li class="nav-item d-none d-sm-inline-block">
<a href="../../index3.html" class="nav-link">Home</a>
</li>
<li class="nav-item d-none d-sm-inline-block">
<a href="#" class="nav-link">Contact</a>
</li>
</ul>
<!-- SEARCH FORM -->
<form class="form-inline ml-3">
<div class="input-group input-group-sm">
<input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-navbar" type="submit">
<i class="fa fa-search"></i>
</button>
</div>
</div>
</form>
Reformat code
2015-09-19 18:05:54 +00:00
Dev release
2018-03-17 17:07:55 +00:00
<!-- Right navbar links -->
<ul class="navbar-nav ml-auto">
<!-- Messages Dropdown Menu -->
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="fa fa-comments-o"></i>
<span class="badge badge-danger navbar-badge">3</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<img src="../../dist/img/user1-128x128.jpg" alt="User Avatar" class="img-size-50 mr-3 img-circle">
<div class="media-body">
<h3 class="dropdown-item-title">
Brad Diesel
<span class="float-right text-sm text-danger"><i class="fa fa-star"></i></span>
</h3>
<p class="text-sm">Call me whenever you can...</p>
<p class="text-sm text-muted"><i class="fa fa-clock-o mr-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<img src="../../dist/img/user8-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
<div class="media-body">
<h3 class="dropdown-item-title">
John Pierce
<span class="float-right text-sm text-muted"><i class="fa fa-star"></i></span>
</h3>
<p class="text-sm">I got your message bro</p>
<p class="text-sm text-muted"><i class="fa fa-clock-o mr-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<img src="../../dist/img/user3-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
<div class="media-body">
<h3 class="dropdown-item-title">
Nora Silvester
<span class="float-right text-sm text-warning"><i class="fa fa-star"></i></span>
</h3>
<p class="text-sm">The subject goes here</p>
<p class="text-sm text-muted"><i class="fa fa-clock-o mr-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
</div>
</li>
<!-- Notifications Dropdown Menu -->
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="fa fa-bell-o"></i>
<span class="badge badge-warning navbar-badge">15</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<span class="dropdown-item dropdown-header">15 Notifications</span>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
Add demo functions
2018-04-23 00:08:03 +00:00
<i class="fa fa-envelope mr-2"></i> 4 new messages
Dev release
2018-03-17 17:07:55 +00:00
<span class="float-right text-muted text-sm">3 mins</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
Add demo functions
2018-04-23 00:08:03 +00:00
<i class="fa fa-users mr-2"></i> 8 friend requests
Dev release
2018-03-17 17:07:55 +00:00
<span class="float-right text-muted text-sm">12 hours</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
Add demo functions
2018-04-23 00:08:03 +00:00
<i class="fa fa-file mr-2"></i> 3 new reports
Dev release
2018-03-17 17:07:55 +00:00
<span class="float-right text-muted text-sm">2 days</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#">
<i class="fa fa-th-large"></i>
</a>
</li>
</ul>
</nav>
<!-- /.navbar -->
<!-- Main Sidebar Container -->
<aside class="main-sidebar sidebar-dark-primary elevation-4">
<!-- Brand Logo -->
<a href="../../index3.html" class="brand-link">
<img src="../../dist/img/AdminLTELogo.png"
alt="AdminLTE Logo"
class="brand-image img-circle elevation-3"
style="opacity: .8">
<span class="brand-text font-weight-light">AdminLTE 3</span>
Reformat code
2015-09-19 18:05:54 +00:00
</a>
Dev release
2018-03-17 17:07:55 +00:00
<!-- Sidebar -->
Add demo functions
2018-04-23 00:08:03 +00:00
<div class="sidebar">
Dev release
2018-03-17 17:07:55 +00:00
<!-- Sidebar user (optional) -->
<div class="user-panel mt-3 pb-3 mb-3 d-flex">
<div class="image">
<img src="../../dist/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image">
</div>
<div class="info">
<a href="#" class="d-block">Alexander Pierce</a>
</div>
</div>
<!-- Sidebar Menu -->
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<!-- Add icons to the links using the .nav-icon class
with font-awesome or any other icon font library -->
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-dashboard"></i>
<p>
Dashboard
<i class="right fa fa-angle-left"></i>
</p>
Reformat code
2015-09-19 18:05:54 +00:00
</a>
Dev release
2018-03-17 17:07:55 +00:00
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../../index.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Dashboard v1</p>
</a>
</li>
<li class="nav-item">
<a href="../../index2.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Dashboard v2</p>
</a>
</li>
<li class="nav-item">
<a href="../../index3.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Dashboard v3</p>
</a>
AdminLTE 2.0 alpha
2015-02-01 21:25:09 +00:00
</li>
Reformat code
2015-09-19 18:05:54 +00:00
</ul>
</li>
Dev release
2018-03-17 17:07:55 +00:00
<li class="nav-item">
<a href="../widgets.html" class="nav-link">
<i class="nav-icon fa fa-th"></i>
<p>
Widgets
<span class="right badge badge-danger">New</span>
</p>
Reformat code
2015-09-19 18:05:54 +00:00
</a>
Dev release
2018-03-17 17:07:55 +00:00
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-pie-chart"></i>
<p>
Charts
<i class="right fa fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../charts/chartjs.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>ChartJS</p>
</a>
</li>
<li class="nav-item">
<a href="../charts/flot.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Flot</p>
</a>
</li>
<li class="nav-item">
<a href="../charts/inline.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Inline</p>
</a>
AdminLTE 2.0 alpha
2015-02-01 21:25:09 +00:00
</li>
Reformat code
2015-09-19 18:05:54 +00:00
</ul>
</li>
Dev release
2018-03-17 17:07:55 +00:00
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-tree"></i>
<p>
UI Elements
<i class="fa fa-angle-left right"></i>
</p>
Reformat code
2015-09-19 18:05:54 +00:00
</a>
Dev release
2018-03-17 17:07:55 +00:00
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../UI/general.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>General</p>
</a>
</li>
<li class="nav-item">
<a href="../UI/icons.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Icons</p>
</a>
AdminLTE 2.0 alpha
2015-02-01 21:25:09 +00:00
</li>
Dev release
2018-03-17 17:07:55 +00:00
<li class="nav-item">
<a href="../UI/buttons.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Buttons</p>
</a>
</li>
<li class="nav-item">
<a href="../UI/sliders.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Sliders</p>
</a>
Added control sidebar to all pages
2015-04-04 01:19:55 +00:00
</li>
AdminLTE 2.0 alpha
2015-02-01 21:25:09 +00:00
</ul>
Reformat code
2015-09-19 18:05:54 +00:00
</li>
Dev release
2018-03-17 17:07:55 +00:00
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-edit"></i>
<p>
Forms
<i class="fa fa-angle-left right"></i>
</p>
Reformat code
2015-09-19 18:05:54 +00:00
</a>
Dev release
2018-03-17 17:07:55 +00:00
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../forms/general.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>General Elements</p>
</a>
Reformat code
2015-09-19 18:05:54 +00:00
</li>
Dev release
2018-03-17 17:07:55 +00:00
<li class="nav-item">
<a href="../forms/advanced.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Advanced Elements</p>
</a>
Reformat code
2015-09-19 18:05:54 +00:00
</li>
Dev release
2018-03-17 17:07:55 +00:00
<li class="nav-item">
<a href="../forms/editors.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Editors</p>
</a>
Reformat code
2015-09-19 18:05:54 +00:00
</li>
</ul>
</li>
Dev release
2018-03-17 17:07:55 +00:00
<li class="nav-item has-treeview menu-open">
<a href="#" class="nav-link active">
<i class="nav-icon fa fa-table"></i>
<p>
Tables
<i class="fa fa-angle-left right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../tables/simple.html" class="nav-link active">
<i class="fa fa-circle-o nav-icon"></i>
<p>Simple Tables</p>
</a>
</li>
<li class="nav-item">
<a href="../tables/data.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Data Tables</p>
</a>
</li>
</ul>
</li>
<li class="nav-header">EXAMPLES</li>
<li class="nav-item">
<a href="../calendar.html" class="nav-link">
<i class="nav-icon fa fa-calendar"></i>
<p>
Calendar
<span class="badge badge-info right">2</span>
</p>
</a>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-envelope-o"></i>
<p>
Mailbox
<i class="fa fa-angle-left right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../mailbox/mailbox.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Inbox</p>
</a>
</li>
<li class="nav-item">
<a href="../mailbox/compose.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Compose</p>
</a>
</li>
<li class="nav-item">
<a href="../mailbox/read-mail.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Read</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-book"></i>
<p>
Pages
<i class="fa fa-angle-left right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../examples/invoice.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Invoice</p>
</a>
</li>
<li class="nav-item">
<a href="../examples/profile.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Profile</p>
</a>
</li>
<li class="nav-item">
<a href="../examples/login.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Login</p>
</a>
</li>
<li class="nav-item">
<a href="../examples/register.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Register</p>
</a>
</li>
<li class="nav-item">
<a href="../examples/lockscreen.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Lockscreen</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-plus-square-o"></i>
<p>
Extras
<i class="fa fa-angle-left right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../examples/404.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Error 404</p>
</a>
</li>
<li class="nav-item">
<a href="../examples/500.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Error 500</p>
</a>
</li>
<li class="nav-item">
<a href="../examples/blank.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Blank Page</p>
</a>
</li>
<li class="nav-item">
<a href="../../starter.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Starter Page</p>
</a>
</li>
</ul>
</li>
<li class="nav-header">MISCELLANEOUS</li>
<li class="nav-item">
<a href="https://adminlte.io/docs" class="nav-link">
<i class="nav-icon fa fa-file"></i>
<p>Documentation</p>
</a>
</li>
<li class="nav-header">LABELS</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-circle-o text-danger"></i>
<p class="text">Important</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-circle-o text-warning"></i>
<p>Warning</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-circle-o text-info"></i>
<p>Informational</p>
</a>
Reformat code
2015-09-19 18:05:54 +00:00
</li>
</ul>
Dev release
2018-03-17 17:07:55 +00:00
</nav>
<!-- /.sidebar-menu -->
</div>
Reformat code
2015-09-19 18:05:54 +00:00
<!-- /.sidebar -->
</aside>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
Dev release
2018-03-17 17:07:55 +00:00
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1>Simple Tables</h1>
</div>
<div class="col-sm-6">
<ol class="breadcrumb float-sm-right">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active">Simple Tables</li>
</ol>
</div>
</div>
</div><!-- /.container-fluid -->
Reformat code
2015-09-19 18:05:54 +00:00
</section>
<!-- Main content -->
<section class="content">
Dev release
2018-03-17 17:07:55 +00:00
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h3 class="card-title">Bordered Table</h3>
</div>
<!-- /.card-header -->
<div class="card-body">
<table class="table table-bordered">
<tr>
<th style="width: 10px">#</th>
<th>Task</th>
<th>Progress</th>
<th style="width: 40px">Label</th>
</tr>
<tr>
<td>1.</td>
<td>Update software</td>
<td>
<div class="progress progress-xs">
<div class="progress-bar progress-bar-danger" style="width: 55%"></div>
</div>
</td>
<td><span class="badge bg-danger">55%</span></td>
</tr>
<tr>
<td>2.</td>
<td>Clean database</td>
<td>
<div class="progress progress-xs">
<div class="progress-bar bg-warning" style="width: 70%"></div>
</div>
</td>
<td><span class="badge bg-warning">70%</span></td>
</tr>
<tr>
<td>3.</td>
<td>Cron job running</td>
<td>
<div class="progress progress-xs progress-striped active">
<div class="progress-bar bg-primary" style="width: 30%"></div>
</div>
</td>
<td><span class="badge bg-primary">30%</span></td>
</tr>
<tr>
<td>4.</td>
<td>Fix and squish bugs</td>
<td>
<div class="progress progress-xs progress-striped active">
<div class="progress-bar bg-success" style="width: 90%"></div>
</div>
</td>
<td><span class="badge bg-success">90%</span></td>
</tr>
</table>
</div>
<!-- /.card-body -->
<div class="card-footer clearfix">
<ul class="pagination pagination-sm m-0 float-right">
Fix data table
2018-03-30 18:19:28 +00:00
<li class="page-item"><a class="page-link" href="#">&laquo;</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">&raquo;</a></li>
Reformat code
2015-09-19 18:05:54 +00:00
</ul>
</div>
</div>
Dev release
2018-03-17 17:07:55 +00:00
<!-- /.card -->
<div class="card">
<div class="card-header">
<h3 class="card-title">Condensed Full Width Table</h3>
</div>
<!-- /.card-header -->
<div class="card-body p-0">
<table class="table table-condensed">
<tr>
<th style="width: 10px">#</th>
<th>Task</th>
<th>Progress</th>
<th style="width: 40px">Label</th>
</tr>
<tr>
<td>1.</td>
<td>Update software</td>
<td>
<div class="progress progress-xs">
<div class="progress-bar progress-bar-danger" style="width: 55%"></div>
</div>
</td>
<td><span class="badge bg-danger">55%</span></td>
</tr>
<tr>
<td>2.</td>
<td>Clean database</td>
<td>
<div class="progress progress-xs">
<div class="progress-bar bg-warning" style="width: 70%"></div>
</div>
</td>
<td><span class="badge bg-warning">70%</span></td>
</tr>
<tr>
<td>3.</td>
<td>Cron job running</td>
<td>
<div class="progress progress-xs progress-striped active">
<div class="progress-bar bg-primary" style="width: 30%"></div>
</div>
</td>
<td><span class="badge bg-primary">30%</span></td>
</tr>
<tr>
<td>4.</td>
<td>Fix and squish bugs</td>
<td>
<div class="progress progress-xs progress-striped active">
<div class="progress-bar bg-success" style="width: 90%"></div>
</div>
</td>
<td><span class="badge bg-success">90%</span></td>
</tr>
</table>
</div>
<!-- /.card-body -->
Reformat code
2015-09-19 18:05:54 +00:00
</div>
Dev release
2018-03-17 17:07:55 +00:00
<!-- /.card -->
Reformat code
2015-09-19 18:05:54 +00:00
</div>
Dev release
2018-03-17 17:07:55 +00:00
<!-- /.col -->
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h3 class="card-title">Simple Full Width Table</h3>
Reformat code
2015-09-19 18:05:54 +00:00
Dev release
2018-03-17 17:07:55 +00:00
<div class="card-tools">
<ul class="pagination pagination-sm m-0 float-right">
Fix data table
2018-03-30 18:19:28 +00:00
<li class="page-item"><a class="page-link" href="#">&laquo;</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">&raquo;</a></li>
Dev release
2018-03-17 17:07:55 +00:00
</ul>
</div>
</div>
<!-- /.card-header -->
<div class="card-body p-0">
<table class="table">
<tr>
<th style="width: 10px">#</th>
<th>Task</th>
<th>Progress</th>
<th style="width: 40px">Label</th>
</tr>
<tr>
<td>1.</td>
<td>Update software</td>
<td>
<div class="progress progress-xs">
<div class="progress-bar progress-bar-danger" style="width: 55%"></div>
</div>
</td>
<td><span class="badge bg-danger">55%</span></td>
</tr>
<tr>
<td>2.</td>
<td>Clean database</td>
<td>
<div class="progress progress-xs">
<div class="progress-bar bg-warning" style="width: 70%"></div>
</div>
</td>
<td><span class="badge bg-warning">70%</span></td>
</tr>
<tr>
<td>3.</td>
<td>Cron job running</td>
<td>
<div class="progress progress-xs progress-striped active">
<div class="progress-bar bg-primary" style="width: 30%"></div>
</div>
</td>
<td><span class="badge bg-primary">30%</span></td>
</tr>
<tr>
<td>4.</td>
<td>Fix and squish bugs</td>
<td>
<div class="progress progress-xs progress-striped active">
<div class="progress-bar bg-success" style="width: 90%"></div>
</div>
</td>
<td><span class="badge bg-success">90%</span></td>
</tr>
</table>
</div>
<!-- /.card-body -->
Reformat code
2015-09-19 18:05:54 +00:00
</div>
Dev release
2018-03-17 17:07:55 +00:00
<!-- /.card -->
<div class="card">
<div class="card-header">
<h3 class="card-title">Striped Full Width Table</h3>
</div>
<!-- /.card-header -->
<div class="card-body p-0">
<table class="table table-striped">
<tr>
<th style="width: 10px">#</th>
<th>Task</th>
<th>Progress</th>
<th style="width: 40px">Label</th>
</tr>
<tr>
<td>1.</td>
<td>Update software</td>
<td>
<div class="progress progress-xs">
<div class="progress-bar progress-bar-danger" style="width: 55%"></div>
</div>
</td>
<td><span class="badge bg-danger">55%</span></td>
</tr>
<tr>
<td>2.</td>
<td>Clean database</td>
<td>
<div class="progress progress-xs">
<div class="progress-bar bg-warning" style="width: 70%"></div>
</div>
</td>
<td><span class="badge bg-warning">70%</span></td>
</tr>
<tr>
<td>3.</td>
<td>Cron job running</td>
<td>
<div class="progress progress-xs progress-striped active">
<div class="progress-bar bg-primary" style="width: 30%"></div>
</div>
</td>
<td><span class="badge bg-primary">30%</span></td>
</tr>
<tr>
<td>4.</td>
<td>Fix and squish bugs</td>
<td>
<div class="progress progress-xs progress-striped active">
<div class="progress-bar bg-success" style="width: 90%"></div>
</div>
</td>
<td><span class="badge bg-success">90%</span></td>
</tr>
</table>
</div>
<!-- /.card-body -->
Reformat code
2015-09-19 18:05:54 +00:00
</div>
Dev release
2018-03-17 17:07:55 +00:00
<!-- /.card -->
Reformat code
2015-09-19 18:05:54 +00:00
</div>
Dev release
2018-03-17 17:07:55 +00:00
<!-- /.col -->
Reformat code
2015-09-19 18:05:54 +00:00
</div>
Dev release
2018-03-17 17:07:55 +00:00
<!-- /.row -->
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">Responsive Hover Table</h3>
<div class="card-tools">
<div class="input-group input-group-sm" style="width: 150px;">
<input type="text" name="table_search" class="form-control float-right" placeholder="Search">
<div class="input-group-append">
<button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
</div>
AdminLTE 2.0 alpha
2015-02-01 21:25:09 +00:00
</div>
Reformat code
2015-09-19 18:05:54 +00:00
</div>
</div>
Dev release
2018-03-17 17:07:55 +00:00
<!-- /.card-header -->
<div class="card-body table-responsive p-0">
<table class="table table-hover">
<tr>
<th>ID</th>
<th>User</th>
<th>Date</th>
<th>Status</th>
<th>Reason</th>
</tr>
<tr>
<td>183</td>
<td>John Doe</td>
<td>11-7-2014</td>
<td><span class="tag tag-success">Approved</span></td>
<td>Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.</td>
</tr>
<tr>
<td>219</td>
<td>Alexander Pierce</td>
<td>11-7-2014</td>
<td><span class="tag tag-warning">Pending</span></td>
<td>Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.</td>
</tr>
<tr>
<td>657</td>
<td>Bob Doe</td>
<td>11-7-2014</td>
<td><span class="tag tag-primary">Approved</span></td>
<td>Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.</td>
</tr>
<tr>
<td>175</td>
<td>Mike Doe</td>
<td>11-7-2014</td>
<td><span class="tag tag-danger">Denied</span></td>
<td>Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.</td>
</tr>
</table>
</div>
<!-- /.card-body -->
Reformat code
2015-09-19 18:05:54 +00:00
</div>
Dev release
2018-03-17 17:07:55 +00:00
<!-- /.card -->
AdminLTE 2.0 alpha
2015-02-01 21:25:09 +00:00
</div>
Dev release
2018-03-17 17:07:55 +00:00
</div><!-- /.row -->
</div><!-- /.container-fluid -->
Reformat code
2015-09-19 18:05:54 +00:00
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<footer class="main-footer">
Dev release
2018-03-17 17:07:55 +00:00
<div class="float-right d-none d-sm-block">
<b>Version</b> 3.0.0-alpha
Reformat code
2015-09-19 18:05:54 +00:00
</div>
Dev release
2018-03-17 17:07:55 +00:00
<strong>Copyright &copy; 2014-2018 <a href="http://adminlte.io">AdminLTE.io</a>.</strong> All rights
Reformat code
2015-09-19 18:05:54 +00:00
reserved.
</footer>
<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
Add control sidebar
2018-04-14 23:33:53 +00:00
<!-- Control sidebar content goes here -->
Reformat code
2015-09-19 18:05:54 +00:00
</aside>
<!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->
Dev release
2018-03-17 17:07:55 +00:00
<!-- jQuery -->
<script src="../../plugins/jquery/jquery.min.js"></script>
Add webpack
2018-02-03 23:45:19 +00:00
<!-- Bootstrap 4 -->
Dev release
2018-03-17 17:07:55 +00:00
<script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
Reformat code
2015-09-19 18:05:54 +00:00
<!-- Slimscroll -->
<script src="../../plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
Fixes #688 Loading the minified version of fastclick doesn't work. My guess is that the FastClick object gets renamed in the minification process, making the check for "typeOf FastClick" useless and causing FastClick to never execute. Loading the unminified version of fastclick removes the 300ms click delay across the board.
2015-10-05 18:52:17 +00:00
<script src="../../plugins/fastclick/fastclick.js"></script>
Reformat code
2015-09-19 18:05:54 +00:00
<!-- AdminLTE App -->
Dev release
2018-03-17 17:07:55 +00:00
<script src="../../dist/js/adminlte.min.js"></script>
Reformat code
2015-09-19 18:05:54 +00:00
<!-- AdminLTE for demo purposes -->
<script src="../../dist/js/demo.js"></script>
</body>
Fixed demo.js link errors
2014-07-03 16:05:05 +00:00
</html>