如何实现bootstrap3.0多种表格效果
这篇文章主要讲解了“如何实现bootstrap3.0多种表格效果”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何实现bootstrap3.0多种表格效果”吧!
创新互联公司主要从事成都网站制作、成都网站建设、外贸营销网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务灵川,10多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:028-86922220
基本案例
为任意
First Name | Last Name | User Name |
---|---|---|
aehyok | leo | @aehyok |
lynn | thl | @lynn |
条纹状表格
利用.table-striped可以给
之内的每一样增加斑马条纹样式。在上面示例的table元素上再添加一个样式类
代码如下:
看现在的效果,还是有点变化的。
带边框的表格
利用.table-bordered为表格和其中的每个单元格增加边框。
还是将第一个示例中的table元素上再添加一个样式类
代码如下:
鼠标悬停
利用.table-hover可以让
中的每一行响应鼠标悬停状态。代码如下:
将鼠标移到那一行那一行就会有效果的
紧缩表格
利用.table-condensed可以让表格更加紧凑,单元格中的内部(padding)均会减半。
代码如下:
这个效果没那么明显,主要就是单元格中内容padding减半了。
状态Class
通过这些状态class可以为行货单元格设置颜色。
代码如下:
# FirstName LastName UserName 1 aehyok leo @aehyok 2 lynn thl @lynn 3 Amdy Amy @Amdy 4 Amdy Amy @Amdy
响应式表格
将任何.table包裹在.table-responsive中即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于768px宽度时,水平滚动条消失。
代码如下:
# FirstName LastName UserName 1 aehyok leo @aehyok 2 lynn thl @lynn 3 Amdy Amy @Amdy 4 Amdy Amy @Amdy
看滚动条出现了额。
感谢各位的阅读,以上就是“如何实现bootstrap3.0多种表格效果”的内容了,经过本文的学习后,相信大家对如何实现bootstrap3.0多种表格效果这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!
当前文章:如何实现bootstrap3.0多种表格效果
网站路径:http://myzitong.com/article/ggchoo.html