Bootstrap 之Table样式

将标签添加class=‘table’ 类后的样式

编号	姓名	年龄
001	郭靖	25
002	黄蓉	23
003	杨过	24

我们可以看到，Table是可以自由缩放的（不是响应式，应该是流媒体式）

class='table  table-striped'  条纹状表格（隔行变色）

    

        

            
编号
姓名
年龄
        
        

            
001
郭靖
25
            
002
黄蓉
23
            
003
杨过
24
        
    

class="table table-bordered" 给表格添加边框

    

        

            
编号
姓名
年龄
        
        

            
001
郭靖
25
            
002
黄蓉
23
            
003
杨过
24
        
    

class="table table-hover" 鼠标悬停变色

    

        

            
编号
姓名
年龄
        
        

            
001
郭靖
25
            
002
黄蓉
23
            
003
杨过
24
        
    

class="sr-only" 隐藏某一行

    

        

            
编号
姓名
年龄
        
        

            
001
郭靖
25
            
002
黄蓉
23
            
003
杨过
24
        
    

在第一行的tr上使用了sr-only样式后，编号为001的那一行被隐藏了

 状态类（主要做标记）

可以单独设置每一行的背景样式（总共有5中不同的样式可以选择）

    

        

            
编号
姓名
年龄
        
        

            
001
郭靖
25
            
002
黄蓉
23
            
003
杨过
24
            
004
黄老邪
54
            
005
欧阳锋
42
        
    

响应式表格

class="table-responsive 浏览器宽度小于768px时，表格出现边框。（注意：这个样式定义在表格的父元素上）

响应式表格就是当浏览器小于多少宽度或者高度的时候做出什么动作，例如当浏览器的的宽度小于768px的时候表格出现边框

    

        

            
编号
姓名
年龄
        
        

            
001
郭靖
25
            
002
黄蓉
23
            
003
杨过
24