bootstrap表格样式模板

最新推荐文章于 2024-08-29 13:43:57 发布

Rosamund

最新推荐文章于 2024-08-29 13:43:57 发布

阅读量2.5k

点赞数 2

分类专栏： bootstrap 文章标签： html bootstrap

本文链接：https://blog.csdn.net/Rosamund/article/details/107046952

版权

bootstrap 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

https://www.runoob.com/try/try.php?filename=bootstrap3-table-striped

Bootstrap 实例 - 条纹表格

条纹表格布局
名称	城市	邮编
Tanmay	Bangalore	560001
Sachin	Mumbai	400003
Uma	Pune	411027

table 最基本
table-striped 条纹
table-bordered 外边框
table-hover 当指针悬停在行上时会出现浅灰色背景
table-condensed 行内边距（padding）被切为两半，以便让表看起来更紧凑
table-responsive 您可以让表格水平滚动以适应小型设备（小于 768px）

引用：https://www.runoob.com/try/try.php?filename=bootstrap3-table-striped

<!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 table-bordered table-hover table-condensed table-responsive">
	<caption>条纹表格布局</caption>
	<thead>
		<tr class="active">
			<th>名称</th>
			<th>城市</th>
			<th>邮编</th>
		</tr>
	</thead>
	<tbody>
		<tr class="success">
			<td>Tanmay</td>
			<td>Bangalore</td>
			<td>560001</td>
		</tr>
		<tr class="warning">
			<td>Sachin</td>
			<td>Mumbai</td>
			<td>400003</td>
		</tr>
		<tr class="danger">
			<td>Uma</td>
			<td>Pune</td>
			<td>411027</td>
		</tr>
	</tbody>
</table>

</body>
</html>

table 	最基本
table-striped	条纹 	
table-bordered 	外边框
table-hover 	当指针悬停在行上时会出现浅灰色背景
table-condensed 	行内边距（padding）被切为两半，以便让表看起来更紧凑
table-responsive	您可以让表格水平滚动以适应小型设备（小于 768px）