表格格式

  1. 首頁
  2. 示範Demo

表格上方thead格式

標題一 標題二 標題三 標題四 標題五
<table class="table table-bordered table-hover">
<thead>
<tr class="title">
<th>標題一</th>
<th>標題二</th>
<th>標題三</th>
<th>標題四</th>
<th>標題五</th>
</tr>
</thead>

表格內容格式

標題一資料 標題二資料 標題三資料 標題四資料 標題五資料
標題一資料 標題二資料 標題三資料 標題四資料 標題五資料
<tbody id="">
<tr>
<td>標題一資料</th>
<td>標題二資料</th>
<td>標題三資料</th>
<td>標題四資料</th>
<td>標題五資料</th>
</tr>
<tr>
<td>標題一資料</th>
<td>標題二資料</th>
<td>標題三資料</th>
<td>標題四資料</th>
<td>標題五資料</th>
</tr>
</tbody>

無資料格式

標題一 標題二 標題三 標題四 標題五
目前無任何資料
<tr id="" class="tr-empty">
<td colspan="總欄數">
<i class="icon icons-emoticons-32"><i>
目前無任何資料
</td>
</tr>

資料讀取中格式

標題一 標題二 標題三 標題四 標題五
資料讀取中...
<tr id="" class="tr-loading">
<td colspan="總欄數">
<div class="loading-box">
<div class="circle">
<div></div>
</div>
<span class="txt">"資料讀取中..."</span>
</div>
</td>
</tr>

彈跳視窗

目標名稱

標題一 標題二 標題三 標題四
資料一 資料二 資料三 資料四

將想要開啟彈跳視窗的按鈕或連結中加上 data-toggle="modal" 及 data-target="目標ID"

<td><a data-toggle="modal" data-target="目標ID"></a></td>

目標ID與下方最外層之id名稱對應

<div class="modal fade" id="目標ID" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header bg-dark">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="icons-office-52"></i></button>
<h4 class="modal-title"><strong id="">目標名稱</strong></h4>
</div>
<div class="modal-body">
<table class="table table-hover">
..上方表格格式..
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-embossed" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

pagination頁碼

li之class屬性加上active可將欄位變成灰色

<div class="col-lg-12 pagesCenter">
<ul class="pageination">
<li><a href="#">第1頁</a></li>
<li><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">...</a></li>
<li><a href="#">»</a></li>
<li><a href="#">尾頁</a></li>
</ul>
</div>