Bootstrap表格

Bootstrap表格_第1张图片

Bootstrap表格_第2张图片


Bootstrap表格_第3张图片



Bootstrap表格_第4张图片

Bootstrap表格_第5张图片

Bootstrap表格_第6张图片


黑色背景表格

.table-dark 类可以为表格添加黑色背景:

黑色条纹表格

联合使用 .table-dark 和 .table-striped 类可以创建黑色的条纹表格:

鼠标悬停效果 - 黑色背景表格

联合使用 .table-dark 和 .table-hover 类可以设置黑色背景表格的鼠标悬停效果:




 

指定意义的颜色类


 

通过指定意义的颜色类可以为表格的行或者单元格设置颜色:

            
 
   
     
       
       
       
     
   
   
     
       
       
       
            
     
       
       
       
     
     
       
       
       
     
     
       
       
       
     
     
       
       
       
     
     
       
       
       
     
     
       
       
       
     
     
       
       
       
     
     
       
       
       
     
     
       
       
       
     
   
 
FirstnameLastnameEmail
DefaultDefaultson[email protected]
PrimaryJoe[email protected]
SuccessDoe[email protected]
DangerMoe[email protected]
InfoDooley[email protected]
WarningRefs[email protected]
ActiveActiveson[email protected]
SecondarySecondson[email protected]
LightAngie[email protected]
DarkBo[email protected]


Bootstrap表格_第7张图片


表头颜色

在 Bootstrap v4.0.0-beta.2 中.thead-dark 类用于给表头添加黑色背景, .thead-light 类用于给表头添加灰色背景:

在 Bootstrap v4.0.0-beta 这个版本中,.thead-inverse 类用于给表头添加黑色背景,.thead-default 类用于给表头添加灰色背景。


 

表头颜色


 

.thead-dark 类用于给表头添加黑色背景, .thead-light 类用于给表头添加灰色背景:

            
 
   
     
       
       
       
     
   
   
     
       
       
       
     
     
       
       
       
     
     
       
       
       
     
   
 
FirstnameLastnameEmail
JohnDoe[email protected]
MaryMoe[email protected]
JulyDooley[email protected]

 
   
     
       
       
       
     
   
   
     
       
       
       
     
     
       
       
       
     
     
       
       
       
     
   
 
FirstnameLastnameEmail
JohnDoe[email protected]
MaryMoe[email protected]
JulyDooley[email protected]

Bootstrap表格_第8张图片


较小的表格


响应式表格
.table-responsive 类用于创建响应式表格:

在屏幕宽度小于 992px 时会创建水平滚动条,如果可视区域宽度大于 992px 则显示不同效果(没有滚动条):

Bootstrap表格_第9张图片

Bootstrap表格_第10张图片

你可能感兴趣的:(Bootstrap表格)