表格

基本示例

<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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 表格是Bootstrap的一个基础组件之一,Bootstrap为表格提供了一种基础样式和4种附加样式以及1个支持响...
    Mandy_jin阅读 4,093评论 0 1
  • 知识点 表格样式.table -----> 赋予基本的样式,少量的内补(padding)和水平方向的分隔线;.ta...
    蝴蝶结199007阅读 3,723评论 0 1
  • 不管制作哪种表格都离不开类名“table”。所以大家在使用Bootstrap表格时,千万注意,你的 元素中一定不能...
    Murrey_Xiao阅读 2,507评论 0 2
  • app的改版思路流程:1、竞品分析(产出共性与差异对比图) 2、卡片分类法(产出改版后的信息架构树状图和改版思路...
    leapane阅读 4,808评论 1 9
  • 人生何处不尴尬?不尴尬不人生。但是尴尬过后,希望你会有一丝顿悟,你会明白尴尬的意义,非同寻常。 《尴尬》 这感觉,...
    九五乾谦阅读 2,895评论 3 14