Bootstrap 表格

最新推荐文章于 2024-05-23 11:57:15 发布
最新推荐文章于 2024-05-23 11:57:15 发布
阅读量603 收藏 1
点赞数
分类专栏： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/biggbang/article/details/114579143
版权

Bootstrap 表格

Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素：

标签描述
table为表格添加基础样式。
thead表格标题行的容器元素（tr），用来标识表格列。
tbody表格主体中的表格行的容器元素（tr）。
tr一组出现在单行上的表格单元格的容器元素（td 或 th）。
td默认的表格单元格。
th特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在 thead 内使用。
caption关于表格存储内容的描述或总结。

表格类

下表样式可用于表格中：

类描述
.table为任意 table 添加基本样式 (只有横向分隔线)
.table-striped在 tbody 内添加斑马线形式的条纹 ( IE8 不支持)
.table-bordered为所有表格的单元格添加边框
.table-hover在 tbody 内的任一行启用鼠标悬停状态
.table-condensed让表格更加紧凑
联合使用所有表格类

, 和 类

下表的类可用于表格的行或者单元格：

类描述
.active将悬停的颜色应用在行或者单元格上
.success表示成功的操作
.info表示信息变化的操作
.warning表示一个警告的操作
.danger表示一个危险的操作

基本的表格

如果您想要一个只带有内边距（padding）和水平分割的基本表，请添加 class .table，如下面实例所示：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 基本的表格</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<table class="table">
	<caption>基本的表格布局</caption>
   <thead>
      <tr>
         <th>名称</th>
         <th>城市</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
      </tr>
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
      </tr>
   </tbody>
</table>

</body>
</html>

结果如下所示：

在这里插入图片描述

可选的表格类

除了基本的表格标记和 .table class，还有一些可以用来为标记定义样式的类。下面将向您介绍这些类。

条纹表格

通过添加 .table-striped class，您将在 内的行上看到条纹，如下面的实例所示：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 条纹表格</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<table class="table table-striped">
	<caption>条纹表格布局</caption>
	<thead>
		<tr>
			<th>名称</th>
			<th>城市</th>
			<th>邮编</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Tanmay</td>
			<td>Bangalore</td>
			<td>560001</td>
		</tr>
		<tr>
			<td>Sachin</td>
			<td>Mumbai</td>
			<td>400003</td>
		</tr>
		<tr>
			<td>Uma</td>
			<td>Pune</td>
			<td>411027</td>
		</tr>
	</tbody>
</table>

</body>
</html>

结果如下所示：

在这里插入图片描述

边框表格

通过添加 .table-bordered class，您将看到每个元素周围都有边框，且占整个表格是圆角的，如下面的实例所示：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 边框表格</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<table class="table table-bordered">
	<caption>边框表格布局</caption>
	<thead>
		<tr>
			<th>名称</th>
			<th>城市</th>
			<th>邮编</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Tanmay</td>
			<td>Bangalore</td>
			<td>560001</td>
		</tr>
		<tr>
			<td>Sachin</td>
			<td>Mumbai</td>
			<td>400003</td>
		</tr>
		<tr>
			<td>Uma</td>
			<td>Pune</td>
			<td>411027</td>
		</tr>
	</tbody>
</table>

</body>
</html>

结果如下所示：

在这里插入图片描述

悬停表格

通过添加 .table-hover class，当指针悬停在行上时会出现浅灰色背景，如下面的实例所示：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 悬停表格</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<table class="table table-hover">
	<caption>悬停表格布局</caption>
	<thead>
		<tr>
			<th>名称</th>
			<th>城市</th>
			<th>邮编</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Tanmay</td>
			<td>Bangalore</td>
			<td>560001</td>
		</tr>
		<tr>
			<td>Sachin</td>
			<td>Mumbai</td>
			<td>400003</td>
		</tr>
		<tr>
			<td>Uma</td>
			<td>Pune</td>
			<td>411027</td>
		</tr>
	</tbody>
</table>

</body>
</html>

结果如下所示：

在这里插入图片描述

精简表格

通过添加 .table-condensed class，行内边距（padding）被切为两半，以便让表看起来更紧凑，如下面的实例所示。这在想让信息看起来更紧凑时非常有用。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 精简表格</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<table class="table table-condensed">
	<caption>精简表格布局</caption>
	<thead>
		<tr>
			<th>名称</th>
			<th>城市</th>
			<th>邮编</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Tanmay</td>
			<td>Bangalore</td>
			<td>560001</td>
		</tr>
		<tr>
			<td>Sachin</td>
			<td>Mumbai</td>
			<td>400003</td>
		</tr>
		<tr>
			<td>Uma</td>
			<td>Pune</td>
			<td>411027</td>
		</tr>
	</tbody>
