Bootstrap栅格系统研究

转载地址：http://www.see-source.com/blog/300000033/273

上一篇文章中已经对网页的栅格系统做了大概的说明，有了这个铺垫在来看Bootstrap的栅格系统就比较容易了。

Bootstrap的栅格系统为12列(最大列数)，形成一个940px宽的容器。

Bootstrap的栅格系统有俩种，一种是固定式的，一种是流式的(也就是可适应宽度的)。

1.固定式栅格

固定式栅格系统每列的宽度(width)及列与列间的间距(margin)都是固定的，列宽为60px，列间距为20px。如下图：

在Bootstrap中定义了俩个样式。容器为 .row ，可在容器中加入合适数量的 .span* 列。

用法如下：

 
   1. 
   <div class="row"> 
  
   2. 
   <div class="span4">...</div> 
  
   3. 
   <div class="span8">...</div> 
  
   4. 
   </div>

用法非常类似<table> 标签。"<div class='row'>"相当于是<table>，"<div class='span4'>"、"<div class='span8'>" 相当于"<td cols='4'>"、"<td cols='8'>"。注意：由于默认是12列的栅格，所有 .span* 列所跨越的栅格数之和最多是12(或者等于其父容器的栅格数)。

源码的css样式如下：

 
   1. 
   [class*="span"] { 
  
   2. 
   float: left; 
  
   3. 
   min-height: 1px; 
  
   4. 
   margin-left: 20px; 
  
   5. 
   }

上面是个属性选择器。定义属性名为"class"的值包含子串"span",也就是span1、span2、span3....。"margin-left:20px"定义了每列的左边距为20px，也就是上图中的间距20px。

 
   1. 
   .row { 
  
   2. 
   margin-left: -20px; 
  
   3. 
   *zoom: 1; 
  
   4. 
   }

.row是定义栅格容器的，可以看到其中并没有定义宽度(width),所以其宽度就由内部栅格的总列宽决定。"margin-left:-20px" 定义容器的左边距负的20px(-20px)，作用是抵销第1列前面的20px，在上图中已经标出。

 
   01. 
   .span12 { 
  
   02. 
   width: 940px; 
  
   03. 
   } 
  
   04. 
     
   05. 
   .span11 { 
  
   06. 
   width: 860px; 
  
   07. 
   } 
  
   08. 
     
   09. 
   .span10 { 
  
   10. 
   width: 780px; 
  
   11. 
   } 
  
   12. 
     
   13. 
   .span9 { 
  
   14. 
   width: 700px; 
  
   15. 
   } 
  
   16. 
     
   17. 
   .span8 { 
  
   18. 
   width: 620px; 
  
   19. 
   } 
  
   20. 
     
   21. 
   .span7 { 
  
   22. 
   width: 540px; 
  
   23. 
   } 
  
   24. 
     
   25. 
   .span6 { 
  
   26. 
   width: 460px; 
  
   27. 
   } 
  
   28. 
     
   29. 
   .span5 { 
  
   30. 
   width: 380px; 
  
   31. 
   } 
  
   32. 
     
   33. 
   .span4 { 
  
   34. 
   width: 300px; 
  
   35. 
   } 
  
   36. 
     
   37. 
   .span3 { 
  
   38. 
   width: 220px; 
  
   39. 
   } 
  
   40. 
     
   41. 
   .span2 { 
  
   42. 
   width: 140px; 
  
   43. 
   } 
  
   44. 
     
   45. 
   .span1 { 
  
   46. 
   width: 60px; 
  
   47. 
   }

span1、span2...很像表格元素<table>中<td>的cols，即合并多少列。span1就是合并1列(即不合并)，span2就是合并2列，span3是合并3列...。那为什么span2的宽度是140px那，我们可以算下：

先看下span2。由于上面的属性选择器已经规定了span1、span2.....span12 的左边距都是20px，所以span2自身有20px的左边距(margin-left:20px),也就是上图中第3列与第4列的间距。所以对于上面图来说span2的宽度就是等于=第4列的宽度60px+第5列的宽度60px+第4列与第5列的间距20px =140px。span3的算法也是如此。最后总结的公式就是spanN的宽度(width) = N*60 + (N-1)*20。大家可以验证下。

偏移列

把列向右移动可使用 .offset* 类。每个类都给列的左边距增加了指定单位的列。例如，.offset4 将 .span4 右移了4个列的宽度。

