Bootstrap 基本样式-表格

1 : 基本表格    table
2 : 带斑马线的表格    table table-striped
3 : 带边框的表格    table table-bordered
4 : 有鼠标悬停状态的表格    table table-hover
5 : 更加紧凑的表格    table table-condensed
6 : 多种表格效果整合在一起    table table-striped table-bordered table-hover  table-condensed
7 : 激活样式    active
8 : 成功样式    success
9 : 信息样式    info
10 : 警告样式    warning
11 : 危险样式    danger

  • 基本表格

    拥有横向分割线的表格,宽度占用父容器的

    
    
    
    
     
    
    头像 名字 HP
    盖伦 616
    提莫 383
    阿卡丽 448
  • 带斑马线的表格

    通过斑马线把奇偶行的区别表现出来

    
    
    
    
     
    
    头像 名字 HP
    盖伦 616
    提莫 383
    阿卡丽 448
  • 带边框的表格

    给表格的单元格加上边框
    
    
    
    
     
    
    头像 名字 HP
    盖伦 616
    提莫 383
    阿卡丽 448
  • 有鼠标悬停状态的表格

    鼠标悬停高亮显示


    
    
    
    
     
    
    头像 名字 HP
    盖伦 616
    提莫 383
    阿卡丽 448
  • 更加紧凑的表格

    让表格更加紧凑

    
    
    
    
     
    
    头像 名字 HP
    盖伦 616
    提莫 383
    阿卡丽 448
  • 多种表格效果整合在一起

    多种表格样式混合使用
    
    
    
    
     
    
    头像 名字 HP
    盖伦 616
    提莫 383
    阿卡丽 448
  • 激活样式

    用于表示该行被选中

    
    
    
    
     
    
    头像 名字 HP
    盖伦 616
    提莫 383
    阿卡丽 448
  • 成功样式

    用于表示该行的信息是成功的

    
    
    
    
     
    
    头像 名字 HP
    盖伦 616
    提莫 383
    阿卡丽 448
  • 信息样式

    用于表示该行的信息是正常的

    
    
    
    
     
    
    头像 名字 HP
    盖伦 616
    提莫 383
    阿卡丽 448
  • 警告样式

    用于表示该行的信息有疑问

    
    
    
    
     
    
    头像 名字 HP
    盖伦 616
    提莫 383
    阿卡丽 448
  • 危险样式

    用于表示该行的信息有错误

    
    
    
    
     
    
    头像 名字 HP
    盖伦 616
    提莫 383
    阿卡丽 448

你可能感兴趣的:(前端-Bootstrap)