2.3Bootstrap表格
2014-05-03 15:36
246 查看
1、基本案例
为任意
简单表格实例
代码段:<div class="container">
<h1 class="page-header">简单表格示例</h1>
<table class="table">
<caption>table基本案例</caption>
<thread>
<tr>
<th>姓名</th>
<th>班级</th>
<th>性别</th>
</tr>
</thread>
<tbody>
<tr>
<td>张三</td>
<td>高二</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>高二</td>
<td>女</td>
</tr>
</tbody>
</table>
</div> 效果:
2、条纹状表格
利用
在上面示例的table元素上再添加一个 样式类
3、带边框的表格
利用
还是将第一个示例中的table元素上再添加一个样式类
4、鼠标悬停
利用
将鼠标移到那一行那一行就会有效果的
5、紧缩表格
利用
这个效果没那么明显,主要就是单元格中内容padding减半了。
6、状态class
通过这些状态class可以为行或单元格设置颜色。
7、响应式表格
将任何
为任意
<table>标签添加
.table可以为其赋予基本的样式—少量的内补(padding)和水平方向的分隔线。这种方式看起来很多余!?但是我们觉得,表格元素使用的很广泛,如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件,所以我们选择将其样式独立出来。
简单表格实例
代码段:<div class="container">
<h1 class="page-header">简单表格示例</h1>
<table class="table">
<caption>table基本案例</caption>
<thread>
<tr>
<th>姓名</th>
<th>班级</th>
<th>性别</th>
</tr>
</thread>
<tbody>
<tr>
<td>张三</td>
<td>高二</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>高二</td>
<td>女</td>
</tr>
</tbody>
</table>
</div> 效果:
2、条纹状表格
利用
.table-striped可以给
<tbody>之内的每一样增加斑马条纹样式。
在上面示例的table元素上再添加一个 样式类
<table class="table table-striped">
3、带边框的表格
利用
.table-bordered为表格和其中的每个单元格增加边框。
还是将第一个示例中的table元素上再添加一个样式类
<table class="table table-bordered">
4、鼠标悬停
利用
.table-hover可以让
<tbody>中的每一行响应鼠标悬停状态。
<table class="table table-hover">
将鼠标移到那一行那一行就会有效果的
5、紧缩表格
利用
.table-condensed可以让表格更加紧凑,单元格中的内部(padding)均会减半。
<table class="table table-condensed">
这个效果没那么明显,主要就是单元格中内容padding减半了。
6、状态class
通过这些状态class可以为行或单元格设置颜色。
7、响应式表格
将任何
.table包裹在
.table-responsive中即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于768px宽度时,水平滚动条消失。
相关文章推荐
- 如何使两个表格的列宽一致?
- mysql source 导入乱码问题 用命令导出数据到表格
- JavaScript DOM操作之表格操作(2)
- 编辑学生关系型表格
- 用Angular写一个表格的节点的增删查等操作(带全部修改的版本)
- 转:一步步教你实现表格排序(第一部分)
- NPOI操作Excel,NPOI画较复杂表格和设置其单元格格式
- 【精】表格(UITableView)总结(5):表单元(UITableViewCell)
- FineUi表格利用EF框架数据库分页
- [05]表格元素
- css 解决表格边框不显示的问题
- jquery动态表格,动态添加表格行
- CSS表格实例详解
- Beyond Compare中如何删除表格中的列表数据
- PowerDesigner 创建表格及导出SQL语句
- js表格操作类(添加一行,删除一行,排序,上移选定行,下移选定行)
- PHP处理excel cvs表格的方法实例介绍
- jQuery表单 表格操作及应用
- 2-HTML中的表格及表单控件
- python list/tuple/dict/set/deque的简单比较、优化和时间复杂度(表格)