今天，我要介绍的是在Bootstrap中table的相关属性。
table中我们主要使用到的有：table-striped(增加斑马线),table-bordered（增加边框）,table-responsive（添加自适应）,table-condensed(压缩边框),table-hover（鼠标经过事件）。此外，我们还可以通过添加每行添加一个文本类（状态类），来提示表格信息。其中状态类包括了（.active , .success , warning , info , danger ）。具体效果请参考如下代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--要做到移动优先，就必须添加下面一行代码，否则看起来和翔没区别-->
<meta name="viewport" content="width=device-width ,initial-scale=1">
<title>table</title>
<!--从CDN引入样式-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!--本地引入样式-->
<link rel="stylesheet" href="CSS/bootstrap.min.css">
<link rel="stylesheet" href="CSS/bootstrap.css">
<style>
#fifth_tb tbody tr:hover{
background-color: pink;
}
</style>
</head>
<body>
<div class="container-fluid">
第一个Table
<table class="table">
<thead>
<tr>
<th>学号</th>
<th>性别</th>
<th>姓名</th>
<th>联系方式</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>男</td>
<td>汪洋拾贝</td>
<td>666666666666</td>
</tr>
<tr>
<td>01</td>
<td>男</td>
<td>汪洋拾贝</td>
<td>666666666666</td>>
</tr>
<tr>
<td>01</td>
<td>男</td>
<td>汪洋拾贝</td>
<td>666666666666</td>
</tr>
</tbody>
</table>
<hr>
第二个table 加了斑马线 class='table-striped'
<table class="table table-striped">
<thead>
<tr>
<th>学号</th>
<th>性别</th>
<th>姓名</th>
<th>联系方式</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>男</td>
<td>汪洋拾贝</td>
<td>666666666666</td>
</tr>
<tr>
<td>01</td>
<td>男</td>
<td>汪洋拾贝</td>
<td>666666666666</td>
</tr>
<tr>
<td>01</td>
<td>男</td>
<td>汪洋拾贝</td>
<td>666666666666</td>
</tr>
</tbody>
</table>
<hr>
第二个table 加了边框属性 class='table-bordered'
<table class="table table-bordered">
<thead>
<tr>
<th>学号</th>
<th>性别</th>
<th>姓名</th>
<th>联系方式</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>男</td>
<td>汪洋拾贝</td>
<td>666666666666</td>
</tr>
<tr>
<td>01</td>
<td>男</td>
<td>汪洋拾贝</td>
<td>666666666666</td>
</tr>
<tr>
<td>01</td>
<td>男</td>
<td>陈永煌</td>
<td>13531576817</td>
</tr>
</tbody>
</table>
<hr>
第四个table 加了鼠标经过事件 class="table-hover"
<table class="table table-hover table-bordered">
<thead>
<tr>
<th>学号</th>
<th>性别</th>
<th>姓名</th>
<th>联系方式</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>男</td>
<td>汪洋拾贝</td>
<td>666666666666</td>
</tr>
<tr>
<td>01</td>
<td>男</td>
<td>汪洋拾贝</td>
<td>666666666666</td>
</tr>
<tr>
<td>01</td>
<td>男</td>
<td>汪洋拾贝</td>
<td>666666666666</td>
</tr>
</tbody>
</table>
<hr>
第五个，自定义个Hover事件
<!--
觉得默认的样式不爽，不好看怎么改？
很简单同样的我们自定义一个hover事件
<style>
#fifth_tb tbody tr:hover{
background-color: pink;
}
</style>
-->
<table class="table table-hover table-bordered" id="fifth_tb">
<thead>
<tr>
<th>学号</th>
<th>性别</th>
<th>姓名</th>
<th>联系方式</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>男</td>
<td>汪洋拾贝</td>
<td>666666666666</td>
</tr>
<tr>
<td>01</td>
<td>男</td>
<td>汪洋拾贝</td>
<td>666666666666</td>
</tr>
<tr>
<td>01</td>
<td>男</td>
<td>汪洋拾贝</td>
<td>666666666666</td>
</tr>
</tbody>
</table>
<hr>
第六个个table 加了针对边框的一个压缩 class="table-condensed"
<table class="table table-bordered table-condensed ">
<thead>
<tr>
<th>学号</th>
<th>性别</th>
<th>姓名</th>
<th>联系方式</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>男</td>
<td>汪洋拾贝</td>
<td>666666666666</td>
</tr>
<tr>
<td>01</td>
<td>男</td>
<td>汪洋拾贝</td>
<td>666666666666</td>
</tr>
<tr>
<td>01</td>
<td>男</td>
<td>汪洋拾贝</td>
<td>666666666666</td>
</tr>
</tbody>
</table>
<hr>
第六个个table 加了针对边框的一个压缩 class="table-condensed"
<table class="table table-bordered table-condensed ">
<thead>
<tr>
<th>学号</th>
<th>性别</th>
<th>姓名</th>
<th>联系方式</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>男</td>
<td>汪洋拾贝</td>
<td>666666666666</td>
</tr>
<tr>
<td>01</td>
<td>男</td>
<td>汪洋拾贝</td>
<td>666666666666</td>
</tr>
<tr>
<td>01</td>
<td>男</td>
<td>汪洋拾贝</td>
<td>666666666666</td>
</tr>
</tbody>
</table>
<hr>
第七个table 通过给tr添加上下文类（状态类），来展示不同的文本内容
文本内容可以为：.active, .success, .info, .warning, and .danger
<table class="table table-bordered">
<thead>
<tr class="active">
<th>学号</th>
<th>性别</th>
<td>汪洋拾贝</td>
<td>联系方式</td>
</tr>
</thead>
<tbody>
<tr class="success">
<td>01</td>
<td>男</td>
<td>汪洋拾贝</td>
<td>666666666666</td>
</tr>
<tr class="info">
<td>01</td>
<td>男</td>
<td>汪洋拾贝</td>
<td>666666666666</td>
</tr>
<tr class="warning">
<td>01</td>
<td>男</td>
<td>陈永煌</td>
<td>13531576817</td>
</tr>
<tr class="danger">
<td>01</td>
<td>男</td>
<td>汪洋拾贝</td>
<td>666666666666</td>
</tr>
</tbody>
</table>
<hr>
第8个table 添加一个自适应类 .table-responsive,
这个属性只有在屏幕小于768px情况下才会变现出来，建议用chrome调试
<table class="table table-responsive">
<thead>
<tr class="active">
<th>学号</th>
<th>性别</th>
<td>汪洋拾贝</td>
<td>联系方式</td>
</tr>
</thead>
<tbody>
<tr class="success">
<td>01</td>
<td>男</td>
<td>汪洋拾贝</td>
<td>666666666666</td>
</tr>
<tr class="info">
<td>01</td>
<td>男</td>
<td>汪洋拾贝</td>
<td>666666666666</td>
</tr>
<tr class="warning">
<td>01</td>
<td>男</td>
<td>陈永煌</td>
<td>13531576817</td>
</tr>
<tr class="danger">
<td>01</td>
<td>男</td>
<td>汪洋拾贝</td>
<td>666666666666</td>
</tr>
</tbody>
</table>
</div>
</body></html>
点击查看更多内容
2人点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