Bootstrap ئارقىلىق LESS نى ئىشلىتىش
Bootstrap نىڭ CSS ئالدىن بىر تەرەپ قىلغۇچىسى LESS بىلەن Bootstrap نى خاسلاشتۇرۇڭ ۋە كېڭەيتىڭ ، Bootstrap نىڭ CSS نى ياساشقا ئىشلىتىلىدىغان ئۆزگەرگۈچى مىقدار ، ئارىلاشمىلار ۋە تېخىمۇ كۆپ پايدىلىنىڭ.
LESS بىلەن ياسالغان
نېمىشقا LESS؟
Bootstrap بولسا ياخشى دوستىمىز ئالېكىس سېللېر ئىجاد قىلغان ھەرىكەتچان ئۇسلۇب جەدۋىلى LESS بىلەن ياسالغان . ئۇ سىستېما ئاساسىدىكى CSS نى تېز ، تېخىمۇ ئاسان ۋە تېخىمۇ قىزىقارلىق قىلىدۇ.
نېمىلەرنى ئۆز ئىچىگە ئالىدۇ؟
CSS نىڭ كېڭەيتىلىشى سۈپىتىدە ، LESS ئۆزگەرگۈچى مىقدار ، قايتا ئىشلەتكىلى بولىدىغان كود پارچىلىرىنى ئارىلاشتۇرۇش ، ئاددىي ماتېماتىكا مەشغۇلاتى ، ئۇۋا ، ھەتتا رەڭ فۇنكسىيەسىنى ئۆز ئىچىگە ئالىدۇ.
تەپسىلاتى
تېخىمۇ كۆپ ئۇچۇرغا ئېرىشىش ئۈچۈن http://lesscss.org/ دىكى ئورگان تور بېتىنى زىيارەت قىلىڭ .
ئۆزگەرگۈچى مىقدار
CSS دىكى رەڭ ۋە پېكسىل قىممىتىنى باشقۇرۇش سەل ئازابلىق بولىدۇ ، ئادەتتە كۆپەيتىش ۋە چاپلاش بىلەن تولغان. LESS بىلەن ئەمەس - رەڭ ياكى پېكسىل قىممىتىنى ئۆزگەرگۈچى قىلىپ بەلگىلەڭ ۋە بىر قېتىم ئۆزگەرتىڭ.
Mixins
دائىملىق ol 'CSS دا سىز قىلىشقا تېگىشلىك بۇ ئۈچ چېگرا رادىئاتسىيە خىتابنامىسى؟ ھازىر ئۇلار ئارىلاشما ، كود پارچىلىرىنىڭ ياردىمىدە بىر قۇرغا چۈشۈپ قالدى ، خالىغان جايدا قايتا ئىشلەتسىڭىز بولىدۇ.
مەشغۇلاتلار
تور ئارقىلىق ماتېماتىكىنى مەشغۇلات ئارقىلىق قىلىش ئارقىلىق تورنى يېتەكلەش ، يېتەكلەش ۋە تېخىمۇ دەرىجىدىن تاشقىرى جانلىق قىلىڭ. كۆپەيتىش ، بۆلۈش ، قوشۇش ۋە CSS ساغلاملىقىڭىزغا ئېرىشىش يولىڭىزنى ئېلىڭ.
Bootstrap ئۆزگەرگۈچى مىقدار LESS ئۆزگەرگۈچى مىقدار ، ئۇلارنىڭ قىممىتى ۋە ئىشلىتىش قوللانمىسى
ئۇلىنىش ۋە ئۇلىنىش
@bodyBackground |
@white |
بەت تەگلىك رەڭگى | |
@textColor |
@grayDark |
پۈتۈن بەدەن ، ماۋزۇ ۋە باشقىلار ئۈچۈن سۈكۈتتىكى تېكىست رەڭگى | |
@linkColor |
#08c |
كۆڭۈلدىكى ئۇلىنىش تېكىست رەڭگى | |
@linkColorHover |
darken(@linkColor, 15%) |
كۆڭۈلدىكى ئۇلىنىش تېكىستنىڭ رەڭگى |
تور سىستېمىسى
@gridColumns |
12 |
@gridColumnWidth |
60px |
@gridGutterWidth |
20px |
@fluidGridColumnWidth |
6.382978723% |
@fluidGridGutterWidth |
2.127659574% |
مەتبەئە
@sansFontFamily |
«Helvetica Neue» ، Helvetica ، Arial ، sans-serif | |
@serifFontFamily |
Georgia, "Times New Roman", Times, serif |
|
@monoFontFamily |
مېنلو ، موناكو ، «تېز يوللانما» ، مونوپول | |
@baseFontSize |
13px | چوقۇم پىكسېل بولۇشى كېرەك |
@baseFontFamily |
@sansFontFamily |
|
@baseLineHeight |
18px | چوقۇم پىكسېل بولۇشى كېرەك |
@altFontFamily |
@serifFontFamily |
|
@headingsFontFamily |
inherit |
|
@headingsFontWeight |
bold |
|
@headingsColor |
inherit |
|
جەدۋەل
@tableBackground |
transparent |
@tableBackgroundAccent |
#f9f9f9 |
@tableBackgroundHover |
#f5f5f5 |
@tableBorder |
ddd |
كۈلرەڭ رەڭلەر
@black |
# 000 | |
@grayDarker |
# 222 | |
@grayDark |
# 333 | |
@gray |
# 555 | |
@grayLight |
# 999 | |
@grayLighter |
#eee | |
@white |
#fff |
ئېنىق رەڭلەر
@blue |
# 049cdb | |
@green |
# 46a546 | |
@red |
# 9d261d | |
@yellow |
# ffc40d | |
@orange |
# f89406 | |
@pink |
# c3325f | |
@purple |
# 7a43b6 |
زاپچاسلار
كۇنۇپكىلار
@btnBackground |
@white |
|
@btnBackgroundHighlight |
darken(@white, 10%) |
|
@btnBorder |
darken(@white, 20%) |
|
@btnPrimaryBackground |
@linkColor |
|
@btnPrimaryBackgroundHighlight |
spin(@btnPrimaryBackground, 15%) |
|
@btnInfoBackground |
#5bc0de |
|
@btnInfoBackgroundHighlight |
#2f96b4 |
|
@btnSuccessBackground |
#62c462 |
|
@btnSuccessBackgroundHighlight |
51a351 |
|
@btnWarningBackground |
lighten(@orange, 15%) |
|
@btnWarningBackgroundHighlight |
@orange |
|
@btnDangerBackground |
#ee5f5b |
|
@btnDangerBackgroundHighlight |
#bd362f |
|
@btnInverseBackground |
@gray |
|
@btnInverseBackgroundHighlight |
@grayDarker |
جەدۋەل
@placeholderText |
@grayLight |
@inputBackground |
@white |
@inputBorder |
#ccc |
@inputBorderRadius |
3px |
@inputDisabledBackground |
@grayLighter |
@formActionsBackground |
#f5f5f5 |
ھالەت ۋە ئاگاھلاندۇرۇش
@warningText |
# c09853 | |
@warningBackground |
# f3edd2 | |
@errorText |
# b94a48 | |
@errorBackground |
# f2dede | |
@successText |
# 468847 | |
@successBackground |
# dff0d8 | |
@infoText |
# 3a87ad | |
@infoBackground |
# d9edf7 |
Navbar
@navbarHeight |
40px | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
|
@navbarLinkColorActive |
@navbarLinkColorHover |
|
@navbarLinkBackgroundHover |
transparent |
|
@navbarLinkBackgroundActive |
@navbarBackground |
|
@navbarSearchBackground |
lighten(@navbarBackground, 25%) |
|
@navbarSearchBackgroundFocus |
@white |
|
@navbarSearchBorder |
darken(@navbarSearchBackground, 30%) |
|
@navbarSearchPlaceholderColor |
#ccc |
|
@navbarBrandColor |
@navbarLinkColor |
تامچە
@dropdownBackground |
@white |
@dropdownBorder |
rgba(0,0,0,.2) |
@dropdownLinkColor |
@grayDark |
@dropdownLinkColorHover |
@white |
@dropdownLinkBackgroundHover |
@linkColor |
قەھرىمان بىرلىكى
@heroUnitBackground |
@grayLighter |
|
@heroUnitHeadingColor |
inherit |
|
@heroUnitLeadColor |
inhereit |
Bootstrap mixins
ئارىلاشمىلار ھەققىدە
Basic mixins
ئاساسىي ئارىلاشما ماھىيەتتە CSS نىڭ بىر پارچىسىنى ئۆز ئىچىگە ئالىدۇ ياكى قىسمەن. ئۇلار خۇددى CSS سىنىپىغا ئوخشاش يېزىلغان بولۇپ ، خالىغان جايدا چاقىرىشقا بولىدۇ.
- . element {
- . clearfix ();
- }
پارامېتىرلىق ئارىلاشمىلار
پارامېتىرلىق ئارىلاشما ئاساسىي ئارىلاشتۇرۇشقا ئوخشايدۇ ، ئەمما ئۇ ئىختىيارى كۆڭۈلدىكى قىممەت بىلەن پارامېتىرلارنىمۇ قوبۇل قىلىدۇ.
- . element {
- . border - radius ( 4px );
- }
ئۆزىڭىزنى ئاسانلا قوشۇڭ
Bootstrap نىڭ بارلىق ئارىلاشما دېتاللىرىنىڭ ھەممىسى دېگۈدەك mixins.less دا ساقلىنىدۇ. بۇ قوراللار قورال ئامبىرىدىكى .less ھۆججىتىنىڭ خالىغان بىرىدە ئارىلاشما ئىشلىتەلەيدۇ.
شۇڭا ، ئىلگىرىلەڭ ھەمدە بارلىرىنى ئىشلىتىڭ ياكى ئېھتىياجىڭىزغا ئاساسەن ئۆزىڭىزنى قوشۇڭ.
ئارىلاشمىلارنى ئۆز ئىچىگە ئالىدۇ
Utilities
| Mixin | پارامېتىرلار | ئىشلىتىش |
|---|---|---|
.clearfix() |
none | ھەر قانداق ئاتا-ئانىغا قوشۇڭ ، ئىچىدىكى لەيلىمە دېتاللارنى تازىلاڭ |
.tab-focus() |
none | Webkit فوكۇس ئۇسلۇبى ۋە يۇمىلاق Firefox تىپىنى ئىشلىتىڭ |
.center-block() |
none | ئاپتوماتىك مەركىزى ئىشلىتىدىغان بۆلەك دەرىجىلىك ئېلېمېنتmargin: auto |
.ie7-inline-block() |
none | display: inline-blockIE7 قوللىشىغا ئېرىشىش ئۈچۈن دائىملىق ئىشلىتىشتىن باشقا ئىشلىتىڭ |
.size() |
@height @width |
ئېگىزلىك ۋە كەڭلىكنى تېزلىكتە بىر قۇرغا تەڭشەڭ |
.square() |
@size |
.size()كەڭلىك ۋە ئېگىزلىكنى ئوخشاش قىممەتكە ئاساسەن قۇرۇپ چىقىدۇ |
.opacity() |
@opacity |
ئومۇمىي ساندا ئېنىقلىق نىسبىتىنى بەلگىلەڭ (مەسىلەن ، «50» ياكى «75») |
جەدۋەل
| Mixin | پارامېتىرلار | ئىشلىتىش |
|---|---|---|
.placeholder() |
@color: @placeholderText |
placeholderكىرگۈزۈش ئۈچۈن تېكىست رەڭگىنى بەلگىلەڭ |
مەتبەئە
| Mixin | پارامېتىرلار | ئىشلىتىش |
|---|---|---|
#font > #family > .serif() |
none | ئېلېمېنتنى serif خەت نۇسخىسىنى ئىشلىتىڭ |
#font > #family > .sans-serif() |
none | ئېلېمېنتنى sans-serif خەت نۇسخىسىنى ئىشلىتىڭ |
#font > #family > .monospace() |
none | ئېلېمېنتنى مونوپوللۇق خەت ساندۇقىنى ئىشلىتىڭ |
#font > .shorthand() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
خەت چوڭلۇقى ، ئېغىرلىقى ۋە باشلامچىلىقىنى ئاسان بەلگىلەڭ |
#font > .serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
خەت نۇسخىسىنى ئائىلىگە تەڭشەڭ ، چوڭلۇقى ، ئېغىرلىقى ۋە يېتەكچىلىكىنى كونترول قىلىڭ |
#font > .sans-serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
خەت نۇسخىسىنى sans-serif قىلىپ تەڭشەڭ ، چوڭلۇقى ، ئېغىرلىقى ۋە باشلامچىسىنى كونترول قىلىڭ |
#font > .monospace() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
خەت نۇسخىسى ئائىلىسىنى مونوپولغا تەڭشەڭ ، چوڭ-كىچىكلىكى ، ئېغىرلىقى ۋە باشلامچىلىق ئورنىنى كونترول قىلىڭ |
تور سىستېمىسى
| Mixin | پارامېتىرلار | ئىشلىتىش |
|---|---|---|
.container-fixed() |
none | مەزمۇنىڭىزنى ساقلاش ئۈچۈن توغرىسىغا مەركەزلىك قاچا قۇرۇڭ |
#grid > .core() |
@gridColumnWidth, @gridGutterWidth |
N ستون ۋە x پېكسىل كەڭلىكتىكى ئۆستەڭ بىلەن پېكسىل تور سىستېمىسى ( قاچا ، قۇر ۋە ستون) ھاسىل قىلىڭ |
#grid > .fluid() |
@fluidGridColumnWidth, @fluidGridGutterWidth |
N تۈۋرۈك ۋە x % كەڭلىكتىكى ئۆستەڭ بىلەن ئالدىنقى قاتاردىكى تور سىستېمىسى ھاسىل قىلىڭ |
#grid > .input() |
@gridColumnWidth, @gridGutterWidth |
ئېلېمېنتلار ئۈچۈن پېكسىل تور سىستېمىسى ھاسىل قىلىڭ ، inputتاختا ۋە چېگرانى ئىگىلەيدۇ |
.makeColumn |
@columns: 1, @offset: 0 |
دەرسلەرنى خالىغانچە divكاتەكچە ئىستونغا ئايلاندۇرۇڭ.span* |
CSS3 خاسلىقى
| Mixin | پارامېتىرلار | ئىشلىتىش |
|---|---|---|
.border-radius() |
@radius |
ئېلېمېنتنىڭ بۇلۇڭ-پۇچقاقلىرىنى توغرىلاڭ. يەككە قىممەت ياكى تۆت بوشلۇق ئايرىلغان قىممەت بولالايدۇ |
.box-shadow() |
@shadow |
ئېلېمېنتقا تامچە سايە قوشۇڭ |
.transition() |
@transition |
CSS3 ئۆتكۈنچى ئۈنۈمنى قوشۇڭ (مەسىلەن ، all .2s linear) |
.rotate() |
@degrees |
بىر ئېلېمېنت n گرادۇسنى ئايلاندۇرۇڭ |
.scale() |
@ratio |
ئېلېمېنتنى ئەسلىدىكى چوڭلۇقىدىن n ھەسسە كىچىكلىتىڭ |
.translate() |
@x, @y |
X ۋە y ئايروپىلانلىرىدىكى ئېلېمېنتنى يۆتكەڭ |
.background-clip() |
@clip |
ئېلېمېنتنىڭ تەگلىكىنى كېسىڭ (پايدىلىق border-radius) |
.background-size() |
@size |
CSS3 ئارقىلىق تەگلىك رەسىملەرنىڭ چوڭ-كىچىكلىكىنى كونترول قىلىڭ |
.box-sizing() |
@boxmodel |
ئېلېمېنتنىڭ قۇتا مودېلىنى ئۆزگەرتىڭ (مەسىلەن ، border-boxپۈتۈن كەڭلىك ئۈچۈن input) |
.user-select() |
@select |
بەتتىكى تېكىست نۇر بەلگىسىنى تاللاش |
.backface-visibility() |
@visibility: visible |
CSS 3D ئۆزگەرتىشنى ئىشلەتكەندە مەزمۇننىڭ لەپىلدەپ كېتىشىنىڭ ئالدىنى ئالىدۇ |
.resizable() |
@direction: both |
ئوڭ ۋە ئاستىغا ھەر قانداق ئېلېمېنتنىڭ چوڭ-كىچىكلىكىنى ئۆزگەرتكىلى بولىدۇ |
.content-columns() |
@columnCount, @columnGap: @gridGutterWidth |
ھەر قانداق ئېلېمېنتنىڭ مەزمۇنىنى CSS3 ستون ئىشلىتىڭ |
تەگلىك ۋە رېشاتكىلار
| Mixin | پارامېتىرلار | ئىشلىتىش |
|---|---|---|
#translucent > .background() |
@color: @white, @alpha: 1 |
ئېلېمېنتقا سۈزۈك تەگلىك رەڭ بېرىڭ |
#translucent > .border() |
@color: @white, @alpha: 1 |
ئېلېمېنتقا سۈزۈك چېگرا رەڭ بېرىڭ |
#gradient > .vertical() |
@startColor, @endColor |
توركۆرگۈچنىڭ تىك تەگلىك دەرىجىسىنى ھاسىل قىلىڭ |
#gradient > .horizontal() |
@startColor, @endColor |
تور كۆرگۈچنىڭ توغرىسىغا تەگلىك دەرىجىسىنى ھاسىل قىلىڭ |
#gradient > .directional() |
@startColor, @endColor, @deg |
تور كۆرگۈچنىڭ يۆنىلىشلىك تەگلىك دەرىجىسىنى ھاسىل قىلىڭ |
#gradient > .vertical-three-colors() |
@startColor, @midColor, @colorStop, @endColor |
تور كۆرگۈچتىن ئۈچ خىل رەڭلىك تەگلىك دەرىجىسىنى ھاسىل قىلىڭ |
#gradient > .radial() |
@innerColor, @outerColor |
تور كۆرگۈچنىڭ رادىئاتسىيە تەگلىك دەرىجىسىنى ھاسىل قىلىڭ |
#gradient > .striped() |
@color, @angle |
توركۆرگۈچنىڭ سىزىقلىق تەگلىك دەرىجىسىنى ھاسىل قىلىڭ |
#gradientBar() |
@primaryColor, @secondaryColor |
ئاستا ۋە سەل قاراڭغۇ چېگرا بەلگىلەش ئۈچۈن كۇنۇپكىلارغا ئىشلىتىلىدۇ |
LESS بىلەن Bootstrap نى تۈزۈش
تۈزۈش قوراللىرى
گىرىم بويۇملىرى
تۆۋەندىكى بۇيرۇقنى ئىجرا قىلىش ئارقىلىق LESS بۇيرۇق قۇرى تۈزگۈچى ۋە uglify-js نى دۇنيا مىقياسىدا npm بىلەن قاچىلاڭ:
$ npm قاچىلاش -g ئاز uglify-js
قاچىلاپ بولغاندىن كېيىن makebootstrap مۇندەرىجىسىڭىزنىڭ يىلتىزىدىن ئىجرا قىلىڭ ، ھەممىڭىز تەييار.
بۇنىڭدىن باشقا ، ئەگەر سىزدە قول سائىتى ئورنىتىلغان بولسا ، make watchھەر قېتىم bootstrap lib دىكى ھۆججەتنى تەھرىرلىگەندە bootstrap نى ئاپتوماتىك قايتا قۇرۇشقا ئىجرا بولۇشىڭىز مۇمكىن (بۇ تەلەپ قىلىنمايدۇ ، پەقەت قۇلايلىق ئۇسۇل).
بۇيرۇق قۇرى
Node ئارقىلىق LESS بۇيرۇق قۇرىنى قاچىلاڭ ۋە تۆۋەندىكى بۇيرۇقنى ئىجرا قىلىڭ:
$ lessc ./less/bootstrap.less> bootstrap.css
ئەگەر بەزى بايتلارنى --compressساقلىماقچى بولسىڭىز ، بۇ بۇيرۇققا قوشۇڭ.
Javascript
ئەڭ يېڭى Less.js نى چۈشۈرۈڭ ۋە ئۇنىڭغا (ۋە Bootstrap) يولىنى قوشۇڭ <head>.
<link rel = "stylesheet / less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" > </script>
.سىز ھۆججەتلەرنى قايتا رەتلەش ئۈچۈن ، ئۇلارنى ساقلاڭ ۋە بېتىڭىزنى قايتا يۈكلەڭ. Less.js ئۇلارنى رەتلەپ يەرلىك ساقلاشقا ساقلايدۇ.
غەيرىي رەسمىي Mac دېتالى
غەيرىي رەسمىي Mac دېتالى .less ھۆججىتىنىڭ مۇندەرىجىسىنى كۆرىدۇ ۋە كۆرگەن .سىز ھۆججەتنى ساقلىغاندىن كېيىن كودنى يەرلىك ھۆججەتلەرگە توپلايدۇ.
ئەگەر ياقتۇرسىڭىز ، ئاپتوماتىك كىچىكلىتىش ۋە تۈزۈلگەن ھۆججەتلەرنىڭ قايسى مۇندەرىجىگە ئايلىنىدىغانلىقى توغرىسىدىكى ئەپتىكى مايىللىقنى ئالماشتۇرالايسىز.
تېخىمۇ كۆپ Mac ئەپلىرى
Crunch
Crunch بولسا Adobe Air دا ياسالغان ئېسىل كۆرۈنىدىغان LESS تەھرىرلىگۈچ ۋە تۈزگۈچى.
CodeKit
غەيرىي رەسمىي Mac دېتالىغا ئوخشاش يىگىت تەرىپىدىن ئىجاد قىلىنغان CodeKit بولسا LESS ، SASS ، Stylus ۋە CoffeeScript نى تۈزگەن Mac دېتالى.
ئاددىي
LESS ھۆججىتىنى سۆرەپ تاشلاش ئۈچۈن Mac ، Linux ۋە PC ئەپلىرى. ئۇنىڭدىن باشقا ، ئەسلى كود GitHub دا بار .