【Bootstrap学习 day5】

表格
创建一个简单的表格，通过.table类来设置基础表格的样式。

	

		

			

				
编号
				
姓名
				
年龄
				
手机号
			
		
		

			

				
1
				
张三
				
22
				
123344455
			

		
    

表格颜色
通过制定意义的颜色类名可以为表格的行或者单元格设置颜色。表格颜色类的说明：

类名	描述
.table-primary	蓝色：指定这是一个重要的操作
.table-success	绿色：指定这是一个允许执行的操作
.table-danger	红色：指定这是可以危险的操作
.table-info	浅蓝色：表示内容已变更
.table-warning	橘色：表示需要注意的操作
.table-active	灰色：用于鼠标悬停效果
.table-secondary	灰色：表示内容不怎么重要
.table-light	浅灰色：可以是表格行的背景
.table-dark	深灰色：可以是表格行的背景

使用方法示例：

	

		

			

				
编号
				
姓名
				
年龄
				
手机号
			
		
		

			

				
1
				
张三
				
22
				
123344455
			
            

				
1
				
张三
				
22
				
123344455
			

		
    

效果:

条纹表格
通过在table上添加.table-striped类实现

	

		

			

				
编号
				
姓名
				
年龄
				
手机号
			
		
		

			

				
1
				
张三
				
22
				
123344455
			
            

				
1
				
张三
				
22
				
123344455
			
            

				
1
				
张三
				
22
				
123344455
			
            

				
1
				
张三
				
22
				
123344455
			

		
    

实现效果：

带边框的表格
通过在table上添加.table-bordered类实现

	

		

			

				
编号
				
姓名
				
年龄
				
手机号
			
		
		

			

				
1
				
张三
				
22
				
123344455
			
            

				
1
				
张三
				
22
				
123344455
			

		
    

无边框表格
通过在table上添加.table-borderless实现

	

		

			

				
编号
				
姓名
				
年龄
				
手机号
			
		
		

			

				
1
				
张三
				
22
				
123344455
			
            

				
1
				
张三
				
22
				
123344455
			

		
    

鼠标悬停状态表格
鼠标悬停时，为该行添加灰色背景。通过在table上添加.table-hover实现

	

		

			

				
编号
				
姓名
				
年龄
				
手机号
			
		
		

			

				
1
				
张三
				
22
				
123344455
			
            

				
1
				
张三
				
22
				
123344455
			
            

				
1
				
张三
				
22
				
123344455
			
            

				
1
				
张三
				
22
				
123344455
			

		
    

创建较小表格
通过在table上添加.table-sm类，用于通过减少内边距来设置较小的表格，使表格更紧凑并节省空间
响应式表格
要使任何表格具有响应性，只需将.table元素包裹在.table-responsive元素内，即可创建响应式表格。还可以使用类.table-responsive{-sm|-md|-lg|-xl}根据视口宽度指定表格何时应具有滚动条。
注意.table-responsive类是在div外包裹一个div实现

	
	……
	

可以通过以下类设定在指定屏幕宽度下显示滚动条

类名	屏幕宽度
.table-responsive-sm	<576px
.table-responsive-md	<768px
.table-responsive-lg	<992px
.table-responsive-xl	<1200px
.table-responsive-xxl	<1400px

实例展示

	

		

			

				
编号
				
姓名
				
年龄
				
手机号
                
编号
				
姓名
				
年龄
				
手机号
                
编号
				
姓名
				
年龄
				
手机号
                
编号
				
姓名
				
年龄
				
手机号
			
		
		

			

				
1
				
张三
				
22
				
123344455
                
1
				
张三
				
22
				
123344455
                
1
				
张三
				
22
				
123344455
                
1
				
张三
				
22
				
123344455
			
            

				
1
				
张三
				
22
				
123344455
                
1
				
张三
				
22
				
123344455
                
1
				
张三
				
22
				
123344455
                
1
				
张三
				
22
				
123344455
			
            

				
1
				
张三
				
22
				
123344455
                
1
				
张三
				
22
				
123344455
                
1
				
张三
				
22
				
123344455
                
1
				
张三
				
22
				
123344455
			
            

				
1
				
张三
				
22
				
123344455
                
1
				
张三
				
22
				
123344455
                
1
				
张三
				
22
				
123344455
                
1
				
张三
				
22
				
123344455