bootstrap解析-栅格系统

visitors 0   •     •   2017.06.06

bootstrap解析-栅格系统

.container(布局容器)

屏幕宽1200px以上(col-lg)
  1. 默认width为1170px
  2. padding,lefet和right各为15px,所以内容width为1140px;
屏幕宽992px以上(col-md)
  1. 默认width为970px
  2. padding,lefet和right各为15px,所以内容width为940px;
屏幕宽768px以上(col-sm)
  1. 默认width为750px
  2. padding,lefet和right各为15px,所以内容width为720px;
屏幕宽768px以下(col-xs)
  1. 默认width为100%
  2. padding,lefet和right各为15px,所以内容width为100%-30px;

.container-fluid(流式布局容器)

  1. width为100%
  2. 其他和.container一样

.row(行)

  1. 默认margin-left和margin-right为-15px;
  2. 这样就抵消掉了.container的padding,row的显示区域width就为.container的width了
  3. 利用::after清楚浮动

.col-(列)

  1. 用@media来设置width对应百分比
  2. padding,lefet和right各为15px
  3. float:left
  4. position:relative
  5. min-height:1px

.col-*-offset-(移动)

  1. 利用@media来设置margin-left相应的百分比

.col--push-和.col--pull-(列排序)

  1. 由于col-设置了posistion:relative所以通过设置left(push)和righ(pull)来改变节点的位置。

其他情况

列的高度不同时

解决 .clearfix(清除浮动)
  1. 由于列都浮动了,所以阈值时会产生一些问题,所需要配合清除相应位置的浮动来解决

列大于12时

  1. 由于列浮动了,所以超出的列会自动换行排列

嵌套

  1. 由于以上属性设置,所以嵌套写.row和.col-就可以

bootstrap的栅格系统基本就是这些,所以也没什么神秘的,你自己也完全可以写出自己的栅格系统来。

 /  / 
  • 微信

  • 支付宝