~yuanhung/xdashangular.git

			@@ -0,0 +1,340 @@
			<!-- Content Header (Page header) -->
			<section class="content-header">
			<h1>
			Simple Tables
			<small>preview of simple tables</small>
			</h1>
			<ol class="breadcrumb">
			<li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
			<li><a href="#">Tables</a></li>
			<li class="active">Simple</li>
			</ol>
			</section>

			<!-- Main content -->
			<section class="content">
			<div class="row">
			<div class="col-md-6">
			<div class="box">
			<div class="box-header with-border">
			<h3 class="box-title">Bordered Table</h3>
			</div>
			<!-- /.box-header -->
			<div class="box-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-red">55%</span></td>
			</tr>
			<tr>
			<td>2.</td>
			<td>Clean database</td>
			<td>
			<div class="progress progress-xs">
			<div class="progress-bar progress-bar-yellow" style="width: 70%"></div>
			</div>
			</td>
			<td><span class="badge bg-yellow">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 progress-bar-primary" style="width: 30%"></div>
			</div>
			</td>
			<td><span class="badge bg-light-blue">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 progress-bar-success" style="width: 90%"></div>
			</div>
			</td>
			<td><span class="badge bg-green">90%</span></td>
			</tr>
			</table>
			</div>
			<!-- /.box-body -->
			<div class="box-footer clearfix">
			<ul class="pagination pagination-sm no-margin pull-right">
			<li><a href="#">«</a></li>
			<li><a href="#">1</a></li>
			<li><a href="#">2</a></li>
			<li><a href="#">3</a></li>
			<li><a href="#">»</a></li>
			</ul>
			</div>
			</div>
			<!-- /.box -->

			<div class="box">
			<div class="box-header">
			<h3 class="box-title">Condensed Full Width Table</h3>
			</div>
			<!-- /.box-header -->
			<div class="box-body no-padding">
			<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-red">55%</span></td>
			</tr>
			<tr>
			<td>2.</td>
			<td>Clean database</td>
			<td>
			<div class="progress progress-xs">
			<div class="progress-bar progress-bar-yellow" style="width: 70%"></div>
			</div>
			</td>
			<td><span class="badge bg-yellow">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 progress-bar-primary" style="width: 30%"></div>
			</div>
			</td>
			<td><span class="badge bg-light-blue">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 progress-bar-success" style="width: 90%"></div>
			</div>
			</td>
			<td><span class="badge bg-green">90%</span></td>
			</tr>
			</table>
			</div>
			<!-- /.box-body -->
			</div>
			<!-- /.box -->
			</div>
			<!-- /.col -->
			<div class="col-md-6">
			<div class="box">
			<div class="box-header">
			<h3 class="box-title">Simple Full Width Table</h3>

			<div class="box-tools">
			<ul class="pagination pagination-sm no-margin pull-right">
			<li><a href="#">«</a></li>
			<li><a href="#">1</a></li>
			<li><a href="#">2</a></li>
			<li><a href="#">3</a></li>
			<li><a href="#">»</a></li>
			</ul>
			</div>
			</div>
			<!-- /.box-header -->
			<div class="box-body no-padding">
			<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-red">55%</span></td>
			</tr>
			<tr>
			<td>2.</td>
			<td>Clean database</td>
			<td>
			<div class="progress progress-xs">
			<div class="progress-bar progress-bar-yellow" style="width: 70%"></div>
			</div>
			</td>
			<td><span class="badge bg-yellow">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 progress-bar-primary" style="width: 30%"></div>
			</div>
			</td>
			<td><span class="badge bg-light-blue">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 progress-bar-success" style="width: 90%"></div>
			</div>
			</td>
			<td><span class="badge bg-green">90%</span></td>
			</tr>
			</table>
			</div>
			<!-- /.box-body -->
			</div>
			<!-- /.box -->

			<div class="box">
			<div class="box-header">
			<h3 class="box-title">Striped Full Width Table</h3>
			</div>
			<!-- /.box-header -->
			<div class="box-body no-padding">
			<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-red">55%</span></td>
			</tr>
			<tr>
			<td>2.</td>
			<td>Clean database</td>
			<td>
			<div class="progress progress-xs">
			<div class="progress-bar progress-bar-yellow" style="width: 70%"></div>
			</div>
			</td>
			<td><span class="badge bg-yellow">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 progress-bar-primary" style="width: 30%"></div>
			</div>
			</td>
			<td><span class="badge bg-light-blue">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 progress-bar-success" style="width: 90%"></div>
			</div>
			</td>
			<td><span class="badge bg-green">90%</span></td>
			</tr>
			</table>
			</div>
			<!-- /.box-body -->
			</div>
			<!-- /.box -->
			</div>
			<!-- /.col -->
			</div>
			<!-- /.row -->
			<div class="row">
			<div class="col-xs-12">
			<div class="box">
			<div class="box-header">
			<h3 class="box-title">Responsive Hover Table</h3>

			<div class="box-tools">
			<div class="input-group input-group-sm" style="width: 150px;">
			<input type="text" name="table_search" class="form-control pull-right" placeholder="Search">

			<div class="input-group-btn">
			<button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
			</div>
			</div>
			</div>
			</div>
			<!-- /.box-header -->
			<div class="box-body table-responsive no-padding">
			<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="label label-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="label label-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="label label-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="label label-danger">Denied</span></td>
			<td>Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.</td>
			</tr>
			</table>
			</div>
			<!-- /.box-body -->
			</div>
			<!-- /.box -->
			</div>
			</div>
			</section>
			<!-- /.content -->