使用bootstrap创建一个表格也是很简单的,并且能个设计得足够漂亮
代码展示
<div class="container">
<div class="table-responsive">
<table class="table table-bordered table-hover">
<thead>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>电话</td>
<td>班级</td>
<td>学号</td>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>13</td>
<td>1332213</td>
<td>13312</td>
<td>13312</td>
</tr>
<tr>
<td>张三</td>
<td>13</td>
<td>1332213</td>
<td>13312</td>
<td>13312</td>
</tr>
</tbody>
</table>
</div>
</div>
事实上,在table class=”table” 用class以改名字命名之后,bootstrap将会自动修饰生成的表格,其他地方还是跟以往一样的写
table标签中的几个参数
1.紧凑型表格 class=”table table-condensed”
2.鼠标滑过效果 只需要在表格中加上 table-hover
3.斑马线表格 class=”table table-striped”
4.表格边框 table-bordered ——-以上所有不冲突的参数都可写到一个class中 tr标签上的几个参数,主要用来控制颜色和状态 class=”active”还有其他参数请参考runoob上面的具体教程
< div class=”table-responsive”>< /div>该标签主要是将表格设置成响应式