表格样式
颜色
active是白色
bootstrap中的表格
排版--表格
<table class=""></table>
.table 基础表格效果
.table-striped 斑马线效果
.table-bordered 边框效果
.table-hover 高亮效果(鼠标经过的变色效果)
<tr class=""></tr> //表格颜色
.danger
.warping
.info
.success
.active
【Bootstrap中的表格】
.table :基础表格
.table-striped 条纹 、斑马线表格
.table-bordered 带边框
.table-hover 鼠标悬停高亮
.table-condensed 紧凑型
.table-responsive:响应式表格
.danger 红色
.warning 黄色
.info 蓝色
.success 绿色
.active 悬停时颜色
class中内容无效
表格的样式
table table-striped table-bordered table-hover
表格信息样式
success
warning
info
danger
active
排版--表格
<table class=""></table>
.table 基础表格效果
.table-striped 斑马线效果
.table-bordered 边框效果
.table-hover 高亮效果(鼠标经过的变色效果)
<tr class=""></tr> //表格颜色
.danger
.warping
.info
.success
.active
【Bootstrap中的表格】
.table :基础表格
.table-striped 条纹 、斑马线表格
.table-bordered 带边框
.table-hover 鼠标悬停高亮
.table-condensed 紧凑型
.table-responsive:响应式表格
.danger 红色
.warning 黄色
.info 蓝色
.success 绿色
.active 悬停时颜色
带边框表格 .table-bordered
条纹状表格 .table-striped
悬停表格 .table-hover
紧凑风光 .table-condensed
mark一下
带边框表格 .table-bordered
条纹状表格 .table-striped
悬停表格 .table-hover
紧凑风光 .table-condensed
table-condensed:表格紧凑风格
Bootstrap中的表格: .table-bordered 带边框 .table-striped 条纹 .table-hover 悬停变色 .table-condensed 紧凑 .danger 红色 .warning 黄色 .info 蓝色 .success 绿色 .active 悬停时颜色
Bootstrap中的表格:
①带边框的表格:class="table-bordered"——补全表格边框线
②条纹状/斑马线表格:class="table-striped"——隔行换色效果
③悬停变色:class="table-hover"
④紧凑风格:class="table-condensed"
Bootstrap中的表格:
①带边框的表格:class="table-bordered"——补全表格边框线
②条纹状/斑马线表格:class="table-striped"——隔行换色效果
③悬停变色:class="table-hover"
④紧凑风格:class="table-condensed"
带边框表格:.table-bordered
条纹状表格:table-striped
悬停变色:table-hover
紧凑风格:table-condensed
table : 表格下划线
striped 隔行变色
bordered 边框
hover 悬浮表色
bootstrap 表格样式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link href="201658254038徐梓洲(Boostrap)/css/bootstrap.min.css"rel="stylesheet"/> <link href="201658254038徐梓洲(Boostrap)/css/bootstrap-theme.css" rel="stylesheet"/> <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <table class="table table-striped table-bordered table-hover"> <tr class="alert-danger"> <td>biaoti</td> <td>biaoti</td> <td>biaoti</td> </tr> <tr class="alert-info"> <td>biaoti</td> <td>biaoti</td> <td>biaoti</td> </tr> <tr class="alert-warning"> <td>biaoti</td> <td>biaoti</td> <td>biaoti</td> </tr> </table> </body> </html>
table-hover动态隔行变色
表格样式
1
3
Bootstrap中的表格: .table-bordered 带边框 .table-striped 条纹 .table-hover 悬停变色 .table-condensed 紧凑 .danger 红色 .warning 黄色 .info 蓝色 .success 绿色 .active 悬停时颜色