关于bootstrap--表格(table的各种样式)

原文地址为: 关于bootstrap--表格(table的各种样式)

1、table-striped:斑马线表格

关于bootstrap--表格(table的各种样式)_第1张图片

2、table-bordered:带边框的表格

关于bootstrap--表格(table的各种样式)_第2张图片

3、table-hover:鼠标悬停高亮的表格

关于bootstrap--表格(table的各种样式)_第3张图片

4、table-condensed:紧凑型表格(单元格的内距由8px调至5px。)

关于bootstrap--表格(table的各种样式)_第4张图片

5、table-responsive:响应式表格(当你的浏览器可视区域小于768px时,表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时,表格底部水平滚动条就会消失)

关于bootstrap--表格(table的各种样式)_第5张图片

6、“.table”主要有三个作用:

  ☑  给表格设置了margin-bottom:20px以及设置单元内距

  ☑  在thead底部设置了一个2px的浅灰实线

  ☑  每个单元格顶部设置了一个1px的浅灰实线

class="table">
   
表格标题 表格标题 表格标题
表格单元格 表格单元格 表格单元格
表格单元格 表格单元格 表格单元格

 


转载请注明本文地址: 关于bootstrap--表格(table的各种样式)

你可能感兴趣的:(关于bootstrap--表格(table的各种样式))