</table>

</body>
</html>

结果如下所示：

在这里插入图片描述

上下文类

下表中所列出的上下文类允许您改变表格行或单个单元格的背景颜色。

类描述
.active对某一特定的行或单元格应用悬停颜色
.success表示一个成功的或积极的动作
.warning表示一个需要注意的警告
.danger表示一个危险的或潜在的负面动作

这些类可被应用到 、 或 。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap 实例 - 上下文类</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<table class="table">
	<caption>上下文表格布局</caption>
	<thead>
		<tr>
			<th>产品</th>
			<th>付款日期</th>
			<th>状态</th>
		</tr>
	</thead>
	<tbody>
		<tr class="active">
			<td>产品1</td>
			<td>23/11/2013</td>
			<td>待发货</td>
		</tr>
		<tr class="success">
			<td>产品2</td>
			<td>10/11/2013</td>
			<td>发货中</td>
		</tr>
		<tr  class="warning">
			<td>产品3</td>
			<td>20/10/2013</td>
			<td>待确认</td>
		</tr>
		<tr  class="danger">
			<td>产品4</td>
			<td>20/10/2013</td>
			<td>已退货</td>
		</tr>
	</tbody>
</table>

</body>
</html>

结果如下所示：

在这里插入图片描述

响应式表格

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap 实例 - 响应式表格</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="table-responsive">
	<table class="table">
		<caption>响应式表格布局</caption>
		<thead>
			<tr>
				<th>产品</th>
				<th>付款日期</th>
				<th>状态</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>产品1</td>
				<td>23/11/2013</td>
				<td>待发货</td>
			</tr>
			<tr>
				<td>产品2</td>
				<td>10/11/2013</td>
				<td>发货中</td>
			</tr>
			<tr>
				<td>产品3</td>
				<td>20/10/2013</td>
				<td>待确认</td>
			</tr>
			<tr>
				<td>产品4</td>
				<td>20/10/2013</td>
				<td>已退货</td>
			</tr>
		</tbody>
</table>
</div>  	

</body>
</html>

结果如下所示：

在这里插入图片描述

转载请注明：虚幻私塾 » Bootstrap 表格

