您的位置：首页 > Web前端 > BootStrap

bootstrap--表格制作

2017-11-30 23:12 211 查看
今天回来收拾一下有点晚了，就简单的写一个知识点关于表格的制作，我提炼一下具体的写法：

<table class="table table-hover">
<thead>
<tr class="danger">
<th>first</th>
<th>second</th>
<th>third</th>
</tr>
</thead>
<tbody>
<tr>
<td>make</td>
<td>noese</td>
<td>snake</td>
</tr>
<tr class="active">
<td>nose</td>
<td>nice</td>
<td>miss</td>
</tr>
<tr class="danger">
<td>pole</td>
<td>pose</td>
<td>plsy</td>
</tr>
</tbody>
</table>
首先是需要写一个table类，其次thead  tbody用法
还有在class里面可以添加一个类可以改变一行的颜色

因为比较简单只需要多练练手，下面会给出一个代码样例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script type="text/javascript" src="js/bootstrap.js" ></script>
<link rel="stylesheet" href="css/bootstrap.css" />
</head>
<body>
<div class="container">
<table class="table table-hover">
<thead>
<tr class="danger">
<th>first</th>
<th>second</th>
<th>third</th>
</tr>
</thead><tbody> <tr> <td>make</td> <td>noese</td> <td>snake</td> </tr><tr class="active"> <td>nose</td> <td>nice</td> <td>miss</td> </tr><tr class="danger"> <td>pole</td> <td>pose</td> <td>plsy</td> </tr> </tbody> </table>
<hr />
<table class="table table-responsive">
<thead>
<tr class="success">
<th>incase</th>
<th>innose</th>
<th>innice</th>
</tr>
</thead>

<tbody>
<tr class="danger">
<td>make</td>
<td>inces</td>
<td>kill</td>
</tr>

<tr class="danger">
<td>tree</td>
<td>tess</td>
<td>tere</td>
</tr>

<tr class="success">
<td>nose</td>
<td>mike</td>
<td>tesi</td>
</tr>
</tbody>
</table>

<hr />
<table class="table table-bordered">
<thead>
<tr>
<th>one</th>
<th>two</th>
<th>three</th>
</tr>
</thead>

<tbody>
<tr>
<td>sdf</td>
<td>fgh</td>
<td>kmi</td>
</tr>

<tr>
<td>suy</td>
<td>ijm</td>
<td>imk</td>
</tr>

<tr>
<td>mki</td>
<td>olp</td>
<td>ert</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>



内容比较简单但是用到的地方比较多，多练习一下，下次有需要可以结合写一个DOM。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航