Bootstrap栅格系统研究

发布时间：2020-12-17 21:04:46 所属栏目：安全来源：网络整理

导读：转载地址：http://www.see-source.com/blog/300000033/273 上一篇文章中已经对网页的栅格系统做了大概的说明，有了这个铺垫在来看 Bootstrap的栅格系统就比较容易了。 Bootstrap的栅格系统为12列(最大列数) ，形成一个940px宽的容器。 Bootstrap的栅格系统

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

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

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

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

1.固定式栅格

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

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

用法如下：

 
    view source 
    print 
    ? 
   
    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样式如下：

 
    view source 
    print 
    ? 
   
    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。

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

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

 
    view source 
    print 
    ? 
   
    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个列的宽度。

源码如下：

 
    view source 
    print 
    ? 
   
    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.流式栅格

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

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

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

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

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

 
    view source 
    print 
    ? 
   
    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很接近。 ?

 
    view source 
    print 
    ? 
   
    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)，其中的百分比的得来也是按照固定式中的原则算的。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!