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>

上一篇:基于Metronic的Bootstrap开发框架经验总结(13)--页面链接收藏夹功能的实现2(利用Sortable进行拖动排序)


下一篇:centos 7下修改IP地址为静态