扫一扫
用手机学习
最近搜过的热门关键词
相关热搜
扫一扫关注
Bootstrap表格插件
Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素:
表格类
下表样式可用于表格中:
, 和 类下表的类可用于表格的行或者单元格:类描述实例.active将悬停的颜色应用在行或者单元格上尝试一下.success表示成功的操作尝试一下.info表示信息变化的操作尝试一下.warning表示一个警告的操作尝试一下.danger表示一个危险的操作尝试一下基本的表格如果您想要一个只带有内边距(padding)和水平分割的基本表,请添加 class .table,如下面实例所示: Bootstrap 实例 - 基本的表格 ink href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 基本的表格布局 名称 城市 Tanmay Bangalore Sachin Mumbai 结果如下所示:可选的表格类除了基本的表格标记和 .table class,还有一些可以用来为标记定义样式的类。下面将向您介绍这些类。条纹表格通过添加 .table-striped class,您将在 内的行上看到条纹,如下面的实例所示: Bootstrap 实例 - 条纹表格 ink href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 条纹表格布局 名称 城市 密码 Tanmay Bangalore 560001 Sachin Mumbai 400003 Uma Pune 411027 结果如下所示:边框表格通过添加 .table-bordered class,您将看到每个元素周围都有边框,且占整个表格是圆角的,如下面的实例所示: Bootstrap 实例 - 边框表格 ink href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 边框表格布局 名称 城市 密码 Tanmay Bangalore 560001 Sachin Mumbai 400003 Uma Pune 411027 结果如下所示:悬停表格通过添加 .table-hover class,当指针悬停在行上时会出现浅灰色背景,如下面的实例所示: Bootstrap 实例 - 悬停表格 ink href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 悬停表格布局 名称 城市 密码 Tanmay Bangalore 560001 Sachin Mumbai 400003 Uma Pune 411027 结果如下所示:精简表格通过添加 .table-condensed class,行内边距(padding)被切为两半,以便让表看起来更紧凑,如下面的实例所示。这在想让信息看起来更紧凑时非常有用。 Bootstrap 实例 - 精简表格 ink href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 精简表格布局 名称 城市 密码 Tanmay Bangalore 560001 Sachin Mumbai 400003 Uma Pune 411027 结果如下所示:上下文类下表中所列出的上下文类允许您改变表格行或单个单元格的背景颜色。类描述.active对某一特定的行或单元格应用悬停颜色.success表示一个成功的或积极的动作.warning表示一个需要注意的警告.danger表示一个危险的或潜在的负面动作这些类可被应用到 、 或 。 Bootstrap 实例 - 上下文类 ink href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 上下文表格布局 产品 付款日期 状态 产品1 23/11/2013 待发货 产品2 10/11/2013 发货中 产品3 20/10/2013 待确认 产品4 20/10/2013 已退货 结果如下所示:响应式表格通过把任意的 .table 包在 .table-responsive class 内,您可以让表格水平滚动以适应小型设备(小于 768px)。当在大于 768px 宽的大型设备上查看时,您将看不到任何的差别。 Bootstrap 实例 - 响应式表格 ink href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 响应式表格布局 产品 付款日期 状态 产品1 23/11/2013 待发货 产品2 10/11/2013 发货中 产品3 20/10/2013 待确认 产品4 20/10/2013 已退货 结果如下所示: 下一篇:Ajax PHP 实例 上一篇:CSS 分组与嵌套 Bootstrap 表格插件 将本文的Word文档下载到电脑,方便收藏和打印 推荐度: 点击下载文档文档为docx格式 点赞 0反对 0举报 0 收藏 0 评论 0分享 6 更多>同类编程学习 • Ajax 操作数据库 • Ajax XMLHttpRequest对象 • Ajax 实例 • Ajax 原理 • Ajax 服务器响应 • JSONP 跨域教程 • JSON 语法 • JSON 使用实例 • Ajax Onreadystatechange • JavaScript函数 推荐编程学习 1Ajax XML 实例 热门排行
下表的类可用于表格的行或者单元格:
基本的表格
如果您想要一个只带有内边距(padding)和水平分割的基本表,请添加 class .table,如下面实例所示:
Bootstrap 实例 - 基本的表格 ink href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 基本的表格布局 名称 城市 Tanmay Bangalore Sachin Mumbai
结果如下所示:
可选的表格类
除了基本的表格标记和 .table class,还有一些可以用来为标记定义样式的类。下面将向您介绍这些类。
条纹表格
通过添加 .table-striped class,您将在
Bootstrap 实例 - 条纹表格 ink href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 条纹表格布局 名称 城市 密码 Tanmay Bangalore 560001 Sachin Mumbai 400003 Uma Pune 411027
边框表格
通过添加 .table-bordered class,您将看到每个元素周围都有边框,且占整个表格是圆角的,如下面的实例所示:
Bootstrap 实例 - 边框表格 ink href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 边框表格布局 名称 城市 密码 Tanmay Bangalore 560001 Sachin Mumbai 400003 Uma Pune 411027
悬停表格
通过添加 .table-hover class,当指针悬停在行上时会出现浅灰色背景,如下面的实例所示:
Bootstrap 实例 - 悬停表格 ink href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 悬停表格布局 名称 城市 密码 Tanmay Bangalore 560001 Sachin Mumbai 400003 Uma Pune 411027
精简表格
通过添加 .table-condensed class,行内边距(padding)被切为两半,以便让表看起来更紧凑,如下面的实例所示。这在想让信息看起来更紧凑时非常有用。
Bootstrap 实例 - 精简表格 ink href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 精简表格布局 名称 城市 密码 Tanmay Bangalore 560001 Sachin Mumbai 400003 Uma Pune 411027
上下文类
下表中所列出的上下文类允许您改变表格行或单个单元格的背景颜色。
这些类可被应用到
Bootstrap 实例 - 上下文类 ink href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 上下文表格布局 产品 付款日期 状态 产品1 23/11/2013 待发货 产品2 10/11/2013 发货中 产品3 20/10/2013 待确认 产品4 20/10/2013 已退货
响应式表格
通过把任意的 .table 包在 .table-responsive class 内,您可以让表格水平滚动以适应小型设备(小于 768px)。当在大于 768px 宽的大型设备上查看时,您将看不到任何的差别。
Bootstrap 实例 - 响应式表格 ink href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 响应式表格布局 产品 付款日期 状态 产品1 23/11/2013 待发货 产品2 10/11/2013 发货中 产品3 20/10/2013 待确认 产品4 20/10/2013 已退货