05-bootstrap 表格

基本实例

05-bootstrap 表格_第1张图片

代码





无标题文档





    
序号 姓名 性别 年龄 电话 邮箱
1 lizh man 34 15353661871 [email protected]
2 lizh man 34 15353661871 [email protected]
3 lizh man 34 15353661871 [email protected]
4 lizh man 34 15353661871 [email protected]
5 lizh man 34 15353661871 [email protected]

重点:在table上添加class 为table ,如果想要带斑马线的效果在class上追加.table-striped

05-bootstrap 表格_第2张图片
条纹.png

有边框的表格:在table的calss上添加 table-bordered

05-bootstrap 表格_第3张图片
带边框的table

条纹+边框的表格:class="table table-striped table-bordered"

05-bootstrap 表格_第4张图片
条纹+边框

鼠标在表格悬停:table-hover

 
05-bootstrap 表格_第5张图片
image.png

表格缩紧:table-condensed。

05-bootstrap 表格_第6张图片
 
05-bootstrap 表格_第7张图片

表格数据状态,底色

05-bootstrap 表格_第8张图片
05-bootstrap 表格_第9张图片
image.png




无标题文档





    
序号 姓名 性别 年龄 电话 邮箱
1 lizh man 34 15353661871 [email protected]
2 lizh man 34 15353661871 [email protected]
3 lizh man 34 15353661871 [email protected]
4 lizh man 34 15353661871 [email protected]
5 lizh man 34 15353661871 [email protected]

你可能感兴趣的:(05-bootstrap 表格)