less implementiert das 12-Gitter-Layout von Bootstrap. Tatsächlich umfasst der Code mehr als 100 Zeilen, wahrscheinlich mehr als 100 Zeilen leistungsstarkes 12-Raster-Layout Rastersystem; diese 12-Raster-Layouts sind in responsiven Layouts sehr nützlich.
Manchmal möchte ich beim Erstellen einer einfachen Seite nicht den gesamten Bootstrap in die Seite einführen, deshalb habe ich in meiner Freizeit dieses Rasterlayout geschrieben und dabei auf die Bootstrap-Methode und den Klassennamen verwiesen. Natürlich kann der Klassenname sein hier individuell angepasst.Bitte sehen Sie sich die Details von less unten an:
Dieses Less kann zur Kompilierung direkt in die Less-Umgebung kopiert werden. Wenn Sie den Klassennamen neu definieren müssen, können Sie ihn zu Beginn ändern
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
@container: m-container;
@columns-name: m-col;
@columns-pading: 15px;
@grid-
count
: 12;
@screen-sm-min: 768px;
@screen-md-min: 992px;
@screen-lg-min: 1200px;
.@{container},
.@{container}-fluid{
padding-left: @columns-pading;
padding-right: @columns-pading;
margin-right: auto;
margin-left: auto;
min-width: 960px;
/*为了兼容不支持媒体选择的浏览器*/
-webkit-transition:width 0.9s cubic-bezier(1,-0.02, 0, 1.04);
// for Safari and Chrome
-moz-transition:width 0.9s cubic-bezier(1,-0.02, 0, 1.04);
// for Firefox
-o-transition:width 0.9s cubic-bezier(1,-0.02, 0, 1.04);
// for Opera
-ms-transition:width 0.9s cubic-bezier(1,-0.02, 0, 1.04);
// for ie
transition:width 0.5s cubic-bezier(1,-0.02, 0, 1.04);
-webkit-box-sizing: border-box;
box-sizing:border-box;
-moz-box-sizing:border-box;
}
.@{container}-fluid{
min-width: 0;
width: 100%;
}
.row{
min-height: 1px;
margin-left: -@columns-pading;
margin-right: -@columns-pading;
clear: both;
&:before,
&:after{
content:
""
;
display: table;
clear: both;
}
}
// 列基础css
.columns-base-css() {
position: relative;
min-height: 1px;
padding-right: @columns-pading;
padding-left: @columns-pading;
-webkit-box-sizing: border-box;
box-sizing:border-box;
-moz-box-sizing:border-box;
}
// 循环列,设置基础css
.make-grid-columns(@len: @grid-
count
) {
.col(@i) {
@classList: ~
".@{columns-name}-xs-@{i},.@{columns-name}-sm-@{i},.@{columns-name}-md-@{i},.@{columns-name}-lg-@{i}"
;
.col(@i + 1, ~
"@{classList}"
);
}
.col(@i, @list) when (@i =< @len){
@classList: ~
".@{columns-name}-xs-@{i},.@{columns-name}-sm-@{i},.@{columns-name}-md-@{i},.@{columns-name}-lg-@{i}"
;
.col(@i + 1, ~
"@{classList},@{list}"
);
}
.col(@i, @list) when (@i > @len) {
@{list} {
.columns-base-css();
}
}
.col(1)
}
.make-grid-columns(@grid-
count
);
// 循环生成列
.make-columns-loop(@type, @n, @i: 1) when (@i <= @n){
@col-
class
-name: ~
"@{columns-name}-@{type}"
;
.@{col-
class
-name}-@{i}{
width: @i/@n*100%;
float: left;
}
// 偏移
.@{col-
class
-name}-offset-@{i}{
margin-left: @i/@n*100%;
}
// 排序
.@{col-
class
-name}-pull-@{i}{
right: @i/@n*100%;
}
.@{col-
class
-name}-push-@{i}{
left: @i/@n*100%;
}
.make-columns-loop(@type, @n, (@i + 1));
}
.make-columns-loop(xs, @grid-
count
);
// 媒体查询
.@{container}{
@media (max-width: @screen-sm-min) {
min-width: 0;
}
@media (min-width: @screen-sm-min) {
width: 750px;
min-width: 0;
}
@media (min-width: @screen-md-min) {
width: 970px;
min-width: 0;
}
@media (min-width: @screen-lg-min) {
width: 1170px;
min-width: 0;
}
}
// 媒体查询设置对应列类型css
@media (min-width: @screen-sm-min) {
.make-columns-loop(sm, @grid-
count
);
}
@media (min-width: @screen-md-min) {
.make-columns-loop(md, @grid-
count
);
}
@media (min-width: @screen-lg-min) {
.make-columns-loop(lg, @grid-
count
);
}
Nach dem Login kopieren
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
Für online Vorschau finden Sie hier: http://runjs.cn/code/n1fsajds
Dieser Artikel wurde reproduziert von: https://segmentfault.com/a/1190000010104455Einführung in die Programmierung
! !Das obige ist der detaillierte Inhalt vonWeniger hundert Codezeilen zur Implementierung des Bootstrap-Grid-Layouts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!