bootstrap3.0教程之多种表格效果（条纹状表格、条纹状
表格、⿏标悬停等）
前⾔
本⽂主要讲解的是表格，这个其实对于做过⽹站的⼈来说，并不陌⽣，⽽且可以说是最为常⽤的各种列表的展⽰，有时候也会因为⽤户或者⽼板的需求⽽感到头疼。下⾯我们来看⼀下，Bootstrap已经为我们准备那些类型的表格呢？如下所⽰：
1.基本案例
2.条纹状表格
3.带边框的表格
4.⿏标悬停
5.紧缩表格
6.状态class
7.响应式表格
8.总结
基本案例
为任意<table>标签添加.table可以为其赋予基本的样式—少量的内补（padding）和⽔平⽅向的分隔线。这种⽅式看起来很多余！？但是我们觉得，表格元素使⽤的很⼴泛，如果我们为其赋予默认样式可能会影响例如⽇历和⽇期选择之类的插件，所以我们选择将其样式独⽴出来。
⼀个简单的Table⽰例
复制代码
代码如下:
<div class="container">
<table class="table">
<caption>Table基本案例</caption>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>User Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>aehyok</td>
<td>leo</td>
<td>@aehyok</td>
</tr>
<tr>
<td>lynn</td>
<td>thl</td>tabletable
<td>@lynn</td>
</tr>
</tbody>
</table>
</div>
条纹状表格
利⽤.table-striped可以给<tbody>之内的每⼀样增加斑马条纹样式。
在上⾯⽰例的table元素上再添加⼀个样式类
复制代码
代码如下:
<tableclass="tabletable-striped">
看现在的效果，还是有点变化的。
带边框的表格
利⽤.table-bordered为表格和其中的每个单元格增加边框。
还是将第⼀个⽰例中的table元素上再添加⼀个样式类
复制代码
代码如下:
<tableclass="tabletable-bordered">
⿏标悬停
利⽤.table-hover可以让<tbody>中的每⼀⾏响应⿏标悬停状态。
复制代码
代码如下:
<tableclass="tabletable-hover">
将⿏标移到那⼀⾏那⼀⾏就会有效果的
紧缩表格
利⽤.table-condensed可以让表格更加紧凑，单元格中的内部（padding）均会减半。
复制代码
代码如下:
<tableclass="tabletable-condensed">
这个效果没那么明显，主要就是单元格中内容padding减半了。
状态Class
通过这些状态class可以为⾏货单元格设置颜⾊。
复制代码
代码如下:
<tableclass="tabletable-condensed">
<caption>Table</caption>
<thead>
<tr>
<th>#</th>
<th>FirstName</th>
<th>LastName</th>
<th>UserName</th>
</tr>
</thead>
<tbody>
<trclass="active">
<td>1</td>
<td>aehyok</td>
<td>leo</td>
<td>@aehyok</td>
</tr>
<trclass="success">
<td>2</td>
<td>lynn</td>
<td>thl</td>
<td>@lynn</td>
</tr>
<trclass="warning">
<td>3</td>
<td>Amdy</td>
<td>Amy</td>
<td>@Amdy</td>
</tr>
<trclass="danger">
<td>4</td>
<td>Amdy</td>
<td>Amy</td>
<td>@Amdy</td>
</tr>
<tr>
<tdclass="success">5</td>
<tdclass="danger">Amdy</td>
<tdclass="warning">Amy</td>
<tdclass="active">@Amdy</td>
</tr>
</tbody>
</table>
响应式表格
将任何.table包裹在.table-responsive中即可创建响应式表格，其会在⼩屏幕设备上（⼩于768px）⽔平滚动。当屏幕⼤于768px宽度时，⽔平滚动条消失。
复制代码
代码如下:
<divclass="table-responsive">
<tableclass="table">
<caption>Table</caption>
<thead>
<tr>
<th>#</th>
<th>FirstName</th>
<th>LastName</th>
<th>UserName</th>
</tr>
</thead>
<tbody>
<trclass="active">
<td>1</td>
<td>aehyok</td>
<td>leo</td>
<td>@aehyok</td>
</tr>
<trclass="success">
<td>2</td>
<td>lynn</td>
<td>thl</td>
<td>@lynn</td>
</tr>
<trclass="warning">
<td>3</td>
<td>Amdy</td>
<td>Amy</td>
<td>@Amdy</td>
</tr>
<trclass="danger">
<td>4</td>
<td>Amdy</td>
<td>Amy</td>
<td>@Amdy</td>
</tr>
<tr>
<tdclass="success">5</td>
<tdclass="danger">Amdy</td> <tdclass="warning">Amy</td> <tdclass="active">@Amdy</td> </tr>
</tbody>
</table>
</div>
看滚动条出现了额。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论