表格

2017-02-27  本文已影响0人  ErikYu

基本示例

<tabel class='table'>
    ...
</tabel>

条纹状表格

依赖:nth-child选择器CSS实现,IE8不兼容

<tabel class='table tabel-striped'>
    ...
</tabel>

带边框的表格

<tabel class='table tabel-bordered'>
    ...
</tabel>

鼠标悬停效果

<tabel class='table tabel-hover'>
    ...
</tabel>

紧缩表格:padding减半

<tabel class='table tabel-condensed'>
    ...
</tabel>

给行或单元格增加状态类

<table class='table'>
    <tr class='active'></tr>
    <tr class='success'></tr>
    <tr class='danger'></tr>
    <tr class='warning'></tr>
    <tr class='info'></tr>
</tabel>

响应式表格:屏幕宽度小于768px时,显示水平滚动条

<tabel class='tabel table-responsive'>
    ...
</table>
上一篇 下一篇

猜你喜欢

热点阅读