基本實(shí)例
代碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.min.js"></script>
</head>
<body>
<div class="container">
<table class="table table-striped">
<tr>
<th>序號</th>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
<th>電話</th>
<th>郵箱</th>
</tr>
<tr>
<td>1</td>
<td>lizh</td>
<td>man</td>
<td>34</td>
<td>15353661871</td>
<td>126@qq.com</td>
</tr>
<tr>
<td>2</td>
<td>lizh</td>
<td>man</td>
<td>34</td>
<td>15353661871</td>
<td>126@qq.com</td>
</tr>
<tr>
<td>3</td>
<td>lizh</td>
<td>man</td>
<td>34</td>
<td>15353661871</td>
<td>126@qq.com</td>
</tr>
<tr>
<td>4</td>
<td>lizh</td>
<td>man</td>
<td>34</td>
<td>15353661871</td>
<td>126@qq.com</td>
</tr>
<tr>
<td>5</td>
<td>lizh</td>
<td>man</td>
<td>34</td>
<td>15353661871</td>
<td>126@qq.com</td>
</tr>
</table>
</div>
</body>
</html>
重點(diǎn)：在table上添加class 為table ，如果想要帶斑馬線的效果在class上追加.table-striped
<table class="table table-striped">
條紋.png
有邊框的表格：在table的calss上添加 table-bordered
<table class="table table-bordered">
帶邊框的table
條紋+邊框的表格：class="table table-striped table-bordered"
<table class="table table-striped table-bordered">
條紋+邊框
鼠標(biāo)在表格懸停：table-hover
<table class="table table-hover table-bordered">
image.png
表格縮緊：table-condensed。
<table class="table table-hover table-bordered table-condensed">
表格數(shù)據(jù)狀態(tài)，底色
image.png
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.min.js"></script>
</head>
<body>
<div class="container">
<table class="table table-hover table-bordered table-condensed">
<tr >
<th>序號</th>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
<th>電話</th>
<th>郵箱</th>
</tr>
<tr class=" alert-danger">
<td>1</td>
<td>lizh</td>
<td>man</td>
<td>34</td>
<td>15353661871</td>
<td>126@qq.com</td>
</tr>
<tr class="active">
<td>2</td>
<td>lizh</td>
<td>man</td>
<td>34</td>
<td>15353661871</td>
<td>126@qq.com</td>
</tr>
<tr class="warning">
<td>3</td>
<td>lizh</td>
<td>man</td>
<td>34</td>
<td>15353661871</td>
<td>126@qq.com</td>
</tr>
<tr class="success">
<td>4</td>
<td>lizh</td>
<td>man</td>
<td>34</td>
<td>15353661871</td>
<td>126@qq.com</td>
</tr>
<tr class="info">
<td>5</td>
<td>lizh</td>
<td>man</td>
<td>34</td>
<td>15353661871</td>
<td>126@qq.com</td>
</tr>
</table>
</div>
</body>
</html>
