读书频道 > 网站 > 网页设计 > 深入理解Bootstrap
3.8.3 内容浮动
14-05-09    奋斗的小年轻
收藏    我要投稿   

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

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

在平时制作页面的过程中,对于内容浮动,一般会有3种需求(左浮动、右浮动、居中对齐),另外还有一种清除浮动需求。

对于左右浮动,分别定义了pull-left和pull-right样式。其源码如下:
/* 源码 5650 行*/
.pull-right {  float: right !important;  /*向右浮动*/ }
.pull-left {  float: left !important;  /*向左浮动*/}
而对于居中对齐,使用center-block样式即可,其定义原理是让左右外边距均为auto即可。源码定义如下:
/* 源码 5645 行*/
.center-block {
  display: block;     /*将页面元素设置为块级元素*/
  margin-right: auto;    /*左右居中显示*/
  margin-left: auto;
}

一般某一个元素在浮动以后,在紧接着的元素使用之前可以清除浮动,以避免布局错乱。清除浮动一般是设置元素的before伪类display为table(且content为空),并设置after伪类的clear为both。Bootstrap提供了一个clearfix样式用于清除浮动,其定义如下:
/* 源码 5598 行*/
.clearfix:before,
.clearfix:after {  display: table;  content: " ";}
.clearfix:after {  clear: both;}

查看CSS文件的5598行以后的代码可发现,清除浮动的代码有关有50行左右,主要是对其他一些组件所使用的样式也定义了清除浮动代码(而不用再次应用clearfix),比如为nav样式和modal-footer样式清除浮动,就可以避免后续元素的布局错乱。

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

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