读书频道 > 网站 > 网页设计 > 深入理解Bootstrap
3.4.1 基础样式
14-05-08    奋斗的小年轻
收藏    我要投稿   

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

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

只需要在table元素上应用.table样式即可制作出比较漂亮的表格。示例如下:
<table class="table">
   ...
</table>

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

 

.table样式的主要作用有3个:增加单元格的内边距、在thead的底部设置一条2像素的粗线,以及在每行记录的顶部都有1条1个像素的细线。主要源码如下:
// 源码1401行
table {  max-width: 100%;  background-color: transparent;}
th {  text-align: left;}
.table {  width: 100%;  margin-bottom: 20px;}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  padding: 8px;    /*设置单元格的内边距*/
  line-height: 1.428571429;
  vertical-align: top;
  border-top: 1px solid #ddd;  /* 每行记录的顶部都有1条1个像素宽的横线 */
}
.table > thead > tr > th {
  vertical-align: bottom;
  border-bottom: 2px solid #ddd; /* thead有1条2个像素宽的横线 */
}
/*省略部分样式*/
.table > tbody + tbody {
  border-top: 2px solid #ddd;
    /* 如果表格里有2个tbody,两者之间也会有1条2个像素宽的横线 */
}

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

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