Boostrap 第五章表格

最新推荐文章于 2023-02-07 14:33:18 发布

LW0512

最新推荐文章于 2023-02-07 14:33:18 发布

阅读量105

点赞数

分类专栏： bootstrap

本文链接：https://blog.csdn.net/LW0512/article/details/109016490

版权

bootstrap 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

第五章表格

类	作用
.table	表格的框架
.table-bordered	表格的边框
.table-striped	表格出现条纹装
.table-hover	划过表格出现灰色背景
.table-condensed	缩小表格
.active	鼠标悬停在行或单元格上时所设置的颜色
.success	标识成功或积极的动作
.info	标识普通的提示信息或动作
.warning	标识警告或需要用户注意
.danger	标识危险或潜在的带来负面影响的动作

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../bs/css/bootstrap.css"/>
	</head>
	<body>
		<div class="container">
			<table class="table table-bordered table-striped table-hover table-condensed">	
			<caption>2020年学期成绩</caption>
				<thead>
					<tr>
						<th>姓名</th>
						<th>语文</th>
						<th>数学</th>
						<th>英语</th>
					</tr>
				</thead>
				<tbody>
					<tr class="success">
						<td>小明</td>
						<td>10</td>
						<td>29</td>
						<td>30</td>
					</tr>
					<tr class="info">
						<td>小红</td>
						<td>10</td>
						<td>29</td>
						<td>30</td>
					</tr>
					<tr class="warning">
						<td>小王</td>
						<td>10</td>
						<td>29</td>
						<td>30</td>
					</tr>
					<tr class="danger">
						<td>小梦</td>
						<td>10</td>
						<td>29</td>
						<td>30</td>
					</tr>
					<tr class="active">
						<td>小宽</td>
						<td>10</td>
						<td>29</td>
						<td>30</td>
					</tr>
				</tbody>
			</table>
		</div>
	</body>
</html>