bootstrap布局和栅格解析

布局方式

Bootstrap提供俩种布局方式固定(网格)布局和流式(网格)布局。结合上篇文章所讨论的栅格系统来说,Bootstrap的布局实际上是在栅格外加个容器(container)。固定布局加的是固定宽度(width)的容器,流式布局加的是自适应(或叫可变)宽度的容器,这是二者的唯一区别。

1、固定布局

下面来看个示例:

<body>    
  <div class="container"> 
        <div class="row"> 
            <div class=" col-md-8"> col-md-4</div> 
            <div class=" col-md-8"> col-md-8-</div> 
        </div> 
        <div class="row"> 
            <div class=" col-md-4"> col-md-4</div> 
            <div class=" col-md-6"> col-md-6</div> 
            <div class=" col-md-2"> col-md-2</div> 
        </div> 
  </div> 
</body> 
<div class="container">就是上面所说的容器,其内有俩行栅格(.row)。

Bootstrap中规定固定md容器的总的宽度为970px
 

2、流式布局

也是先看个示例:

<body>    
	<div class=" container-fluid">
		<div class="row"> 
			<div class=" col-md-8"> col-md-4</div> 
			<div class=" col-md-8"> col-md-8-</div> 
		</div> 
		<div class="row"> 
			<div class=" col-md-4"> col-md-4</div> 
			<div class=" col-md-6"> col-md-6</div> 
			<div class=" col-md-2"> col-md-2</div> 
		</div> 
	</div> 
</body> 
<div class="container-fluid">是流式布局的容器,其内有俩行流式栅格。

3、布局的嵌套


布局的嵌套实际就是栅格的嵌套。如下: 

<div class="row"> 
	<div class=" col-md-8"> 
		嵌套的顶级 
		<div class="row"> 
			<div class=" col-md-4">嵌套的2级</div> 
			<div class=" col-md-4">嵌套的2级</div> 
		</div>
	</div>
	<div class=" col-md-4">
		嵌套的顶级
	</div>
</div> 

归结起来,Bootstrap的布局其实就是容器 + 栅格系统,容器只是限制外围的宽度,主要变化在于栅格,通过栅格的合并、偏移、嵌套 来最终达到布局效果的。

布局源码分析

variables.less中变量
// Core variables and mixins
//网格列数为12
@grid-columns:              12;
//网格间的列间隙
@grid-gutter-width:         30px;
// Small screen / tablet,平板(small的container)
@container-tablet:             ((720px + @grid-gutter-width));
//** For `@screen-sm-min` and up.
@container-sm:                 @container-tablet;
 
// Medium screen / desktop,Medium的container大小970px(940+30)
@container-desktop:            ((940px + @grid-gutter-width));
//** For `@screen-md-min` and up.
@container-md:                 @container-desktop;
// Large screen / wide desktop,Large的container大小1170px(1140+30)
@container-large-desktop:      ((1140px + @grid-gutter-width));
//** For `@screen-lg-min` and up.
@container-lg:                 @container-large-desktop;

Grid.less网格系统
// Grid system
// Container widths
// Set the container width, and override it for fixed navbars in media queries.
// container固定宽度,通过媒体查询自适应宽度
.container {
  .container-fixed();
  @media (min-width: @screen-sm-min) {
    width: @container-sm;
  }
  @media (min-width: @screen-md-min) {
    width: @container-md;
  }
  @media (min-width: @screen-lg-min) {
    width: @container-lg;
  }
}

// Fluid container,流式布局container
// Utilizes the mixin meant for fixed width containers, but without any defined
// width for fluid, full width layouts.
.container-fluid {
  .container-fixed();
}
 
// Row,行属性并且清除列浮动
.row {
  .make-row();
}
 
// Columns, Common styles for small and large grid columns
//网格列的公共属性,position, min-height,左右内边距
.make-grid-columns();
//设置网格列的width,left,right,margin-left属性
.make-grid(xs);
// Small,Medium,Large grid
@media (min-width: @screen-sm-min) {
  .make-grid(sm);
}
@media (min-width: @screen-md-min) {
  .make-grid(md);
}
@media (min-width: @screen-lg-min) {
  .make-grid(lg);
}
//float清除
.clearfix {
  .clearfix();
}

 

