Bootstrap 表格
Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素:
标签描述
或 | )。 | 默认的表格单元格。 | 特殊的表格单元格,用来标识列或行(取决于范围和位置)。必须在 |
---|
表格类
下表样式可用于表格中:
类描述实例.table为任意
联合使用所有表格类尝试一下, 和 类
下表的类可用于表格的行或者单元格:
类描述实例.active将悬停的颜色应用在行或者单元格上尝试一下.success表示成功的操作尝试一下.info表示信息变化的操作尝试一下.warning表示一个警告的操作尝试一下.danger表示一个危险的操作尝试一下
基本的表格
如果您想要一个只带有内边距(padding)和水平分割的基本表,请添加 class .table,如下面实例所示:
html> Bootstrap 实例 - 基本的表格
基本的表格布局 名称 城市 Tanmay Bangalore Sachin Mumbai 结果如下所示:
![a2efad8ee5d0729aea65be9b883510f9.png](https://i-blog.csdnimg.cn/blog_migrate/eb9a83c3fd12d61f23c0d2e323e85b1b.jpeg)
可选的表格类
除了基本的表格标记和 .table class,还有一些可以用来为标记定义样式的类。下面将向您介绍这些类。
条纹表格
通过添加 .table-striped class,您将在
内的行上看到条纹,如下面的实例所示:html> Bootstrap 实例 - 条纹表格
条纹表格布局 名称 城市 邮编 Tanmay Bangalore 560001 Sachin Mumbai 400003 Uma Pune 411027 结果如下所示:
![f1af22299ce5ef9d4f48e27848fbff53.png](https://i-blog.csdnimg.cn/blog_migrate/182a699faa8303a46f075e0665f4780b.jpeg)
边框表格
通过添加 .table-bordered class,您将看到每个元素周围都有边框,且占整个表格是圆角的,如下面的实例所示:
html> Bootstrap 实例 - 边框表格
边框表格布局 名称 城市 邮编 Tanmay Bangalore 560001 Sachin Mumbai 400003 Uma Pune 411027
结果如下所示:
![fa4e68eb245dc785c1d5fc4d3aa6020b.png](https://i-blog.csdnimg.cn/blog_migrate/7f023ae371ac462d8b80d5518a4b30a6.jpeg)
悬停表格
通过添加 .table-hover class,当指针悬停在行上时会出现浅灰色背景,如下面的实例所示:
html> Bootstrap 实例 - 悬停表格
悬停表格布局 名称 城市 邮编 Tanmay Bangalore 560001 Sachin Mumbai 400003 Uma Pune 411027 结果如下所示:
![86cae78d995f626f20299dbabc2ed44d.png](https://i-blog.csdnimg.cn/blog_migrate/af7bb2be0a7b137a9d23729cfeb0ce4e.jpeg)
精简表格
通过添加 .table-condensed class,行内边距(padding)被切为两半,以便让表看起来更紧凑,如下面的实例所示。这在想让信息看起来更紧凑时非常有用。
html> Bootstrap 实例 - 精简表格
精简表格布局 名称 城市 邮编 Tanmay Bangalore 560001 Sachin Mumbai 400003 Uma Pune 411027 结果如下所示:
![5dd9bfe98a2a4b6daa275375cedc22d6.png](https://i-blog.csdnimg.cn/blog_migrate/7ad492c792439e757179ceedd2666d62.jpeg)
上下文类
下表中所列出的上下文类允许您改变表格行或单个单元格的背景颜色。
类描述.active对某一特定的行或单元格应用悬停颜色.success表示一个成功的或积极的动作.warning表示一个需要注意的警告.danger表示一个危险的或潜在的负面动作
这些类可被应用到
、 或 。html> Bootstrap 实例 - 上下文类
上下文表格布局 产品 付款日期 状态 产品1 23/11/2013 待发货 产品2 10/11/2013 发货中 产品3 20/10/2013 待确认 产品4 20/10/2013 已退货 结果如下所示:
![9e741d52f76fa5c381c3691e6197a8d0.png](https://i-blog.csdnimg.cn/blog_migrate/61334b46581cdc60ee9d685b2e9752ad.jpeg)
响应式表格
通过把任意的 .table 包在 .table-responsive class 内,您可以让表格水平滚动以适应小型设备(小于 768px)。当在大于 768px 宽的大型设备上查看时,您将看不到任何的差别。
html> Bootstrap 实例 - 响应式表格
响应式表格布局 产品 付款日期 状态 产品1 23/11/2013 待发货 产品2 10/11/2013 发货中 产品3 20/10/2013 待确认 产品4 20/10/2013 已退货
结果如下所示:
![448836255cffb989015d9e22473e4021.png](https://i-blog.csdnimg.cn/blog_migrate/99bff0646846d71f64476711236b4ed4.jpeg)