读书频道 > web开发 > 其他综合 > 深入理解Bootstrap
4.列排序
2014-05-08 11:00:37     我来说两句 
收藏    我要投稿   

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

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

列排序其实就是改变列的方向,也就是改变左右浮动,并且设置浮动的距离。在栅格系统里,可以通过.col-md-push-*和.col-md-pull-*来实现这一目的。先来看看效果示意图,如图2-6所示。

 

默认情况下,col-md-9在左边,col-md-3在右边,如果要互换位置,需要将col-md-9列向右移动3个列的距离,也就是推3个列的offset,样式用col-md-push-3;而col-md-3则需要向左移动,也就是拉9个列的offset,样式用col-md-pull-9。读者可能会问,为什么不能用左右浮动呢?这是因为所有的列默认情况下都是左浮动,如果要使用左右浮动,那就不知道得修改多少列的左右浮动样式了。所以,作者在统一左浮动的基础上,通过设置left和right的值来实现定位显示。代码如下所示:
// 源码1125行
.col-md-pull-12 {  right: 100%;}
.col-md-pull-11 {  right: 91.66666666666666%;}
.col-md-pull-10 {  right: 83.33333333333334%;}
.col-md-pull-9 {  right: 75%;}
.col-md-pull-8 {  right: 66.66666666666666%;}
.col-md-pull-7 {  right: 58.333333333333336%;}
.col-md-pull-6 {  right: 50%;}
.col-md-pull-5 {  right: 41.66666666666667%;}
.col-md-pull-4 {  right: 33.33333333333333%;}
.col-md-pull-3 {  right: 25%;}
.col-md-pull-2 {  right: 16.666666666666664%;}
.col-md-pull-1 {  right: 8.333333333333332%;}
.col-md-pull-0 {  right: 0;}

.col-md-push-12 {  left: 100%;}

// 其他同理,上pull的设置类似,唯一不同的就是right和left的区别
.col-md-push-0 {  left: 0;}

只是利用左浮动、left、right 3个基础样式,就能实现这种效果,不能不说这真的很巧妙啊(笔者感叹:这3种样式,10年前就会了,为啥自己想不到这种效果呢!)。

点击复制链接 与好友分享!回本站首页
分享到: 更多
您对本文章有什么意见或着疑问吗?请到论坛讨论您的关注和建议是我们前行的参考和动力  
上一篇:3.列嵌套
下一篇:2.2.3 响应式栅格
相关文章
图文推荐
3.2 Windows 7设置
3.1 DNS解析
2.3 HTTP协议
2.2 TCP/IP协议与So
排行
热门
文章
下载
读书

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