BootStrap的table表格的基本写法

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<title>BootStrap的基础入门</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
		<script src="bootstrap/js/jquery-1.10.2.min.js"></script>
	    <script src="bootstrap/js/bootstrap.min.js"></script>
	</head>
	<body style="padding: 50px;background-color: #CCCCCC">
		<div class="container" style="background-color: #ffffff;padding: 50px">
			<!--　　　　　　　　　　　　　　 　　<h1 class="text-center">有了Html，<del>css和js就能学习</del></h1>
			　　<ul class="list-inline">
				　　<li>java</li>
				　　<li>Python</li>
				　　<li>ruby</li>
			　　</ul>
			　　<p>由两个前端设计师开发的一个前端的框架（Html，css，js）</p>　　　　　　　　　　　　　　-->
			<div class="table-responsive">
			<table class="table table-hover " >
				<tr class="active">
					<td> java</td>
					<td> python</td>
					<td> ruby</td>
					<td> .net</td>
				</tr>
				<tr class="success">
					<td> zhl</td>
					<td> zhl</td>
					<td> zhl</td>
					<td> zhl</td>
				</tr>
				<tr class="info">
					<td> zhl</td>
					<td> zhl</td>
					<td> zhl</td>
					<td> zhl</td>
				</tr>
				<tr class="warning">
					<td> zhl</td>
					<td> zhl</td>
					<td> zhl</td>
					<td> zhl</td>
				</tr>
				<tr class="danger">
					<td> zhl</td>
					<td> zhl</td>
					<td> zhl</td>
					<td> zhl</td>
				</tr>
			</table>
			</div>
		</div>
	</body>
</html>

　　

posted @ 2017-01-17 19:01  张昊亮  阅读(1339)  评论(0)  编辑  收藏  举报