正文

BootStrap的table表格的基本写法

IP云
IP云V管理员/4 阅读
11/25
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

代码如下： 

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

相关阅读

目录[+]