Bootstrap学习记录【5】【表格】

小小2017

于 2021-03-03 15:06:22 发布

阅读量319

点赞数

分类专栏：前端文章标签： html bootstrap css

本文链接：https://blog.youkuaiyun.com/qq_41670382/article/details/114313182

版权

前端专栏收录该内容

23 篇文章

订阅专栏

本文介绍了Bootstrap框架中table标签的各种样式，包括基础表格、斑马线表格、带边框的表格、鼠标悬停高亮的表格及紧凑型表格，并展示了如何通过tr、th、td等标签控制行的不同背景颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Bootstrap学习记录【5】

1.table标签中的表格样式
（1）.table：基础表格
（2）.table-striped：斑马线表格（灰色和白色交替）
（3）.table-bordered：带边框的表格
（4）.table-hover：鼠标悬停高亮的表格（一整行）
（5）.table-condensed：紧凑型表格（行与行之间紧凑）

	<table class="table table-bordered table-striped table-hover">
		<tr>
			<td>a</td>
			<td>s</td>
			<td>d</td>
		</tr>
		<tr>
			<td>f</td>
			<td>g</td>
			<td>h</td>
		</tr>
		<tr>
			<td>j</td>
			<td>k</td>
			<td>l</td>
		</tr>
	</table>

结果：在这里插入图片描述

2.tr、th、td样式，控制了行的不同背景颜色
（1）.active：将悬停的颜色应用在行或单元格上
（2）.success：表示成功的操作（绿色）
（3）.info：表示信息变化的操作（蓝色）
（4）.warning：表示一个警告的操作（黄色）
（5）.danger：表示一个危险的操作（红色）

<table class="table table-bordered table-striped table-hover table-condensed">
		<tr class="active">
			<td>a</td>
			<td>s</td>
			<td>d</td>
		</tr>
		<tr class="danger">
			<td>f</td>
			<td>g</td>
			<td>h</td>
		</tr>
		<tr >
			<td class="warning">j</td>
			<td>k</td>
			<td>l</td>
		</tr>
	</table>