Copyright Notice
- The original author of this article: Brother Gu’s younger brother
- Author blog address: http://blog.csdn.net/lfdfhl
Bootstrap provides a variety of simple and beautiful forms.
basic form
Use table to realize the basic form.
Form with zebra crossing
Use table-striped to realize the table with zebra crossing.
table with border
Use table-bordered to implement a table with borders.
Table that changes color on mouseover
Use table-hover to realize the table that changes color when hovering over the mouse.
crunch form
Use table-condensed to achieve compact tables.
Rich Custom Forms
Use the css provided by Bootstrap to realize rich custom tables.
Form case
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
<!--移动设备优先，即获得更好的响应式支持-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--引入Bootstrap的css文件-->
<link rel="stylesheet" href="../Bootstrap/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<!--基本表格-->
<table class="table">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>生日</th>
<th>邮箱</th>
</tr>
<tbody>
<tr>
<td>1</td>
<td>lucy</td>
<td>28</td>
<td>2022/12/12</td>
<td>[email protected]</td>
</tr>
<tr>
<td>2</td>
<td>tata</td>
<td>29</td>
<td>2022/11/11</td>
<td>[email protected]</td>
</tr>
<tr>
<td>3</td>
<td>lucy</td>
<td>27</td>
<td>2022/10/10</td>
<td>[email protected]</td>
</tr>
<tr>
<td>4</td>
<td>dodo</td>
<td>25</td>
<td>2022/09/09</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
<br><br><br>
<!--带斑马线的表格table-striped-->
<table class="table table-striped">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>生日</th>
<th>邮箱</th>
</tr>
<tbody>
<tr>
<td>1</td>
<td>lucy</td>
<td>28</td>
<td>2022/12/12</td>
<td>[email protected]</td>
</tr>
<tr>
<td>2</td>
<td>tata</td>
<td>29</td>
<td>2022/11/11</td>
<td>[email protected]</td>
</tr>
<tr>
<td>3</td>
<td>lucy</td>
<td>27</td>
<td>2022/10/10</td>
<td>[email protected]</td>
</tr>
<tr>
<td>4</td>
<td>dodo</td>
<td>25</td>
<td>2022/09/09</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
<br><br><br>
<!--带边框的表格table-bordered-->
<table class="table table-striped table-bordered">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>生日</th>
<th>邮箱</th>
</tr>
<tbody>
<tr>
<td>1</td>
<td>lucy</td>
<td>28</td>
<td>2022/12/12</td>
<td>[email protected]</td>
</tr>
<tr>
<td>2</td>
<td>tata</td>
<td>29</td>
<td>2022/11/11</td>
<td>[email protected]</td>
</tr>
<tr>
<td>3</td>
<td>lucy</td>
<td>27</td>
<td>2022/10/10</td>
<td>[email protected]</td>
</tr>
<tr>
<td>4</td>
<td>dodo</td>
<td>25</td>
<td>2022/09/09</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
<br><br><br>
<!--鼠标悬停变色的表格table-hover-->
<table class="table table-striped table-bordered table-hover">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>生日</th>
<th>邮箱</th>
</tr>
<tbody>
<tr>
<td>1</td>
<td>lucy</td>
<td>28</td>
<td>2022/12/12</td>
<td>[email protected]</td>
</tr>
<tr>
<td>2</td>
<td>tata</td>
<td>29</td>
<td>2022/11/11</td>
<td>[email protected]</td>
</tr>
<tr>
<td>3</td>
<td>lucy</td>
<td>27</td>
<td>2022/10/10</td>
<td>[email protected]</td>
</tr>
<tr>
<td>4</td>
<td>dodo</td>
<td>25</td>
<td>2022/09/09</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
<br><br><br>
<!--紧缩表格table-condensed-->
<table class="table table-striped table-bordered table-condensed">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>生日</th>
<th>邮箱</th>
</tr>
<tbody>
<tr>
<td>1</td>
<td>lucy</td>
<td>28</td>
<td>2022/12/12</td>
<td>[email protected]</td>
</tr>
<tr>
<td>2</td>
<td>tata</td>
<td>29</td>
<td>2022/11/11</td>
<td>[email protected]</td>
</tr>
<tr>
<td>3</td>
<td>lucy</td>
<td>27</td>
<td>2022/10/10</td>
<td>[email protected]</td>
</tr>
<tr>
<td>4</td>
<td>dodo</td>
<td>25</td>
<td>2022/09/09</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
<br><br><br>
<!--更加丰富的表格-->
<table class="table table-striped table-bordered table-condensed">
<tr>
<th class="text-center">编号</th>
<th>姓名</th>
<th>年龄</th>
<th>生日</th>
<th>邮箱</th>
</tr>
<tbody>
<tr class="info text-center">
<td>1</td>
<td>lucy</td>
<td>28</td>
<td>2022/12/12</td>
<td>[email protected]</td>
</tr>
<tr class="success">
<td>2</td>
<td>tata</td>
<td>29</td>
<td>2022/11/11</td>
<td>[email protected]</td>
</tr>
<tr class="warning">
<td>3</td>
<td>lucy</td>
<td>27</td>
<td>2022/10/10</td>
<td>[email protected]</td>
</tr>
<tr>
<td>4</td>
<td>dodo</td>
<td>25</td>
<td class="info">2022/09/09</td>
<td class="danger">[email protected]</td>
</tr>
</tbody>
</table>
<br><br><br>
</div>
</body>
</html>