源码如下：

 
   01. 
   .offset12 { 
  
   02. 
   margin-left: 980px; 
  
   03. 
   } 
  
   04. 
     
   05. 
   .offset11 { 
  
   06. 
   margin-left: 900px; 
  
   07. 
   } 
  
   08. 
     
   09. 
   .offset10 { 
  
   10. 
   margin-left: 820px; 
  
   11. 
   } 
  
   12. 
     
   13. 
   .offset9 { 
  
   14. 
   margin-left: 740px; 
  
   15. 
   } 
  
   16. 
     
   17. 
   .offset8 { 
  
   18. 
   margin-left: 660px; 
  
   19. 
   } 
  
   20. 
     
   21. 
   .offset7 { 
  
   22. 
   margin-left: 580px; 
  
   23. 
   } 
  
   24. 
     
   25. 
   .offset6 { 
  
   26. 
   margin-left: 500px; 
  
   27. 
   } 
  
   28. 
     
   29. 
   .offset5 { 
  
   30. 
   margin-left: 420px; 
  
   31. 
   } 
  
   32. 
     
   33. 
   .offset4 { 
  
   34. 
   margin-left: 340px; 
  
   35. 
   } 
  
   36. 
     
   37. 
   .offset3 { 
  
   38. 
   margin-left: 260px; 
  
   39. 
   } 
  
   40. 
     
   41. 
   .offset2 { 
  
   42. 
   margin-left: 180px; 
  
   43. 
   } 
  
   44. 
     
   45. 
   .offset1 { 
  
   46. 
   margin-left: 100px; 
  
   47. 
   }

.offset1即移动一列，.offset2移动俩列。margin-left是如何得出来的，以.offset1移动一列为例，如下图：

上图演示了从第2列偏移1列到第3列。未移动前第2列的margin-left为20px，移动后由于占了俩个间距和一个列宽，所以最终的margin-left就是100px。

2.流式栅格

流式也固定式栅格的区别就是，每列的宽度是按照百分比来瓜分外围包裹的宽度的，看下源码：

 
   1. 
   .row-fluid { 
  
   2. 
   width: 100%; 
  
   3. 
   *zoom: 1; 
  
   4. 
   }

定义容器的宽度完全填充包裹外围容器的宽度。

 
   1. 
   .row-fluid [class*="span"]:first-child { 
  
   2. 
   margin-left: 0; 
  
   3. 
   }

清空第一列前面的边距，与固定式中的margin-left:-20px效果是一样的

 
   01. 
   .row-fluid [class*="span"] { 
  
   02. 
   display: block; 
  
   03. 
   float: left; 
  
   04. 
   width: 100%; 
  
   05. 
   min-height: 30px; 
  
   06. 
   margin-left: 2.127659574468085%; 
  
   07. 
   *margin-left: 2.074468085106383%; 
  
   08. 
   -webkit-box-sizing: border-box; 
  
   09. 
   -moz-box-sizing: border-box; 
  
   10. 
   box-sizing: border-box; 
  
   11. 
   }

我们这里只关注与宽度有关的代码。上面代码中margin-left: 2.127659574468085% 以百分比设置列的左边距(margin-left),约等于2.12%,

我们以上面固定式中的940px 为例来算下大约是多少px。2.12% * 940 = 19.928 。与20px很接近。

 
   01. 
   .row-fluid .span12 { 
  
   02. 
   width: 100%; 
  
   03. 
   *width: 99.94680851063829%; 
  
   04. 
   } 
  
   05. 
     
   06. 
   .row-fluid .span11 { 
  
   07. 
   width: 91.48936170212765%; 
  
   08. 
   *width: 91.43617021276594%; 
  
   09. 
   } 
  
   10. 
     
   11. 
   .row-fluid .span10 { 
  
   12. 
   width: 82.97872340425532%; 
  
   13. 
   *width: 82.92553191489361%; 
  
   14. 
   } 
  
   15. 
     
   16. 
   .row-fluid .span9 { 
  
   17. 
   width: 74.46808510638297%; 
  
   18. 
   *width: 74.41489361702126%; 
  
   19. 
   } 
  
   20. 
     
   21. 
   .row-fluid .span8 { 
  
   22. 
   width: 65.95744680851064%; 
  
   23. 
   *width: 65.90425531914893%; 
  
   24. 
   } 
  
   25. 
     
   26. 
   .row-fluid .span7 { 
  
   27. 
   width: 57.44680851063829%; 
  
   28. 
   *width: 57.39361702127659%; 
  
   29. 
   } 
  
   30. 
     
   31. 
   .row-fluid .span6 { 
  
   32. 
   width: 48.93617021276595%; 
  
   33. 
   *width: 48.88297872340425%; 
  
   34. 
   } 
  
   35. 
     
   36. 
   .row-fluid .span5 { 
  
   37. 
   width: 40.42553191489362%; 
  
   38. 
   *width: 40.37234042553192%; 
  
   39. 
   } 
  
   40. 
     
   41. 
   .row-fluid .span4 { 
  
   42. 
   width: 31.914893617021278%; 
  
   43. 
   *width: 31.861702127659576%; 
  
   44. 
   } 
  
   45. 
     
   46. 
   .row-fluid .span3 { 
  
   47. 
   width: 23.404255319148934%; 
  
   48. 
   *width: 23.351063829787233%; 
  
   49. 
   } 
  
   50. 
     
   51. 
   .row-fluid .span2 { 
  
   52. 
   width: 14.893617021276595%; 
  
   53. 
   *width: 14.840425531914894%; 
  
   54. 
   } 
  
   55. 
     
   56. 
   .row-fluid .span1 { 
  
   57. 
   width: 6.382978723404255%; 
  
   58. 
   *width: 6.329787234042553%; 
  
   59. 
   }

上面的代码是设置列的宽度(width)，其中的百分比的得来也是按照固定式中的原则算的。

Bootstrap栅格系统研究

相关文章