// Grid system, Generate semantic grid columns with these mixins.
// Centered container element
// container左右外边距,以及内边距,和浮动清除
.container-fixed(@gutter: @grid-gutter-width) {
  margin-right: auto;
  margin-left: auto;
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);
  &:extend(.clearfix all);
}
 
// 行外边距和浮动,Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  margin-left:  (@gutter / -2);
  margin-right: (@gutter / -2);
  &:extend(.clearfix all);
}

 

// Framework grid generation
// any value of `@grid-columns`.
//设置所有的col-@{class}-@{index}的position, min-height,左右内边距
.make-grid-columns() {
  // Common styles for all sizes of grid columns, widths 1-12
  .col(@index) when (@index = 1) { // initial
    @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
    .col((@index + 1), @item);
  }
  .col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo
    @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
    .col((@index + 1), ~"@{list}, @{item}");
  }
  .col(@index, @list) when (@index > @grid-columns) { // terminal
    @{list} {
      position: relative;
      // Prevent columns from collapsing when empty
      min-height: 1px;
      // Inner gutter via padding
      padding-left:  (@grid-gutter-width / 2);
      padding-right: (@grid-gutter-width / 2);
    }
  }
  .col(1); // kickstart it
}
 
//设置所有的col-@{class}-@{index}的float属性
.float-grid-columns(@class) {
  .col(@index) when (@index = 1) { // initial
    @item: ~".col-@{class}-@{index}";
    .col((@index + 1), @item);
  }
  .col(@index, @list) when (@index =< @grid-columns) { // general
    @item: ~".col-@{class}-@{index}";
    .col((@index + 1), ~"@{list}, @{item}");
  }
  .col(@index, @list) when (@index > @grid-columns) { // terminal
    @{list} {
      float: left;
    }
  }
  .col(1); // kickstart it
}
 
// 设置col-@{class}-@{index}的width
.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) {
  .col-@{class}-@{index} {
    width: percentage((@index / @grid-columns));
  }
}
// 设置col-@{class}-@{index}的left
.calc-grid-column(@index, @class, @type) when (@type = push) and (@index > 0) {
  .col-@{class}-push-@{index} {
    left: percentage((@index / @grid-columns));
  }
}
.calc-grid-column(@index, @class, @type) when (@type = push) and (@index = 0) {
  .col-@{class}-push-0 {
    left: auto;
  }
}
// 设置col-@{class}-@{index}的right
.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index > 0) {
  .col-@{class}-pull-@{index} {
    right: percentage((@index / @grid-columns));
  }
}
.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index = 0) {
  .col-@{class}-pull-0 {
    right: auto;
  }
}
// 设置col-@{class}-@{index}的margin-left
.calc-grid-column(@index, @class, @type) when (@type = offset) {
  .col-@{class}-offset-@{index} {
    margin-left: percentage((@index / @grid-columns));
  }
}
 
// 列属性循环变量设置
.loop-grid-columns(@index, @class, @type) when (@index >= 0) {
  .calc-grid-column(@index, @class, @type);
  // next iteration
  .loop-grid-columns((@index - 1), @class, @type);
}
 
// Create grid for specific class
//根据指定的class创建网格,@class为sm,md,lg,xs,@grid-columns为12
.make-grid(@class) {
  //设置所有的col-@{class}-@{index}的float属性
  .float-grid-columns(@class);
// 设置col-@{class}-@{index}的width
  .loop-grid-columns(@grid-columns, @class, width);
// 设置col-@{class}-@{index}的pull
  .loop-grid-columns(@grid-columns, @class, pull);
// 设置col-@{class}-@{index}的push
  .loop-grid-columns(@grid-columns, @class, push);
// 设置col-@{class}-@{index}的margin-left
  .loop-grid-columns(@grid-columns, @class, offset);
}