读书频道 > 网站 > 网页设计 > 深入理解Bootstrap
3.4.7 响应式表格
14-05-09    奋斗的小年轻
收藏    我要投稿   

本文所属图书 > 深入理解Bootstrap

本书是目前Bootstrap领域技术版本最新、内容最全面、介绍最详细、实战性最强、最具深度的著作。它是资深Web技术专家多年工作经验的结晶,不仅授人以鱼,全面讲解了Bootstrap各个功能组件的使用方法,以及对现有插立即去当当网订购

随着响应式设计的大量需求,Bootstrap为表格也提供了一个响应式设计的容器(.table-responsive样式),将.table-responsive样式包装在.table样式外部即可创建响应式表格,其会在小屏幕设备上(小于768像素)水平滚动。而当屏幕大于768像素宽度时,水平滚动条消失。示例如下:
<div class="table-responsive">
    <table class="table">
        ...
    </table>
</div>

运行效果如图3-17所示。

 

响应式表格的实现原理是利用了CSS的媒体查询特性,在小于768像素的设备上应用@media(max-width: 767px)里的样式。该样式主要有3个方面的设置:

对.table-responsive容器边框以及滚动条进行了设置。

把原有.table样式的底部外边距margin-bottom从20像素改为了0像素,其目的是消除滚动条带来的上下高度差,并在.table-responsive样式上又设置了一个margin-bottom: 15px,以避免和容器外部的下一个元素重叠。

将所有单元格的文本设置成不自动换行,以保留原有样式。

实现响应式的详细源码如下:
// 源码1583行
@media (max-width: 767px) {
  .table-responsive {
    width: 100%;
    margin-bottom: 15px;  /* 设置底部外边距,避免重叠 */
    overflow-x: scroll;  /* 超出范围,水平可滚动 */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #ddd; /* 设置1像素宽的边框 */
  }
  .table-responsive > .table {    margin-bottom: 0;  }
  .table-responsive > .table > thead > tr > th,
  /* 省略部分样式 */
  .table-responsive > .table > tfoot > tr > td {
white-space: nowrap;  /* 确保单元格中的文本不会换行,直到遇到 <br> 标签为止*/
  }
  .table-responsive > .table-bordered {    border: 0;  }

通过上述代码,可以看到.table-responsive给自己加了一个1px的外边框。如果在
.table上再使用.table-bordered样式的话,就会和表格的外边框重合了,变粗了,可能会想象成如图3-18所示的效果。

 

聪明的Bootstrap开发团队怎么会犯这样低级的错误呢?所以他们在该响应式样式的内部,针对.table-bordered样式又进行了去边框设置。源码如下:
// 源码1604行
  .table-responsive > .table-bordered {
    border: 0; /*将整个表格的外边框设置为0像素*/
  }
  .table-responsive > .table-bordered > tbody > tr > th:first-child,
  /*此处省略一些选择符*/
  .table-responsive > .table-bordered > tbody > tr > td:first-child,
  .table-responsive > .table-bordered > tfoot > tr > td:first-child {
    border-left: 0; /*将所有tr的第一个单元格(即最左边的一列)的左边框都置为0像素*/
  }
  .table-responsive > .table-bordered > tbody > tr > th:last-child,
  /*此处省略一些选择符*/
  .table-responsive > .table-bordered > tbody > tr > td:last-child,
  .table-responsive > .table-bordered > tfoot > tr > td:last-child {
    border-right: 0; /*将所有tr的最后一个单元格(即最右边的一列)的右边框都设置为0像素*/
  }
  .table-responsive > .table-bordered > tbody > tr:last-child > th,
  /*此处省略一些选择符*/
  .table-responsive > .table-bordered > tfoot > tr:last-child > td {
    border-bottom: 0; /*将最后一行tr里的单元格的底部边框设置为0像素*/
  }

运行效果如图3-19所示。

 

点击复制链接 与好友分享!回本站首页
分享到: 更多
您对本文章有什么意见或着疑问吗?请到论坛讨论您的关注和建议是我们前行的参考和动力  
上一篇:1.3 功能
下一篇:1.5 小结
相关文章
图文推荐
JavaScript网页动画设
1.9 响应式
1.8 登陆页式
1.7 主题式
排行
热门
文章
下载
读书

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训
版权所有: 红黑联盟--致力于做最好的IT技术学习网站