学习Bootstrap3之基本表格

表格是二维数据集的最佳表现形式,在网站后台中尤其不可缺少。

一、基本表格

学习Bootstrap3之基本表格_第1张图片
image.png

基本表格比较清爽,只添加了水平分隔线,而且thead下面为粗线,tbody中的为细线
可以添加一个淡色的标题

  • 必须添加.table类。
  • 标题是处于表格边框外的。
  • 必须添加thead, 才能显示标题栏的底线。
  • 标题栏中文字为粗体。

二、添加网格线

学习Bootstrap3之基本表格_第2张图片
image.png

使用.table-bordered修饰, 可以添加表格外边框与列线,使整个表格呈现为网格型。

三、添加斑马线

学习Bootstrap3之基本表格_第3张图片
image.png

使用.table-striped修饰, 可以添加浅色行交替的效果。

  • 因为是使用 :children伪类来实现的,所以不支持IE8。
  • 背景色为 #f9f9f9

四、添加鼠标hover效果

学习Bootstrap3之基本表格_第4张图片
image.png
  • 添加.table-hover 类, 使用鼠标悬停的时候,表格行背景变换为#f5f5f5, 比斑马线稍暗一点。

四、情境状态背景

学习Bootstrap3之基本表格_第5张图片
image.png

上添加 .info, .active, .success, .warning, .danger 类, 可以显示5种不同的情境颜色,
如果同时有.table-hover的时候,会使用悬浮颜色稍暗一点。
这个特性可以更加直观的体现该行数据的属性。
颜色在屏幕阅读器中依旧不可见,可以添加 .sr-only 隐藏文本来说明。

  • 具体色值与其它情境色类似。
  • .active 类似悬浮色,浅灰。
  • .info 浅蓝。
  • .success 浅绿。
  • .warning 浅橙。
  • .danger 浅红。

五、紧凑表格

学习Bootstrap3之基本表格_第6张图片
image.png
  • 使用 .table-condensed 可以创建更紧凑的表格风格。
  • 它是单元格内边距减半的方式来实现的。

六、响应式表格

学习Bootstrap3之基本表格_第7张图片
image.png

默认当表格过小的时候,会出现内容换行
添加一个容器 div.table-responsive, 可以在内容将要换行的时候,出现水平滚动条,保证内容的可读性。

  • .table-responsive 类是添加在容器
    上,不是在 上。
  • 容器
    使用了 overflow-y: hidden 样式,使用内容表格被截断而避免换行。

  • 表格呈现二维数据集,让数据更有可读性,添加的网格、悬浮、情境背景,使用显示更加友好与直观。

    你可能感兴趣的:(学习Bootstrap3之基本表格)