Bootstrap ئارقىلىق LESS نى ئىشلىتىش

Bootstrap نىڭ CSS ئالدىن بىر تەرەپ قىلغۇچىسى LESS بىلەن Bootstrap نى خاسلاشتۇرۇڭ ۋە كېڭەيتىڭ ، Bootstrap نىڭ CSS نى ياساشقا ئىشلىتىلىدىغان ئۆزگەرگۈچى مىقدار ، ئارىلاشمىلار ۋە تېخىمۇ كۆپ پايدىلىنىڭ.

نېمىشقا LESS؟

Bootstrap بولسا ياخشى دوستىمىز ئالېكىس سېللېر ئىجاد قىلغان ھەرىكەتچان ئۇسلۇب جەدۋىلى LESS بىلەن ياسالغان . ئۇ سىستېما ئاساسىدىكى CSS نى تېز ، تېخىمۇ ئاسان ۋە تېخىمۇ قىزىقارلىق قىلىدۇ.

نېمىلەرنى ئۆز ئىچىگە ئالىدۇ؟

CSS نىڭ كېڭەيتىلىشى سۈپىتىدە ، LESS ئۆزگەرگۈچى مىقدار ، قايتا ئىشلەتكىلى بولىدىغان كود پارچىلىرىنى ئارىلاشتۇرۇش ، ئاددىي ماتېماتىكا مەشغۇلاتى ، ئۇۋا ، ھەتتا رەڭ فۇنكسىيەسىنى ئۆز ئىچىگە ئالىدۇ.

تەپسىلاتى

تېخىمۇ كۆپ ئۇچۇرغا ئېرىشىش ئۈچۈن http://lesscss.org/ دىكى ئورگان تور بېتىنى زىيارەت قىلىڭ .

ئۆزگەرگۈچى مىقدار

CSS دىكى رەڭ ۋە پېكسىل قىممىتىنى باشقۇرۇش سەل ئازابلىق بولىدۇ ، ئادەتتە كۆپەيتىش ۋە چاپلاش بىلەن تولغان. LESS بىلەن ئەمەس - رەڭ ياكى پېكسىل قىممىتىنى ئۆزگەرگۈچى قىلىپ بەلگىلەڭ ۋە بىر قېتىم ئۆزگەرتىڭ.

Mixins

دائىملىق ol 'CSS دا سىز قىلىشقا تېگىشلىك بۇ ئۈچ چېگرا رادىئاتسىيە خىتابنامىسى؟ ھازىر ئۇلار ئارىلاشما ، كود پارچىلىرىنىڭ ياردىمىدە بىر قۇرغا چۈشۈپ قالدى ، خالىغان جايدا قايتا ئىشلەتسىڭىز بولىدۇ.

مەشغۇلاتلار

تور ئارقىلىق ماتېماتىكىنى مەشغۇلات ئارقىلىق قىلىش ئارقىلىق تورنى يېتەكلەش ، يېتەكلەش ۋە تېخىمۇ دەرىجىدىن تاشقىرى جانلىق قىلىڭ. كۆپەيتىش ، بۆلۈش ، قوشۇش ۋە CSS ساغلاملىقىڭىزغا ئېرىشىش يولىڭىزنى ئېلىڭ.

ئۇلىنىش ۋە ئۇلىنىش

`@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`
`@@dropdownDividerTop`	`#e5e5e5`
`@@dropdownDividerBottom`	`@white`

قەھرىمان بىرلىكى

`@heroUnitBackground`	`@grayLighter`
`@heroUnitHeadingColor`	`inherit`
`@heroUnitLeadColor`	`inhereit`

ئارىلاشمىلار ھەققىدە

Basic mixins

ئاساسىي ئارىلاشما ماھىيەتتە CSS نىڭ بىر پارچىسىنى ئۆز ئىچىگە ئالىدۇ ياكى قىسمەن. ئۇلار خۇددى CSS سىنىپىغا ئوخشاش يېزىلغان بولۇپ ، خالىغان جايدا چاقىرىشقا بولىدۇ.

. element {
  . clearfix ();
}

پارامېتىرلىق ئارىلاشمىلار

پارامېتىرلىق ئارىلاشما ئاساسىي ئارىلاشتۇرۇشقا ئوخشايدۇ ، ئەمما ئۇ ئىختىيارى كۆڭۈلدىكى قىممەت بىلەن پارامېتىرلارنى (شۇڭلاشقا ئىسىم) قوبۇل قىلىدۇ.

. element {
  . border - radius ( 4px );
}

ئۆزىڭىزنى ئاسانلا قوشۇڭ

Bootstrap نىڭ ئارىلاشما دېتاللىرىنىڭ ھەممىسى دېگۈدەك mixins.less دا ساقلىنىدۇ ، بۇ ئېسىل قورال. قورالسىز ھۆججەت.

