bootstrap panel 和table的使用

一、HTML中的页面内容

<div class="col-sm-12">
　　<!-- <div class="m-b-md" style="text-align:'center'">
　　<h3 id="task_statistic">得分统计</h3>
　　</div> -->
　　<div class="panel panel-default">
　　　　<div class="panel-heading">
　　　　　　<h3 class="panel-title">得分统计</h3>
　　　　</div>
　　　　<div class="panel-body">

<！--table类下的table-hover，是鼠标经过的样式-->
　　　　　　<table class="table table-hover ">
　　　　　　　　<thead>
　　　　　　　　　　<tr >
　　　　　　　　　　　　<th class="panel-title">人物</th>
　　　　　　　　　　　　<th class="panel-title">得分</th>
　　　　　　　　　　　　<th class="panel-title">次数</th>
　　　　　　　　　　　　<th class="panel-title">完成率</th>
　　　　　　　　　　</tr>
　　　　　　　　</thead>
　　　　　　　　<tbody class="taskRows">
　　　　　　　　　　<tr id="wpy_row0" >
　　　　　　　　　　　　<td class="project-status">
　　　　　　　　　　　　　　<span id="task_wpy_id" class='label label-danger'>张三</span>
　　　　　　　　　　　　</td>
　　　　　　　　　　　　<td class="project-title" id="task_wpy_score">22</td>
　　　　　　　　　　　　<td class="project-title" id="task_wpy_num">4</td>
　　　　　　　　　　　　<td class="project-title">
　　　　　　　　　　　　　　<div class="progress progress-striped active m-b-sm"><!-- 进度条-->
　　　　　　　　　　　　　　　　<div style="width: 40%;" class="progress-bar"><strong >4/10</strong></div>
　　　　　　　　　　　　　　</div>
　　　　　　　　　　　　</td>
　　　　　　　　　　</tr>
　　　　　　</tbody>
　　　　</table>
　　</div>
</div>
</div>

 

转载于:https://www.cnblogs.com/Lxiaojiang/p/6051274.html