首页 > 代码库 > bootstrap记录二(关于栅格布局)
bootstrap记录二(关于栅格布局)
栅格系统是通过行(.row)与列(column)的组合一起来创建页面布局的,所以只有列(column)可以作为行(row)的直接子元素,我们所要写的内容可以放在列里(column),不过在行的外层还需要定义一层来包含行(.row),这个外层为(.container)或者(.container-fluid),定义这一层是为了方便为行(.row)赋予合适的排列(aligment)和内补(padding)。
(.container)表示固定宽度,即行的宽度是固定的,而且水平居中,即使行的元素是块级元素,它也不会占满一行,这个固定的宽度是多少呢,bootstrap已经规定了,即如下:
超小屏幕 手机 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面显示器 (≥992px) | 大屏幕 大桌面显示器 (≥1200px) | |
.container 最大宽度 |
None (自动) | 750px | 970px | 1170px |
(.container-fluid)表示100%宽度,即行的宽度100%,占满了一行
列与列的间隔通过设置列所在元素的padding属性,如果一行中包含的列的数量大于12,那么剩余的列就会作为一个整体另起一行,
根据屏幕大小,列所对应的类前缀分别为:
超小屏幕 手机 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面显示器 (≥992px) | 大屏幕 大桌面显示器 (≥1200px) | |
类前缀 | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
后面就可以写上你所想要的大小了,只要 <= 12 就可以了。
可以使用 (.col-md-offset-*)将列向右侧偏移,比如 .col-md-offset-3就是将列向右偏移3列。
在一列里还可以再次定义行(.row)和列实现栅格布局。
注意:
在列的这一部分里如果有自定义的class,需放在后面,即放在定义列的class后面,代码如下:
<li class="col-md-3 col-sm-6 col-xs-12" class="li_style">
当然,你也可以只使用一个class,将它们放在一起,那么这时放在哪都可以了。比如:放在后面
<li class="col-md-3 col-sm-6 col-xs-12 li_style">
bootstrap记录二(关于栅格布局)