<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>表格</h2>
<p>.table为任意'table'添加基本样式 (只有横向分隔线)</p>
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>1</td>
<td>.success表示成功的操作</td>
</tr>
</tbody>
</table>
<p>.table-hover在'tbody'内的任一行启用鼠标悬停状态</p>
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
</tr>
</thead>
<tbody>
<tr class="active">
<td>1</td>
<td>.active将悬停的颜色应用在行或者单元格上</td>
</tr>
<tr>
<td>2</td>
<td>Debbie</td>
</tr>
</tbody>
</table>
<p>.table-bordered为所有表格的单元格添加边框</p>
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
</tr>
</thead>
<tbody>
<tr class="info">
<td>1</td>
<td>.info表示信息变化的操作</td>
</tr>
</tbody>
</table>
<p>.table-condensed让表格更加紧凑</p>
<table class="table table-condensed">
<thead>
<tr class="info">
<th>#</th>
<th>Firstname</th>
</tr>
</thead>
<tbody>
<tr class="warning">
<td>1</td>
<td>.warning表示一个警告的操作</td>
</tr>
<tr class="danger" r>
<td>3</td>
<td>.danger表示一个危险的操作</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
【前端开发】bootstrap框架:表格
于 2021-06-18 08:20:16 首次发布