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>
bootstrap panel 和table的使用的更多相关文章
- Bootstrap~Panel和Table
回到目录 在我们对一个页面进行设计时,分块是必须的,没有一个网站是一栏而下的,除非你是在看小说,否则你的页面设计一定是分块的,即它由于多个panel组件,在bootstrap里叫到栅格系统,而在每行每 ...
- Html - Bootstrap Panel面板
http://v3.bootcss.com/components/#panels Bootstrap Panel面板 <div class="panel panel-default&q ...
- bootstrap panel如何实现可拖动并排序
Draggable Panels Bootstrap test 如果是使用bootstrap的panel请严重注意class = row 与class = col-....等的嵌套,要不然排序会出问 ...
- 配合bootstrap实现的table 嵌套table
不要忘了引入bootstrap.css库 html部分 <div class="container"> <div class="row"> ...
- bootstrap中固定table的表头
前端时间鼓捣的一个简单的手机站点,今天又拿出来弄一弄 由于主要是给手机訪问.用的是bootstrap响应式布局,今天的任务是做一个数据展示页面 可是因为数据的列比較多.所以横向显示不下,为了较好的显示 ...
- bug-4——bootStrap中的table语言设置
$(document).ready(function() { $('.datatable').dataTable( { "Language" ...
- Bootstrap~学习笔记索引
回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...
- 新的表格展示利器 Bootstrap Table
1.bootstrap table简介及特征 Bootstrap Table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选.多选.排序.分 ...
- 新的表格展示利器 Bootstrap Table Ⅰ
1.bootstrap table简介及特征 Bootstrap Table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选.多选.排序.分 ...
随机推荐
- 常用数据库高可用和分区解决方案(1) — MySQL篇
在本文中我们将会讨论MySQL.Oracle.MongoDB.Redis以及Oceanbase数据库,大家可能会奇怪为什么看不到有名关系型数据库MSSQL.DB2或者有名NoSQL数据库Hbase.L ...
- java中的集合和数组
数组Array和集合的区别: (1)数组是大小固定的,并且同一个数组只能存放类型一样的数据(基本类型/引用类型) (2)JAVA集合可以存储和操作数目不固定的一组数据. (3)若程序时不知道究竟需要多 ...
- canvas三角函数应用
这个是圆圈旋转的简单案例 var canvas=document.getElementById("canvas"); var cxt=canvas.getContext(" ...
- jQuery基础--样式篇(4)
jQuery选择器: 1.id选择器:通过id名来获取节点,id是唯一的,每个id在页面上只能使用一次. $( "#id" ) 2.类选择器:通过class样式类名来获取节点 $( ...
- Linux基础知识集锦
查看当前进程ID与当前进程的父进程ID $$ echo $PPID shell脚本之for循环 for ((i=0;i<10;++i)) do echo "hello",$i ...
- supervisor
文章转自:http://cpper.info/2016/04/14/supervisor-usage.html在此只是当做笔记使用,不做他用 Linux进程管理工具supervisor安装及使 ...
- git rebase 和 reset的区别
check the command detail by input 'git command --help' rebase: reset:
- 转: linux内核版本本地版本号的检查——setlocalversion
转载:http://blog.csdn.net/adaptiver/article/details/7225980 1. 引子 编译2.6.35.7 kernel版本的时候发现,"2.6 ...
- C#-黑客-数据库访问-字符串的攻击和防御
C#中用基本的方法对数据库进行增删改查,会被黑客利用,写入其他的代码以实现对数据库的数据进行其他的操作.例如: 对下列数据库的某个信息进行修改操作 修改代码: using System; using ...
- js-JavaScript高级程序设计学习笔记10
第十四章 表单脚本 1.通过getElementBy**可以获得<form>元素,或者通过document.forms可以取得页面中所有的表单,可以通过数值索引或者name值取得特定的表单 ...