虚坏叔叔
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
bootstraptable基于Bootstrap的jQuery表格插件
08-07
bootstrap-table：基于 Bootstrap 的 jQuery 表格插件，通过简单的设置就可以拥有强大的单选、多选、排序、分页、编辑、导出、过滤（扩展）等功能
bootstrap-table实现动态表格
陌子曦的专栏
02-03 491
动态表格
Bootstrap Table数据表格的使用指南
最新发布
2301_82243979的博客
05-23 963
数据源得到了，就可以看到渲染表格的效果了，如图。单表的基本数据显示是没有问题了，但关联表的数据怎么显示呢。下面来看一下关联表数据的显示。在渲染表格的JS中的columns属性值中添加如下代码。title: ‘班级’,formatter属性值对应的是一个方法名，此方法返回需要显示关联表中的数据。其中参数value表示field对应实体类中的值，row为当前行的数据，index为当前行的索引。因为tbClass为实体类中关联的班级表，索引直接通过value.name就可以得出班级名称。
bootstrap - 表格（条纹、边框、压缩）
hichinamobile的博客
06-22 1万+
bootstrap提供多种类型的表格，包括普通表格，带条纹的表格、带边框的表格、压缩表格 效果图如下： <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort
bootstrap-table (jquery 插件)
75闪光雷的博客
10-11 1608
使用前提 页面引入bootstrap-table.js               bootstrap-table.min.css html页面 inittableing=function(tableData){ $('#tradeList').bootstrapTable({ url: ContextPath + urls.getPlatoonList,
bootstrap table背景_jquery表格插件Bootstrap Table
weixin_31440583的博客
12-24 129
插件描述：Bootstrap Table显示数据表格格式,提供了丰富的支持,单选框、复选框、排序、分页等。详细用法请查看demo，说明很详细。2016-10-26更新(修改演示文件错误，和下载文件中引用地址错误问题)注：加载了外部json文件，本地预览会有跨域问题，需要在服务端运行。以下由晨之风-提供Bug描述用标签属性方式设置字段formatter时，发现没有效果：如：性别原因：bootstra...
bootstrap 表格
01-26
Bootstrap表格提供了丰富的样式和交互功能，能够帮助开发者快速创建美观且功能齐全的数据展示界面。 在“bootstrap 表格（可编辑）”这个主题中，我们关注的是如何创建一个不仅用于展示数据，还能让用户直接在页面...
Bootstrap表格编辑生成器插件.rar
04-29
Bootstrap表格编辑生成器插件是基于流行的前端框架Bootstrap开发的一款实用工具，主要用于简化网页中表格的创建和编辑过程。在现代Web应用中，表格经常被用于展示结构化的数据，而Bootstrap表格编辑生成器则提供了...
bootstrap表格
11-13
Bootstrap表格是前端开发中常用的一种组件，它是基于Twitter Bootstrap框架构建的，用于展示结构化的数据。Bootstrap表格以其简洁、响应式的设计和丰富的功能，深受开发者喜爱。在本篇中，我们将深入探讨Bootstrap...
jQuery动态生成Bootstrap表格
10-21
在本文中，我们将深入探讨如何使用jQuery动态生成Bootstrap表格，这是一种高效的方法，可以在网页上创建交互式的、响应式的表格。Bootstrap框架提供了丰富的样式和组件，而jQuery则是一种强大的JavaScript库，用于...
23.1 Bootstrap 表格
10-02
Bootstrap表格是前端开发中常用的一种布局工具，尤其在构建响应式网页时不可或缺。Bootstrap是由Twitter开发并开源的一个前端框架，它提供了一系列预先设计的样式、组件和JavaScript插件，简化了网页开发流程。本篇...
jquery bootstraptable_bootstrap table 列拖动，你可以做到像excel一样，
weixin_39623805的博客
11-26 696
今天给大家推荐一个实用的功能，bootrap table表格像excel一样可以拖动变化列宽。$("#exampleTable").colResizable({ liveDrag: true,//实时显示滑动位置 gripInnerHtml: ", //draggingClass: "dragging", postbackSafe: true,//刷新后保留之前的...
14--jQuery插件大全-- bootstrapTable 表单神器
weixin_42133396的博客
10-21 283
目录 bootstrapTable 表单神器 1、静态数据渲染 在table标签中设置代码如下： 2、数据来自url json数据渲染代码如下： table.json数据 bootstrapTable 表单神器 -官网[https://bootstrap-table.com/](https://bootstrap-table.com/) -gi...
如何修改Bootstrap Table中table-striped的颜色
热门推荐
沐沐
06-20 1万+
table-striped可以使table每一行颜色不同，但是如果不想用默认的，想自己自定义颜色该怎么写呢 只需要在自己的css里面写上： .table-striped &gt; tbody &gt; tr:nth-child(2n+1) &gt; td, .table-striped &gt; tbody &gt; tr:nth-child(2n+1) &gt; th { back...
bootstraptable 手册_bootstrap table表格使用方法详解
weixin_42395740的博客
02-15 8165
本文实例为大家分享了bootstrap table表格的使用方法，供大家参考，具体内容如下1.进入页面，根据指定的URL加载数据(json格式)2.加载成功，根据$table.bootstrapTable({options})显示表格样式。感觉还是挺漂亮的哈，OK，下面贴代码解释功能。开始之前，当然要引用js啦html代码，一是指定table要使用的工具栏，而是写一个空的table新增修改删除js...
Bootstrap-table 自我留存
Rebirth 重生
05-18 1867
一、什么是Bootstrap-table？ 　　在业务系统开发中，对表格记录的查询、分页、排序等处理是非常常见的，在Web开发中，可以采用很多功能强大的插件来满足要求，且能极大的提高开发效率，本随笔介绍这个bootstrap-table是一款非常有名的开源表格插件，在很多项目中广泛的应用。Bootstrap-table插件提供了非常丰富的属性设置，可以实现查询、分页、排序、复选框、设置显示列、Card view视图、主从表显示、合并列、国际化处理等处理功能，而且该插件同时也提供了一些不错的扩展功能，如..
给table表格表头添加斜线
雩风季白的博客
01-13 877
HTML代码 <td id="lineTd"> <span style="float:left;margin-bottom:-3px;">姓名</span> <span style="float:right;margin-top:-7px;">人数</span> </td> CSS代码 #lineTd { background: #F6F7FA url(data:image/svg+xml;base64,PHN2ZyB4bWxu
我的天！做Java九个月涨薪7K，这究竟是怎么做到的
2401_83411843的博客
04-12 737
总而言之，面试官问来问去，问的那些Redis知识点也就这么多吧，复习的不够到位，知识点掌握不够熟练，所以面试才会卡壳。将这些Redis面试知识解析以及我整理的一些学习笔记分享出来给大家参考学习《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》点击传送门即可获取！大家参考学习还有更多学习笔记面试资料也分享如下：[外链图片转存中…(img-qqGiEtUj-1712925995904)]《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

虚坏叔叔

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值