跨境电商博客

Bootstrap响应式表格写法

随着各种手持设备的出现,要想让你的Web页面适合千罗万像的设备浏览,响应式设计的呼声越来越高。在Bootstrap中也为表格提供了响应式的效果,将其称为响应式表格。
Bootstrap提供了一个容器,并且此容器设置类名“.table-responsive”,此容器就具有响应式效果,然后将
[html]
<table class="table">
[/html]
置于这个容器当中,这样表格也就具有响应式效果。
Bootstrap中响应式表格效果表现为:当你的浏览器可视区域小于768px时,表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时,表格底部水平滚动条就会消失。示例如下:
[html]
<div class="table-responsive">
<table class="table table-bordered">

</table>
</div>
[/html]
运行效果如下:
bootstrap响应式表格-宽屏效果
(宽屏效果)
bootstrap响应式表格-窄屏效果
(窄屏效果)

赞 (0) 打赏

评论 0

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