Bootstrap——表格（基本实例、表头选项、条纹状表格、带边框的表格、无边框的表格、鼠标指针悬停、紧凑表格、状态类、响应式表格）

       在网页制作中，通常会用到表格的鼠标悬停、隔行变色等功能。Bootstrap中提供了一系列表格布局样式，利用该样式可以帮助开发者快速开发出美观的表格，作用于

元素的表格样式如下表所示。

上表中，.table是表格的一个基类，如果想要加其他的样式，都要在.table的基础上去添加。表内的样式可以组合使用，多个样式之间只需使用空格隔开即可，并且都支持.table-dark样式，适用于反转色调。

Bootstrap对表格进行了优化，通过给

元素应用.table类样式便可以得到一个优化的基本的表
格。

1.基本实例
例:给

添加.table类样式，显示优化后的表格。

序号	学号	姓名	专业	课程
1	21090401001	李莉	计算机科学与技术	操作系统
2	21090401002	张雷	计算机科学与技术	操作系统
3	21090401003	周冰	计算机科学与技术	操作系统

结果图：

 

2.表头选项

 例:给表头添加.thead-light类样式示例。

	
		
		
		
		
		
		
	
	
		

			

				

					

						
序号
						
学号
						
姓名
						
专业
						
课程
					
				
				

					

						
1
						
21090401001
						
李莉
						
计算机科学与技术
						
操作系统
					
					

						
2
						
21090401002
						
张雷
						
计算机科学与技术
						
操作系统
					
					

						
3
						
21090401003
						
周冰
						
计算机科学与技术
						
操作系统
					
				
			
		
	

 结果图：

3.条纹状表格

例:给

添加.table-striped类样式示例。

序号	学号	姓名	专业	课程
1	21090401001	李莉	计算机科学与技术	操作系统
2	21090401002	张雷	计算机科学与技术	操作系统
3	21090401003	周冰	计算机科学与技术	操作系统

结果图：

 

4.带边框的表格

例：给

元素添加.table-bordered类样式。

序号	学号	姓名	专业	课程
1	21090401001	李莉	计算机科学与技术	操作系统
2	21090401002	张雷	计算机科学与技术	操作系统
3	21090401003	周冰	计算机科学与技术	操作系统

 结果图：

5.无边框的表格

例：给

元素添加.table-boardeless类样式。

序号	学号	姓名	专业	课程
1	21090401001	李莉	计算机科学与技术	操作系统
2	21090401002	张雷	计算机科学与技术	操作系统
3	21090401003	周冰	计算机科学与技术	操作系统

 结果图：

 6.鼠标指针悬停

例：给

元素添加.table-hover类样式示例。

序号	学号	姓名	专业	课程
1	21090401001	李莉	计算机科学与技术	操作系统
2	21090401002	张雷	计算机科学与技术	操作系统
3	21090401003	周冰	计算机科学与技术	操作系统