前面的话
bootstrap为我们提供了非常好看且易用的表格样式,利用boostrap可以快速的创建出不同样式的表格,本文将详细介绍boostrap表格
基本实例
Boostrap将表格
的样式重置如下table {
background-color: transparent;
border-spacing: 0;
border-collapse: collapse;
}
Optional table caption.
| # | First Name | Last Name | Username |
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird | @twitter |
为任意标签添加.table类可以为其赋予基本的样式—少量的内边距(padding)和水平方向的分隔线
条纹状表格
通过 .table-striped 类可以给 之内的每一行增加斑马条纹样式 [注意]条纹状表格是依赖 :nth-child CSS 选择器实现的,而这一功能不被IE8-支持
.table-striped > tbody > tr:nth-of-type(odd) {
background-color: #f9f9f9;
}
带边框表格
添加 .table-bordered 类为表格和其中的每个单元格增加边框
鼠标悬停
通过添加 .table-hover 类可以让
科威旅游管理系统
该软件是以php+MySQL进行开发的旅游管理网站系统。系统前端采用可视化布局,能自动适应不同尺寸屏幕,一起建站,不同设备使用,免去兼容性烦恼。系统提供列表、表格、地图三种列表显示方式,让用户以最快的速度找到所需行程,大幅提高效率。系统可设置推荐、优惠行程,可将相应行程高亮显示,对重点行程有效推广,可实现网站盈利。系统支持中文、英文,您还可以在后台添加新的语言,关键字单独列出,在后台即可快速翻译。
下载
中的每一行对鼠标悬停状态作出响应
.table-hover > tbody > tr:hover {
background-color: #f5f5f5;
}
紧缩表格
通过添加 .table-condensed 类可以让表格更加紧凑,单元格中的内补(padding)均会减半
状态类
通过这些状态类可以为行或单元格设置颜色
Class 描述
.active 鼠标悬停在行或单元格上时所设置的颜色
.success 标识成功或积极的动作
.info 标识普通的提示信息或动作
.warning 标识警告或需要用户注意
.danger 标识危险或潜在的带来负面影响的动作
| # | Column heading | Column heading | Column heading |
| 1 | Column content | Column content | Column content |
| 2 | Column content | Column content | Column content |
| 3 | Column content | Column content | Column content |
| 4 | Column content | Column content | Column content |
| 5 | Column content | Column content | Column content |
| 6 | Column content | Column content | Column content |
响应式表格
将任何 .table 元素包裹在 .table-responsive 元素内,即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于 768px 宽度时,水平滚动条消失
| # | Table heading | Table heading | Table heading |
| 1 | Table cell | Table cell | Table cell |
| 2 | Table cell | Table cell | Table cell |
| 3 | Table cell | Table cell | Table cell |