Bootstrap的栅格源码
1.固定和流体容器的公共样式
1 // 固定和流体容器的公共样式 2 //@grid-gutter-widt：槽宽 3 .container-fixed(@gutter: @grid-gutter-width) { // 4 margin-right: auto; 5 margin-left: auto; 6 padding-left: floor((@gutter / 2)); 7 padding-right: ceil((@gutter / 2)); 8 &:extend(.clearfix all); //继承 9 } 10 // 行 11 .make-row(@gutter: @grid-gutter-width) { 12 margin-left: ceil((@gutter / -2)); 13 margin-right: floor((@gutter / -2)); 14 &:extend(.clearfix all); 15 }
2.调用混合入口
1 //固定容器 2 .container { 3 .container-fixed(); //定义左右padding，margin,清除浮动 4 @media (min- @screen-sm-min) { 5 @container-sm; 6 } 7 @media (min- @screen-md-min) { 8 @container-md; 9 } 10 @media (min- @screen-lg-min) { 11 @container-lg; 12 } 13 } 14 15 //流体容器 16 .container-fluid { 17 .container-fixed(); 18 } 19 20 // 行 21 .row { 22 .make-row(); 23 } 24 25 // 列 26 .make-grid-columns(); 27 28 // 移动优先,顺序不变 29 .make-grid(xs); 30 @media (min- @screen-sm-min) { 31 .make-grid(sm); 32 } 33 @media (min- @screen-md-min) { 34 .make-grid(md); 35 } 36 @media (min- @screen-lg-min) { 37 .make-grid(lg); 38 }
3，定义列的混合
1 // 列第一步 2 .make-grid-columns() { 3 //.col(2,".col-xs-1, .col-sm-1, .col-md-1, .col-lg-1") 4 .col(@index) { 5 @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}"; 6 .col((@index + 1), @item); 7 } 8 9 10 /* 递归 11 .col(3,".col-xs-1, .col-sm-1, .col-md-1, .col-lg-1,.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2") 12 .... 13 .col(13,str) 14 str: 15 .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, 16 .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, 17 ... 18 .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 19 */ 20 .col(@index, @list) when (@index =< @grid-columns) { 21 @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}"; 22 .col((@index + 1), ~"@{list}, @{item}"); 23 } 24 25 /* 26 .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, 27 .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, 28 ... 29 .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12{ 30 position: relative; 31 min-height: 1px; 32 padding-left: 15px; 33 padding-right: 15px; 34 } 35 */ 36 .col(@index, @list) when (@index > @grid-columns) { 37 @{list} { 38 position: relative; 39 min-height: 1px; 40 padding-left: ceil((@grid-gutter-width / 2)); 41 padding-right: floor((@grid-gutter-width / 2)); 42 } 43 } 44 45 46 .col(1); 47 } 48 49 50 51 // 列第二步 52 .make-grid(@class) { 53 //2.1 54 .float-grid-columns(@class); 55 //2.2 56 .loop-grid-columns(@grid-columns, @class, width); 57 //2.3(列排序) 58 .loop-grid-columns(@grid-columns, @class, pull); 59 .loop-grid-columns(@grid-columns, @class, push); 60 //2.4(列偏移) 61 .loop-grid-columns(@grid-columns, @class, offset); 62 } 63 64 65 66 //2.1 67 /* 68 * .col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,...col-xs-12{ 69 * float: left; 70 * } 71 * */ 72 .float-grid-columns(@class) { 73 .col(@index) { 74 @item: ~".col-@{class}-@{index}"; 75 .col((@index + 1), @item); 76 } 77 .col(@index, @list) when (@index =< @grid-columns) { // general 78 @item: ~".col-@{class}-@{index}"; 79 .col((@index + 1), ~"@{list}, @{item}"); 80 } 81 .col(@index, @list) when (@index > @grid-columns) { // terminal 82 @{list} { 83 float: left; 84 } 85 } 86 .col(1); 87 } 88 89 //2.2（width） 2.3（pull push） 2.4（offset）的入口 90 .loop-grid-columns(@index, @class, @type) when (@index >= 0) { 91 .calc-grid-column(@index, @class, @type); 92 .loop-grid-columns((@index - 1), @class, @type); 93 } 94 95 96 // 2.2 97 /* 98 * .col-xs-12{ 99 * 12/12; 100 * } 101 * .col-xs-11{ 102 * 11/12; 103 * } 104 * ... 105 * .col-xs-1{ 106 * 1/12; 107 * } 108 * */ 109 .calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) { 110 .col-@{class}-@{index} { 111 percentage((@index / @grid-columns)); 112 } 113 } 114 115 116 117 118 119 120 //2.3 121 /*push pull: 122 * .col-xs-push-12{ .col-xs-pull-12{ 123 * left:12/12; right:12/12; 124 * } } 125 * .col-xs-push-11{ 126 * left:11/12; 127 * } 128 * ... ... 129 * .col-xs-push-1{ 130 * left:1/12; 131 * } 132 * .col-xs-push-0{ .col-xs-pull-0{ 133 * left:auto; right:auto; 134 * } } 135 * */ 136 .calc-grid-column(@index, @class, @type) when (@type = push) and (@index > 0) { 137 .col-@{class}-push-@{index} { 138 left: percentage((@index / @grid-columns)); 139 } 140 } 141 .calc-grid-column(@index, @class, @type) when (@type = push) and (@index = 0) { 142 .col-@{class}-push-0 { 143 left: auto; 144 } 145 } 146 .calc-grid-column(@index, @class, @type) when (@type = pull) and (@index > 0) { 147 .col-@{class}-pull-@{index} { 148 right: percentage((@index / @grid-columns)); 149 } 150 } 151 .calc-grid-column(@index, @class, @type) when (@type = pull) and (@index = 0) { 152 .col-@{class}-pull-0 { 153 right: auto; 154 } 155 } 156 157 158 159 //2.4 160 /* 161 * .col-xs-offset-12{ 162 * margin-left:12/12; 163 * } 164 * .col-xs-offset-11{ 165 * margin-left:11/12; 166 * } 167 * ... 168 * .col-xs-offset-1{ 169 * margin-left:1/12; 170 * } 171 * .col-xs-offset-0{ 172 * margin-left:0; 173 * } 174 * */ 175 .calc-grid-column(@index, @class, @type) when (@type = offset) { 176 .col-@{class}-offset-@{index} { 177 margin-left: percentage((@index / @grid-columns)); 178 } 179 }
4.笔记
1 ###容器 2 1.流体容器 width为auto 3 2.固定容器 4 阈值min-width width 5 大于等于1200(lg 大屏pc) 1170（1140+槽宽） 6 7 大于等于992(md 中屏pc) 970（940+槽宽） 8 小于1200 9 10 大于等于768(sm 平板) 750（720+槽宽） 11 小于992 12 13 小于768(xs 移动手机) auto 14 3.栅格系统 15 16 17 ###栅格源码分析 18 1.流体容器&固定容器 公共样式 19 margin-right: auto; 20 margin-left: auto; 21 padding-left: 15px; 22 padding-right: 15px; 23 24 2.固定容器 特定样式 25 顺序不可变 26 @media (min- @screen-sm-min) { 27 @container-sm; 28 } 29 @media (min- @screen-md-min) { 30 @container-md; 31 } 32 @media (min- @screen-lg-min) { 33 @container-lg; 34 } 35 36 3.行 37 margin-left: -15px; 38 margin-right: -15px; 39 40 4.列 41 .make-grid-columns()---> 42 .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, 43 .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, 44 ... 45 .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12{ 46 position: relative; 47 min-height: 1px; 48 padding-left: 15px; 49 padding-right: 15px; 50 } 51 52 .make-grid(xs)---> 53 float-grid-columns(@class); 54 * .col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,...col-xs-12{ 55 * float: left; 56 * } 57 .loop-grid-columns(@grid-columns, @class, width); 58 * .col-xs-12{ 59 * 12/12; 60 * } 61 * .col-xs-11{ 62 * 11/12; 63 * } 64 * ... 65 * .col-xs-1{ 66 * 1/12; 67 * } 68 .loop-grid-columns(@grid-columns, @class, pull); 69 .loop-grid-columns(@grid-columns, @class, push); 70 *push pull: 71 * .col-xs-push-12{ .col-xs-pull-12{ 72 * left:12/12; right:12/12; 73 * } } 74 * .col-xs-push-11{ 75 * left:11/12; 76 * } 77 * ... ... 78 * .col-xs-push-1{ 79 * left:1/12; 80 * } 81 * .col-xs-push-0{ .col-xs-pull-0{ 82 * left:auto; right:auto; 83 * } } 84 85 .loop-grid-columns(@grid-columns, @class, offset); 86 87 ###响应式工具 88 89 90 ###栅格盒模型设计的精妙之处 91 容器两边具有15px的padding 、 92 行 两边具有-15px的margin 93 列 两边具有15px的padding 94 95 为了维护槽宽的规则， 96 列两边必须得要15px的padding 97 为了能使列嵌套行 98 行两边必须要有-15px的margin 99 为了让容器可以包裹住行 100 容器两边必须要有15px的padding