Bootstarp入门教程(6) 表格分析

访客 阅读:278 2021-04-01 00:26:25 评论:0


基本案例:为任意<table>标签添加.table可以为其赋予基本的样式—少量的内补(padding)和水平方向的分隔线。

<!DOCTYPE html> 
<html> 
<head> 
<title>Demo</title> 
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
<meta http-equiv="description" content="this is my page"> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
<!--<link rel="stylesheet" type="text/css" href="./styles.css">--> 
<link rel="stylesheet" href="css/bootstrap.min.css"> 
<!-- 可选的Bootstrap主题文件(一般不用引入) --> 
<!--<link rel="stylesheet" href="css/bootstrap-theme.min.css">--> 
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> 
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> 
<!-- 最新的 Bootstrap 核心 JavaScript 文件 --> 
<script src="js/bootstrap.min.js"></script> 
</head> 
<body> 
	<!--容器  --> 
	<div class="container"> 
		<div class="row">			 
			<table class="table"> 
				<thead> 
					<tr> 
						<th>第一列</th> 
						<th>第二列</th> 
						<th>第三列</th> 
						<th>第四列</th> 
					</tr> 
				</thead> 
				<tbody> 
					<tr> 
						<td>1</td> 
						<td>2</td> 
						<td>3</td> 
						<td>4</td> 
					</tr> 
				</tbody> 
			</table> 
		</div> 
	</div> 
</body> 
</html> 

条纹状表格:利用.table-striped可以给<tbody>之内的每一样增加斑马条纹样式。

<body> 
	<!--容器  --> 
	<div class="container"> 
		<div class="row">			 
			<table class="table table-striped"> 
				<thead> 
					<tr> 
						<th>第一列</th> 
						<th>第二列</th> 
						<th>第三列</th> 
						<th>第四列</th> 
					</tr> 
				</thead> 
				<tbody> 
					<tr> 
						<td>1</td> 
						<td>2</td> 
						<td>3</td> 
						<td>4</td> 
					</tr> 
					<tr> 
						<td>1</td> 
						<td>2</td> 
						<td>3</td> 
						<td>4</td> 
					</tr> 
					<tr> 
						<td>1</td> 
						<td>2</td> 
						<td>3</td> 
						<td>4</td> 
					</tr> 
					<tr> 
						<td>1</td> 
						<td>2</td> 
						<td>3</td> 
						<td>4</td> 
					</tr> 
				</tbody> 
			</table> 
		</div> 
	</div> 
</body>

带边框的表格:利用.table-bordered为表格和其中的每个单元格增加边框。

<body> 
	<!--容器  --> 
	<div class="container"> 
		<div class="row">			 
			<table class="table table-striped table-bordered"> 
				<thead> 
					<tr> 
						<th>第一列</th> 
						<th>第二列</th> 
						<th>第三列</th> 
						<th>第四列</th> 
					</tr> 
				</thead> 
				<tbody> 
					<tr> 
						<td>1</td> 
						<td>2</td> 
						<td>3</td> 
						<td>4</td> 
					</tr> 
					<tr> 
						<td>1</td> 
						<td>2</td> 
						<td>3</td> 
						<td>4</td> 
					</tr> 
					<tr> 
						<td>1</td> 
						<td>2</td> 
						<td>3</td> 
						<td>4</td> 
					</tr> 
					<tr> 
						<td>1</td> 
						<td>2</td> 
						<td>3</td> 
						<td>4</td> 
					</tr> 
				</tbody> 
			</table> 
		</div> 
	</div> 
</body>

鼠标悬停:利用.table-hover可以让<tbody>中的每一行响应鼠标悬停状态。

<body> 
	<!--容器  --> 
	<div class="container"> 
		<div class="row">			 
			<table class="table table-striped table-bordered table-hover"> 
				<thead> 
					<tr> 
						<th>第一列</th> 
						<th>第二列</th> 
						<th>第三列</th> 
						<th>第四列</th> 
					</tr> 
				</thead> 
				<tbody> 
					<tr> 
						<td>1</td> 
						<td>2</td> 
						<td>3</td> 
						<td>4</td> 
					</tr> 
					<tr> 
						<td>1</td> 
						<td>2</td> 
						<td>3</td> 
						<td>4</td> 
					</tr> 
					<tr> 
						<td>1</td> 
						<td>2</td> 
						<td>3</td> 
						<td>4</td> 
					</tr> 
					<tr> 
						<td>1</td> 
						<td>2</td> 
						<td>3</td> 
						<td>4</td> 
					</tr> 
				</tbody> 
			</table> 
		</div> 
	</div> 
</body>

紧缩表格:利用.table-condensed可以让表格更加紧凑,单元格中的内部(padding)均会减半。

<body> 
	<!--容器  --> 
	<div class="container"> 
		<div class="row">			 
			<table class="table table-striped table-bordered table-hover table-condensed"> 
				<thead> 
					<tr> 
						<th>第一列</th> 
						<th>第二列</th> 
						<th>第三列</th> 
						<th>第四列</th> 
					</tr> 
				</thead> 
				<tbody> 
					<tr> 
						<td>1</td> 
						<td>2</td> 
						<td>3</td> 
						<td>4</td> 
					</tr> 
					<tr> 
						<td>1</td> 
						<td>2</td> 
						<td>3</td> 
						<td>4</td> 
					</tr> 
					<tr> 
						<td>1</td> 
						<td>2</td> 
						<td>3</td> 
						<td>4</td> 
					</tr> 
					<tr> 
						<td>1</td> 
						<td>2</td> 
						<td>3</td> 
						<td>4</td> 
					</tr> 
				</tbody> 
			</table> 
		</div> 
	</div> 
</body>


状态class:通过这些状态class可以为行货单元格设置颜色。



<body> 
	<!--容器  --> 
	<div class="container"> 
		<div class="row">			 
			<table class="table table-striped table-bordered table-hover table-condensed"> 
				<thead> 
					<tr> 
						<th>第一列</th> 
						<th>第二列</th> 
						<th>第三列</th> 
						<th>第四列</th> 
					</tr> 
				</thead> 
				<tbody> 
					<tr> 
						<td class="active">1</td> 
						<td class="success">2</td> 
						<td class="warning">3</td> 
						<td class="danger">4</td> 
					</tr> 
					<tr> 
						<td>1</td> 
						<td>2</td> 
						<td>3</td> 
						<td>4</td> 
					</tr> 
					<tr> 
						<td>1</td> 
						<td>2</td> 
						<td>3</td> 
						<td>4</td> 
					</tr> 
					<tr> 
						<td>1</td> 
						<td>2</td> 
						<td>3</td> 
						<td>4</td> 
					</tr> 
				</tbody> 
			</table> 
		</div> 
	</div> 
</body


声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
KIKK导航

KIKK导航

排行榜
关注我们

一个IT知识分享的公众号