Bootstrap栅格源码

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-width: @screen-sm-min) {
 5     width: @container-sm;
 6   }
 7   @media (min-width: @screen-md-min) {
 8     width: @container-md;
 9   }
10   @media (min-width: @screen-lg-min) {
11     width: @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-width: @screen-sm-min) {
31   .make-grid(sm);
32 }
33 @media (min-width: @screen-md-min) {
34   .make-grid(md);
35 }
36 @media (min-width: @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  *     width:12/12;
100  * }
101  * .col-xs-11{
102  *     width:11/12;
103  * }
104  * ...
105  * .col-xs-1{
106  *     width:1/12;
107  * } 
108  * */
109 .calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) {
110   .col-@{class}-@{index} {
111     width: 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-width: @screen-sm-min) {
 27             width: @container-sm;
 28           }
 29           @media (min-width: @screen-md-min) {
 30             width: @container-md;
 31           }
 32           @media (min-width: @screen-lg-min) {
 33             width: @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                      *     width:12/12;
 60                      * }
 61                      * .col-xs-11{
 62                      *     width:11/12;
 63                      * }
 64                      * ...
 65                      * .col-xs-1{
 66                      *     width: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

 

 
posted @ 2020-05-26 12:14  全情海洋  阅读(312)  评论(0编辑  收藏  举报