今天,我要介绍的是在Bootstrap中table的相关属性。
table中我们主要使用到的有:table-striped(增加斑马线),table-bordered(增加边框),table-responsive(添加自适应),table-condensed(压缩边框),table-hover(鼠标经过事件)。此外,我们还可以通过添加每行添加一个文本类(状态类),来提示表格信息。其中状态类包括了(.active , .success , warning , info , danger )。具体效果请参考如下代码。
table
#fifth_tb tbody tr:hover{
background-color: pink;
}
第一个Table
学号
性别
姓名
联系方式
01
男
汪洋拾贝
666666666666
01
男
汪洋拾贝
666666666666 >
01
男
汪洋拾贝
666666666666
第二个table 加了斑马线 class='table-striped'
学号
性别
姓名
联系方式
01
男
汪洋拾贝
666666666666
01
男
汪洋拾贝
666666666666
01
男
汪洋拾贝
666666666666
第二个table 加了边框属性 class='table-bordered'
学号
性别
姓名
联系方式
01
男
汪洋拾贝
666666666666
01
男
汪洋拾贝
666666666666
01
男
陈永煌
13531576817
第四个table 加了鼠标经过事件 class="table-hover"
学号
性别
姓名
联系方式
01
男
汪洋拾贝
666666666666
01
男
汪洋拾贝
666666666666
01
男
汪洋拾贝
666666666666
第五个,自定义个Hover事件
学号
性别
姓名
联系方式
01
男
汪洋拾贝
666666666666
01
男
汪洋拾贝
666666666666
01
男
汪洋拾贝
666666666666
第六个个table 加了针对边框的一个压缩 class="table-condensed"
学号
性别
姓名
联系方式
01
男
汪洋拾贝
666666666666
01
男
汪洋拾贝
666666666666
01
男
汪洋拾贝
666666666666
第六个个table 加了针对边框的一个压缩 class="table-condensed"
学号
性别
姓名
联系方式
01
男
汪洋拾贝
666666666666
01
男
汪洋拾贝
666666666666
01
男
汪洋拾贝
666666666666
第七个table 通过给tr添加上下文类(状态类),来展示不同的文本内容
文本内容可以为:.active, .success, .info, .warning, and .danger
学号
性别
汪洋拾贝
联系方式
01
男
汪洋拾贝
666666666666
01
男
汪洋拾贝
666666666666
01
男
陈永煌
13531576817
01
男
汪洋拾贝
666666666666
第8个table 添加一个自适应类 .table-responsive,
这个属性只有在屏幕小于768px情况下才会变现出来,建议用chrome调试
学号
性别
汪洋拾贝
联系方式
01
男
汪洋拾贝
666666666666
01
男
汪洋拾贝
666666666666
01
男
陈永煌
13531576817
01
男
汪洋拾贝
666666666666