شۇڭا ، ئىلگىرىلەڭ ھەمدە بارلىرىنى ئىشلىتىڭ ياكى ئېھتىياجىڭىزغا ئاساسەن ئۆزىڭىزنى قوشۇڭ.

ئارىلاشمىلارنى ئۆز ئىچىگە ئالىدۇ

Utilities

Mixin	پارامېتىرلار	ئىشلىتىش
`.clearfix()`	none	ھەر قانداق ئاتا-ئانىغا قوشۇڭ ، ئىچىدىكى لەيلىمە دېتاللارنى تازىلاڭ
`.tab-focus()`	none	Webkit فوكۇس ئۇسلۇبى ۋە يۇمىلاق Firefox تىپىنى ئىشلىتىڭ
`.center-block()`	none	ئاپتوماتىك مەركىزى ئىشلىتىدىغان بۆلەك دەرىجىلىك ئېلېمېنت`margin: auto`
`.ie7-inline-block()`	none	`display: inline-block`IE7 نىڭ قوللىشىغا ئېرىشىش ئۈچۈن قەرەللىك ھالدا ئىشلىتىڭ
`.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 ستون ئىشلىتىڭ
`.hyphens()`	`@mode: auto`	سىز خالىغان ۋاقىتتا CSS3 ئۇلاش (ئۆز ئىچىگە ئالىدۇ `word-wrap: break-word`)

تەگلىك ۋە رېشاتكىلار

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`	ئاستا ۋە سەل قاراڭغۇ چېگرا بەلگىلەش ئۈچۈن كۇنۇپكىلارغا ئىشلىتىلىدۇ

ئەسكەرتىش: ئەگەر سىز ئۆزگەرتىلگەن CSS ئارقىلىق GitHub غا تارتىش تەلىپىنى يوللىسىڭىز ، چوقۇم بۇ ئۇسۇللارنىڭ خالىغان بىرى ئارقىلىق CSS نى قايتا تولۇقلىشىڭىز كېرەك.

تۈزۈش قوراللىرى

گىرىم بويۇملىرى

تۆۋەندىكى بۇيرۇقنى ئىجرا قىلىش ئارقىلىق LESS بۇيرۇق قۇرى تۈزگۈچى ، JSHint ، Recess ۋە uglify-js نى پۈتۈن دۇنيا مىقياسىدا قاچىلاڭ:

$ npm قاچىلاش -g ئاز jshint recess 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 ھۆججىتىنىڭ مۇندەرىجىسىنى كۆرىدۇ ۋە كۆرگەن .سىز ھۆججەتنى ساقلىغاندىن كېيىن كودنى يەرلىك ھۆججەتلەرگە توپلايدۇ.

ئەگەر ياقتۇرسىڭىز ، ئاپتوماتىك كىچىكلىتىش ۋە تۈزۈلگەن ھۆججەتلەرنىڭ قايسى مۇندەرىجىگە ئايلىنىدىغانلىقى توغرىسىدىكى ئەپتىكى مايىللىقنى ئالماشتۇرالايسىز.

LESS بىلەن ياسالغان

نېمىشقا LESS؟

نېمىلەرنى ئۆز ئىچىگە ئالىدۇ؟

تەپسىلاتى

ئۆزگەرگۈچى مىقدار

Mixins

مەشغۇلاتلار

Bootstrap ئۆزگەرگۈچى مىقدار LESS ئۆزگەرگۈچى مىقدار ، ئۇلارنىڭ قىممىتى ۋە ئىشلىتىش قوللانمىسى

ئۇلىنىش ۋە ئۇلىنىش

تور سىستېمىسى

مەتبەئە

جەدۋەل

كۈلرەڭ رەڭلەر

ئېنىق رەڭلەر

زاپچاسلار

كۇنۇپكىلار

جەدۋەل

ھالەت ۋە ئاگاھلاندۇرۇش

Navbar

تامچە

قەھرىمان بىرلىكى

Bootstrap mixins

ئارىلاشمىلار ھەققىدە

Basic mixins

پارامېتىرلىق ئارىلاشمىلار

ئۆزىڭىزنى ئاسانلا قوشۇڭ

ئارىلاشمىلارنى ئۆز ئىچىگە ئالىدۇ

Utilities

جەدۋەل

مەتبەئە

تور سىستېمىسى

CSS3 خاسلىقى

تەگلىك ۋە رېشاتكىلار

LESS بىلەن Bootstrap نى تۈزۈش

تۈزۈش قوراللىرى

گىرىم بويۇملىرى

بۇيرۇق قۇرى

Javascript

غەيرىي رەسمىي Mac دېتالى

تېخىمۇ كۆپ Mac ئەپلىرى

Crunch

CodeKit

ئاددىي