Bootstrap3 栅格系统之自定义mixin和变量

mixin和变量

除了用于快速布局的预定义栅格类，Bootstrap 还包含了一组 Less 变量和 mixin，通过自定义这些变量和 mixin，可以生成简单、语义化的布局。

1、变量

通过变量来定义列数、间隙（gutter）宽度、媒体查询阈值（用于确定何时让列浮动）。使用这些变量生成预定义的栅格类，还可以定制 mixin。如：

1. @grid-columns:            12;
2. @grid-gutter-width:         30px;
3. @grid-float-breakpoint:     768px;

2、mixin

mixin和栅格变量一同使用，用来为每个列（column）生成语义化的 CSS 代码。如：

1. // Creates a wrapper for a series of columns
2. .make-row(@gutter: @grid-gutter-width) {
3.   // Then clear the floated columns
4.   .clearfix();
5.   @media (min-width: @screen-sm-min) {
6.     margin-left:  (@gutter / -2);
7.     margin-right: (@gutter / -2);
8.   }
9.   // Negative margin nested rows out to align the content of columns
10.   .row {
11.     margin-left:  (@gutter / -2);
12.     margin-right: (@gutter / -2);
13.   }
14. }
15. // Generate the extra small columns
16. .make-xs-column(@columns; @gutter: @grid-gutter-width) {
17.   position: relative;
18.   // Prevent columns from collapsing when empty
19.   min-height: 1px;
20.   // Inner gutter via padding
21.   padding-left:  (@gutter / 2);
22.   padding-right: (@gutter / 2);
23.   // Calculate width based on number of columns available
24.   @media (min-width: @grid-float-breakpoint) {
25.     float: left;
26.     width: percentage((@columns / @grid-columns));
27.   }
28. }
29. // Generate the small columns
30. .make-sm-column(@columns; @gutter: @grid-gutter-width) {
31.   position: relative;
32.   // Prevent columns from collapsing when empty
33.   min-height: 1px;
34.   // Inner gutter via padding
35.   padding-left:  (@gutter / 2);
36.   padding-right: (@gutter / 2);
37.   // Calculate width based on number of columns available
38.   @media (min-width: @screen-sm-min) {
39.     float: left;
40.     width: percentage((@columns / @grid-columns));
41.   }
42. }
43. // Generate the small column offsets
44. .make-sm-column-offset(@columns) {
45.   @media (min-width: @screen-sm-min) {
46.     margin-left: percentage((@columns / @grid-columns));
47.   }
48. }
49. .make-sm-column-push(@columns) {
50.   @media (min-width: @screen-sm-min) {
51.     left: percentage((@columns / @grid-columns));
52.   }
53. }
54. .make-sm-column-pull(@columns) {
55.   @media (min-width: @screen-sm-min) {
56.     right: percentage((@columns / @grid-columns));
57.   }
58. }
59. // Generate the medium columns
60. .make-md-column(@columns; @gutter: @grid-gutter-width) {
61.   position: relative;
62.   // Prevent columns from collapsing when empty
63.   min-height: 1px;
64.   // Inner gutter via padding
65.   padding-left:  (@gutter / 2);
66.   padding-right: (@gutter / 2);
67.   // Calculate width based on number of columns available
68.   @media (min-width: @screen-md-min) {
69.     float: left;
70.     width: percentage((@columns / @grid-columns));
71.   }
72. }
73. // Generate the medium column offsets
74. .make-md-column-offset(@columns) {
75.   @media (min-width: @screen-md-min) {
76.     margin-left: percentage((@columns / @grid-columns));
77.   }
78. }
79. .make-md-column-push(@columns) {
80.   @media (min-width: @screen-md-min) {
81.     left: percentage((@columns / @grid-columns));
82.   }
83. }
84. .make-md-column-pull(@columns) {
85.   @media (min-width: @screen-md-min) {
86.     right: percentage((@columns / @grid-columns));
87.   }
88. }
89. // Generate the large columns
90. .make-lg-column(@columns; @gutter: @grid-gutter-width) {
91.   position: relative;
92.   // Prevent columns from collapsing when empty
93.   min-height: 1px;
94.   // Inner gutter via padding
95.   padding-left:  (@gutter / 2);
96.   padding-right: (@gutter / 2);
97.   // Calculate width based on number of columns available
98.   @media (min-width: @screen-lg-min) {
99.     float: left;
100.     width: percentage((@columns / @grid-columns));
101.   }
102. }
103. // Generate the large column offsets
104. .make-lg-column-offset(@columns) {
105.   @media (min-width: @screen-lg-min) {
106.     margin-left: percentage((@columns / @grid-columns));
107.   }
108. }
109. .make-lg-column-push(@columns) {
110.   @media (min-width: @screen-lg-min) {
111.     left: percentage((@columns / @grid-columns));
112.   }
113. }
114. .make-lg-column-pull(@columns) {
115.   @media (min-width: @screen-lg-min) {
116.     right: percentage((@columns / @grid-columns));
117.   }
118. }

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。