<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>表格</title>
<link rel="stylesheet" type="text/css" href="bootstrap-v3/css/bootstrap.css">
</head>
<body>
<div class="container">
<h1 class="page-header">表格</h1>
<!--
基础样式:
.table 基础表格
附加样式:
.table-bordered 带边框的表格
.table-striped 斑马线表格
.table-hover 鼠标悬停的行表格高亮
.table-condensed 紧凑型表格 内边距减半
提供五中不同类名控制行的背景色
.active 将悬停颜色应用在行或者单元格上
.success标识成功或积极的动作
.info 标识普通的提示信息或动作
.warning标识警告或需要用户注意
.danger 标识危险或潜在的带来负面影响的动作
-->
<div class="table-responsive">
<table class="table table-bordered table-striped table-hover table-condensed">
<thead>
<tr>
<td>姓名</td>
<td>年龄</td>
</tr>
</thead>
<tbody>
<tr class="active">
<td>狄仁杰狄仁杰狄仁杰狄仁杰狄仁杰狄仁杰狄仁杰狄仁杰狄仁杰狄仁杰狄仁杰狄仁杰狄仁杰狄仁杰狄仁杰狄仁杰狄仁杰狄仁杰狄仁杰狄仁杰狄仁杰</td>
<td>18</td>
</tr>
<tr class="success">
<td>狄仁杰</td>
<td>18</td>
</tr>
<tr class="info">
<td>狄仁杰</td>
<td>18</td>
</tr>
<tr class="warning">
<td>狄仁杰</td>
<td>18</td>
</tr>
<tr class="danger">
<td>狄仁杰</td>
<td>18</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>上述运行结果：
1729
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
