<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 表格</title>
<Meta charset="utf-8">
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet" media="screen">
<script src="bootstrap/js/jquery.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body style="padding:50px;">
<h3>基本的表格</h3>
<p>使用方法：在table后面添加.table的类即可</p>
<table class="table">
<thead>
<tr>
<th>Student-ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>Rammohan </td>
<td>Reddy</td>
<td>A+</td>
</tr>
<tr>
<td>002</td>
<td>Smita</td>
<td>Pallod</td>
<td>A</td>
</tr>
<tr>
<td>003</td>
<td>rabindranath</td>
<td>Sen</td>
<td>A+</td>
</tr>
</tbody>
</table>
<br><hr>
<h3>带条纹背景的表格</h3>
<p>使用方法：在table后面添加.table 和table-striped的类即可</p>
<table class="table table-striped">
<thead>
<tr>
<th>Student-ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>Rammohan </td>
<td>Reddy</td>
<td>A+</td>
</tr>
<tr>
<td>002</td>
<td>Smita</td>
<td>Pallod</td>
<td>A</td>
</tr>
<tr>
<td>003</td>
<td>rabindranath</td>
<td>Sen</td>
<td>A+</td>
</tr>
</tbody>
</table>
<br><hr>
<h3>带边框的表格</h3>
<p>使用方法：在table后面添加.table 和table-bordered的类即可，会呈现圆角边框的效果,追加一个table-hover的类，会鼠标悬停的行会呈现浅灰色背景</p>
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>Student-ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>Rammohan </td>
<td>Reddy</td>
<td>A+</td>
</tr>
<tr>
<td>002</td>
<td>Smita</td>
<td>Pallod</td>
<td>A</td>
</tr>
<tr>
<td>003</td>
<td>rabindranath</td>
<td>Sen</td>
<td>A+</td>
</tr>
</tbody>
</table>
<br><hr>
<h3>紧缩的表格</h3>
<p>使用方法：在table后面添加.table的类，并追加一个table-condensed的类，会减少一半的内边距，以缩紧表格</p>
<table class="table table-striped table-bordered table-hover table-condensed">
<thead>
<tr>
<th>Student-ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>Rammohan </td>
<td>Reddy</td>
<td>A+</td>
</tr>
<tr>
<td>002</td>
<td>Smita</td>
<td>Pallod</td>
<td>A</td>
</tr>
<tr>
<td>003</td>
<td>rabindranath</td>
<td>Sen</td>
<td>A+</td>
</tr>
<tr>
<td>002</td>
<td>Smita</td>
<td>Pallod</td>
<td>A</td>
</tr>
</tbody>
</table>
<br><hr>
<h3>表格行的类</h3>
<p>表格行（tr）后添加.success[绿]/error[红]/warning[黄]/info[蓝]四种背景色显示</p>
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>Student-ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>001</td>
<td>Rammohan </td>
<td>Reddy</td>
<td>A+</td>
</tr>
<tr class="error">
<td>002</td>
<td>Smita</td>
<td>Pallod</td>
<td>A</td>
</tr>
<tr class="warning">
<td>003</td>
<td>rabindranath</td>
<td>Sen</td>
<td>A+</td>
</tr>
<tr class="info">
<td>002</td>
<td>Smita</td>
<td>Pallod</td>
<td>A</td>
</tr>
</tbody>
</table>
</body>
</html>预览图片（缩放50%）：
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
