Bootstrap 表格
来源：互联网 发布：模仿周杰伦的网络 编辑：程序博客网 时间：2024/06/02 16:43
<!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%）：
0 0
