一、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>

bootstrap panel 和table的使用的更多相关文章

  1. Bootstrap~Panel和Table

    回到目录 在我们对一个页面进行设计时,分块是必须的,没有一个网站是一栏而下的,除非你是在看小说,否则你的页面设计一定是分块的,即它由于多个panel组件,在bootstrap里叫到栅格系统,而在每行每 ...

  2. Html - Bootstrap Panel面板

    http://v3.bootcss.com/components/#panels Bootstrap Panel面板 <div class="panel panel-default&q ...

  3. bootstrap panel如何实现可拖动并排序

    Draggable Panels Bootstrap test  如果是使用bootstrap的panel请严重注意class = row 与class = col-....等的嵌套,要不然排序会出问 ...

  4. 配合bootstrap实现的table 嵌套table

    不要忘了引入bootstrap.css库 html部分 <div class="container"> <div class="row"> ...

  5. bootstrap中固定table的表头

    前端时间鼓捣的一个简单的手机站点,今天又拿出来弄一弄 由于主要是给手机訪问.用的是bootstrap响应式布局,今天的任务是做一个数据展示页面 可是因为数据的列比較多.所以横向显示不下,为了较好的显示 ...

  6. bug-4——bootStrap中的table语言设置

    $(document).ready(function() {     $('.datatable').dataTable( {                 "Language" ...

  7. Bootstrap~学习笔记索引

    回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...

  8. 新的表格展示利器 Bootstrap Table

     1.bootstrap table简介及特征 Bootstrap Table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选.多选.排序.分 ...

  9. 新的表格展示利器 Bootstrap Table Ⅰ

     1.bootstrap table简介及特征 Bootstrap Table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选.多选.排序.分 ...

随机推荐

  1. 常用数据库高可用和分区解决方案(1) — MySQL篇

    在本文中我们将会讨论MySQL.Oracle.MongoDB.Redis以及Oceanbase数据库,大家可能会奇怪为什么看不到有名关系型数据库MSSQL.DB2或者有名NoSQL数据库Hbase.L ...

  2. java中的集合和数组

    数组Array和集合的区别: (1)数组是大小固定的,并且同一个数组只能存放类型一样的数据(基本类型/引用类型) (2)JAVA集合可以存储和操作数目不固定的一组数据. (3)若程序时不知道究竟需要多 ...

  3. canvas三角函数应用

    这个是圆圈旋转的简单案例 var canvas=document.getElementById("canvas"); var cxt=canvas.getContext(" ...

  4. jQuery基础--样式篇(4)

    jQuery选择器: 1.id选择器:通过id名来获取节点,id是唯一的,每个id在页面上只能使用一次. $( "#id" ) 2.类选择器:通过class样式类名来获取节点 $( ...

  5. Linux基础知识集锦

    查看当前进程ID与当前进程的父进程ID $$ echo $PPID shell脚本之for循环 for ((i=0;i<10;++i)) do echo "hello",$i ...

  6. supervisor

    文章转自:http://cpper.info/2016/04/14/supervisor-usage.html在此只是当做笔记使用,不做他用     Linux进程管理工具supervisor安装及使 ...

  7. git rebase 和 reset的区别

    check the command detail by input 'git command --help' rebase: reset:

  8. 转: linux内核版本本地版本号的检查——setlocalversion

    转载:http://blog.csdn.net/adaptiver/article/details/7225980 1.   引子 编译2.6.35.7 kernel版本的时候发现,"2.6 ...

  9. C#-黑客-数据库访问-字符串的攻击和防御

    C#中用基本的方法对数据库进行增删改查,会被黑客利用,写入其他的代码以实现对数据库的数据进行其他的操作.例如: 对下列数据库的某个信息进行修改操作 修改代码: using System; using ...

  10. js-JavaScript高级程序设计学习笔记10

    第十四章 表单脚本 1.通过getElementBy**可以获得<form>元素,或者通过document.forms可以取得页面中所有的表单,可以通过数值索引或者name值取得特定的表单 ...