Bootstrap学习速查表(四) 栅格系统
2016-05-05 17:14
721 查看
Bootstrap框架的网格系统工作原理如下:
1、数据行(.row)必须包含在容器(.container)中,以便为其赋予合适的对齐方式和内距(padding)。如:
2、在行(.row)中可以添加列(.column),但列数之和不能超过平分的总列数,比如12。如:
另、最外边框,带有一大片白色区域,就是相当于浏览器的可视区域。在Bootstrap框架的网格系统中带有响应式效果,其带有四种类型的浏览器(超小屏,小屏,中屏和大屏),其断点(像素的分界点)是768px、992px和1220px。
对应分别为:.col-xs- , .col-sm- , .col-md- , .col-lg-
3、列偏移:
使用列偏移也非常简单,只需要在列元素上添加类名“col-md-offset-*”(其中星号代表要偏移的列组合数),那么具有这个类名的列就会向右偏移。例如,你在列元素上添加“col-md-offset-4”,表示该列向右移动4个列的宽度。
4、列排序:
列排序其实就是改变列的方向,就是改变左右浮动,并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名“col-md-push-*”和“col-md-pull-*” (其中星号代表移动的列组合数)。
1、数据行(.row)必须包含在容器(.container)中,以便为其赋予合适的对齐方式和内距(padding)。如:
2、在行(.row)中可以添加列(.column),但列数之和不能超过平分的总列数,比如12。如:
<div class="container"> <div class="row"> <div class="col-md-4"></div> <div class="col-md-8"></div> </div> </div>
另、最外边框,带有一大片白色区域,就是相当于浏览器的可视区域。在Bootstrap框架的网格系统中带有响应式效果,其带有四种类型的浏览器(超小屏,小屏,中屏和大屏),其断点(像素的分界点)是768px、992px和1220px。
对应分别为:.col-xs- , .col-sm- , .col-md- , .col-lg-
3、列偏移:
使用列偏移也非常简单,只需要在列元素上添加类名“col-md-offset-*”(其中星号代表要偏移的列组合数),那么具有这个类名的列就会向右偏移。例如,你在列元素上添加“col-md-offset-4”,表示该列向右移动4个列的宽度。
4、列排序:
列排序其实就是改变列的方向,就是改变左右浮动,并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名“col-md-push-*”和“col-md-pull-*” (其中星号代表移动的列组合数)。
相关文章推荐
- Bootstrap表格的使用
- bootstrap 二级下拉菜单
- bootstrap
- ASP.NET MVC Bootstrap极速开发框架
- Bootstrap嵌入jqGrid,使你的table牛逼起来
- Bootstrap每天必学之导航条
- 全面解析Bootstrap图片轮播效果
- Bootstrap嵌入jqGrid,使你的table牛逼起来
- 模拟BootStrap的弹框功能
- Bootstrap Modal 框 alert confirm loading
- bootStrap table spring mvc 详细运用实例
- bootstrap table 服务器端分页--ashx+ajax
- 开启BootStrap学习之旅
- 网上订餐系统源码SSH+bootstrap+mysql
- 基于Bootstrap使用jQuery实现简单可编辑表格
- bootstrap笔记
- Bootstrap嵌入jqGrid,使你的table牛逼起来
- Bootstrap嵌入jqGrid,使你的table牛逼起来
- Markdown与Bootstrap相结合实现图片自适应属性
- 浅析Bootstrap组件之面板组件