bootstrap--表格制作

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

<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>

内容比较简单但是用到的地方比较多,多练习一下,下次有需要可以结合写一个DOM。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值