bootstrap学习笔记-列偏移
2015-12-17 12:09
731 查看
有的时候,我们不希望相邻的两个列紧靠在一起,但又不想使用margin或者其他的技术手段来。这个时候就可以使用列偏移(offset)功能来实现。使用列偏移也非常简单,只需要在列元素上添加类名“col-md-offset-*”(其中星号代表要偏移的列组合数),那么具有这个类名的列就会向右偏移。例如,你在列元素上添加“col-md-offset-4”,表示该列向右移动4个列的宽度。
如上面的示例代码,得到的效果如下或在最右侧结果窗口中可以看到(鼠标移到结果窗口,单击出现的全屏按钮):
实现原理非常简单,就是利用十二分之一(1/12)的margin-left。然后有多少个offset,就有多少个margin-left。在bootstrap.css中第1205行~1241行所示:
<div class="container"> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-2 col-md-offset-4">列向右移动四列的间距</div> <div class="col-md-2">.col-md-3</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 col-md-offset-4">列向右移动四列的间距</div> </div> </div>
如上面的示例代码,得到的效果如下或在最右侧结果窗口中可以看到(鼠标移到结果窗口,单击出现的全屏按钮):
实现原理非常简单,就是利用十二分之一(1/12)的margin-left。然后有多少个offset,就有多少个margin-left。在bootstrap.css中第1205行~1241行所示:
.col-md-offset-12 { margin-left: 100%; } .col-md-offset-11 { margin-left: 91.66666667%; } .col-md-offset-10 { margin-left: 83.33333333%; } .col-md-offset-9 { margin-left: 75%; } .col-md-offset-8 { margin-left: 66.66666667%; } .col-md-offset-7 { margin-left: 58.33333333%; } .col-md-offset-6 { margin-left: 50%; } .col-md-offset-5 { margin-left: 41.66666667%; } .col-md-offset-4 { margin-left: 33.33333333%; } .col-md-offset-3 { margin-left: 25%; } .col-md-offset-2 { margin-left: 16.66666667%; } .col-md-offset-1 { margin-left: 8.33333333%; } .col-md-offset-0 { margin-left: 0; }
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ng-app="DBInfoApp"> <head> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-2 col-md-offset-4">4 intervals</div> <div class="col-md-2">.col-md-3</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 ">4(2) intervals</div> </div> </div> </body> </html>
相关文章推荐
- Angular - - angular.bind、angular.bootstrap、angular.copy
- 【SSM框架 SSM项目源码 SSM源码 下载】java框架整合Springmvc+mybatis+shiro+bootstrap
- bootstrap栅格系统学习笔记
- angular bootstrap
- 真当程序猿眼中只有美女和高薪?
- dart web 模板 ( 一 ) [基于 SB Admin2 Bootstrap]
- Bootstrap 笔记
- Stucts应用引起的OutOfMemoryError
- Bootstrap响应式图片的进一步处理
- Bootstrap Glyphicons 图标
- bootstrap table处理含有子集json的数据以及fastjson禁止循环引用的问题
- Django+Jquery+Bootstrap Modal+Iframe使用异步机制上传文件实现方法
- JS组件系列——Bootstrap寒冬暖身篇:弹出框和提示框效果以及代码展示
- bootstrap修改默认字体,更换为微软雅黑或其他字体的方法
- bootstrap-wysiwyg整合ajaxFileUpload实现图片实时上传刷新
- [置顶] bootstrap创建登录注册页面
- 响应式bootstrap - demo
- Bootstrap <第一篇>
- BootStrap DateTimePicker使用
- 使用bootstrap tooltip控件动态修改提示内容