首页 > 代码库 > 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记录二(关于栅格布局)