bootstrap--表格制作

最新推荐文章于 2023-01-09 15:36:04 发布

sunnyboysix

最新推荐文章于 2023-01-09 15:36:04 发布

阅读量797

点赞数

分类专栏：前端开发文章标签： bootstrap 表格

本文链接：https://blog.csdn.net/sunnyboysix/article/details/78682124

版权

前端开发专栏收录该内容

47 篇文章 1 订阅

订阅专栏

今天回来收拾一下有点晚了，就简单的写一个知识点关于表格的制作，我提炼一下具体的写法：

<table class="table table-hover">
	  		<thead>
	  			<tr class="danger">
	  			<th>first</th>
	  			<th>second</th>
	  			<th>third</th>
	  			</tr>
	  		</thead>


	  		<tbody>
	  			<tr>
	  				<td>make</td>
	  				<td>noese</td>
	  				<td>snake</td>
	  			</tr>


	  			<tr class="active">
	  				<td>nose</td>
	  				<td>nice</td>
	  				<td>miss</td>
	  			</tr>


	  			<tr class="danger">
	  				<td>pole</td>
	  				<td>pose</td>
	  				<td>plsy</td>
	  			</tr>
	  		</tbody>
	  	</table>

首先是需要写一个table类，其次thead tbody用法

还有在class里面可以添加一个类可以改变一行的颜色

因为比较简单只需要多练练手，下面会给出一个代码样例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
		<script type="text/javascript" src="js/bootstrap.js" ></script>
		<link rel="stylesheet" href="css/bootstrap.css" />
	</head>
	<body>
	  <div class="container">
	  	<table class="table table-hover">
	  		<thead>
	  			<tr class="danger">
	  			<th>first</th>
	  			<th>second</th>
	  			<th>third</th>
	  			</tr>
	  		</thead>
	  		<tbody>
	  			<tr>
	  				<td>make</td>
	  				<td>noese</td>
	  				<td>snake</td>
	  			</tr>
	  			<tr class="active">
	  				<td>nose</td>
	  				<td>nice</td>
	  				<td>miss</td>
	  			</tr>
	  			<tr class="danger">
	  				<td>pole</td>
	  				<td>pose</td>
	  				<td>plsy</td>
	  			</tr>
	  		</tbody>
	  	</table>
	  	
	  	<hr />
	  	<table class="table table-responsive">
	  	<thead>
	  		<tr class="success">
	  			<th>incase</th>
	  			<th>innose</th>
	  			<th>innice</th>
	  		</tr>
	  	</thead>
	  	
	  	<tbody>
	  	<tr class="danger">
	  		<td>make</td>
	  		<td>inces</td>
	  		<td>kill</td>
	  	</tr>
	  	
	  	<tr class="danger">
	  		<td>tree</td>
	  		<td>tess</td>
	  		<td>tere</td>
	  	</tr>
	  	
	  	<tr class="success">
	  		<td>nose</td>
	  		<td>mike</td>
	  		<td>tesi</td>
	  	</tr>
	  	</tbody>
	  	</table>
	  	
	  	<hr />
	  	<table class="table table-bordered">
	  		<thead>
	  			<tr>
	  				<th>one</th>
	  				<th>two</th>
	  				<th>three</th>
	  			</tr>
	  		</thead>
	  		
	  		<tbody>
	  			<tr>
	  				<td>sdf</td>
	  				<td>fgh</td>
	  				<td>kmi</td>
	  			</tr>
	  			
	  			<tr>
	  				<td>suy</td>
	  				<td>ijm</td>
	  				<td>imk</td>
	  			</tr>
	  			
	  			<tr>
	  				<td>mki</td>
	  				<td>olp</td>
	  				<td>ert</td>
	  			</tr>
	  		</tbody>
	  	</table>
	  </div>
	</body>
</html>