请选择 进入手机版 | 继续访问电脑版
本站特色:极好的技术研究氛围!所有技术交流,必有回复!

疯狂Java联盟

 找回密码
 加入联盟
查看: 533|回复: 0

Bootstrap连载(4)-- Bootstrap表格

[复制链接]
发表于 2018-7-12 17:58:42 | 显示全部楼层 |阅读模式
更多Bootstrap的知识请参考李刚老师著作《疯狂前端开发讲义:jQuery+AngularJS+Bootstrap前端开发实战 》
京东购买地址:https://item.jd.com/12249634.html

1.基本表格
为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补(padding)和水平方向的分隔线。这种方式看起来很多余!?但是我们觉得,表格元素使用的很广泛,如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件,所以我们选择将此样式独立出来。

2.条纹状表格
通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。

3.带边框的表格
添加 .table-bordered 类为表格和其中的每个单元格增加边框。

4.鼠标悬停
通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。

5.紧缩表格
通过添加 .table-condensed 类可以让表格更加紧凑,单元格中的内补(padding)均会减半。

6.响应式表格
将任何 .table 元素包裹在 .table-responsive 元素内,即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于 768px 宽度时,水平滚动条消失。
您需要登录后才可以回帖 登录 | 加入联盟

本版积分规则

视频、代码、电子书下载
请关注"疯狂图书"公众号
QQ交流1群: 545923995  未满
微信群请扫二维码
QQ交流1群:
545923995
(未满)

小黑屋|手机版|Archiver|疯狂Java联盟 ( 粤ICP备11094030号 )

GMT+8, 2019-5-20 22:26 , Processed in 0.273819 second(s), 6 queries , File On.

快速回复 返回顶部 返回列表