一起学习网,一个一起免费的织梦建站教程资源共享和seo自学、黑帽seo技术学习的网站,www.17xuexiwang.com,一起学习,共同进步!

Bootstrap 表格

时间:2016-08-11 18:42   文章来源:一起学习网   访问次数:
Bootstrap 表格
Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素:
表格类
下表样式可用于表格中:
<tr>, <th> 和 <td> 类
下表的类可用于表格的行或者单元格:

基本的表格
如果您想要一个只带有内边距(padding)和水平分割的基本表,请添加 class .table,如下面实例所示:

基本的表格
 
可选的表格类
除了基本的表格标记和 .table class,还有一些可以用来为标记定义样式的类。下面将向您介绍这些类。
条纹表格
通过添加 .table-striped class,您将在 <tbody> 内的行上看到条纹,如下面的实例所示:
条纹表格
边框表格
通过添加 .table-bordered class,您将看到每个元素周围都有边框,且占整个表格是圆角的,如下面的实例所示:
悬停表格
通过添加 .table-hover class,当指针悬停在行上时会出现浅灰色背景,如下面的实例所示:

 
精简表格
通过添加 .table-condensed class,行内边距(padding)被切为两半,以便让表看起来更紧凑,如下面的实例所示。这在想让信息看起来更紧凑时非常有用。
精简表格
上下文类
下表中所列出的上下文类允许您改变表格行或单个单元格的背景颜色。
这些类可被应用到 <tr>、<td> 或 <th>。


上下文类
 
响应式表格
通过把任意的 .table 包在 .table-responsive class 内,您可以让表格水平滚动以适应小型设备(小于 768px)。当在大于 768px 宽的大型设备上查看时,您将看不到任何的差别。

本文为一起学习网原创文章,如想转载,请注明原文网址,注明出处;否则,禁止转载;谢谢配合!

上一篇:Bootstrap 代码
下一篇:没有了