Bootstrap 提供了一些丰富的表格样式供开发者使用。
1.bootstrap table基本格式
//实现基本的表格样式
<table class="table">
注:我们可以通过Firebug 查看相应的CSS。
2.bootstrap条纹状表格
//让<tbody>里的行产生一行隔一行加单色背景效果
<table class="table table-striped">
注:表格效果需要基于基本格式.table
3.bootstrap带边框的表格
//给表格增加边框
<table class="table table-bordered">
4.bootstrap table悬停鼠标
//让<tbody>下的表格悬停鼠标实现背景效果
<table class="table table-hover">
5.bootstrap table状态类
//可以单独设置每一行的背景样式
<tr class="success">
注:一共五种不同的样式可供选择。
Bootstrap table样式 |
Bootstrap table说明 |
active |
鼠标悬停在行或单元格上 |
success |
标识成功或积极的动作 |
info |
标识普通的提示信息或动作 |
warning |
标识警告或需要用户注意 |
danger |
表示危险或潜在的带来负面影响的动作 |
6.bootstrap table隐藏某一行
//隐藏行
<tr class="sr-only">
7.bootstrap响应式表格
//表格父元素设置响应式,小于768px 出现边框
<body class="table-responsive">