LESSን በBootstrap በመጠቀም

የ Bootstrapን CSS ለመገንባት ከተለዋዋጮች፣ድብልቅሎች እና ሌሎችም ለመጠቀም ቡትስትራፕን በ LESS ያብጁ እና ያራዝሙ።

ለምን ያነሰ?

ቡትስትራፕ በዋናው ወዳጃችን አሌክሲስ ሴሊየር የተፈጠረ ተለዋዋጭ የቅጥ ሉህ ቋንቋ በLESS የተሰራ ነው ። በስርዓቶች ላይ የተመሰረተ CSSን በፍጥነት፣ ቀላል እና የበለጠ አስደሳች ያደርገዋል።

ምን ይካተታል?

እንደ CSS ማራዘሚያ፣ LESS ተለዋዋጮችን፣ ድብልቆችን ለዳግም ጥቅም ላይ ሊውሉ ለሚችሉ የኮድ ቅንጣቢዎች፣ ለቀላል ሂሳብ ኦፕሬሽኖች፣ ጎጆዎች እና እንዲሁም የቀለም ተግባራትን ያካትታል።

ተጨማሪ እወቅ

የበለጠ ለማወቅ በ http://lesscss.org/ ላይ ያለውን ኦፊሴላዊ ድረ-ገጽ ይጎብኙ ።

ተለዋዋጮች

በሲኤስኤስ ውስጥ ቀለሞችን እና የፒክሰል እሴቶችን ማስተዳደር ትንሽ ህመም ሊሆን ይችላል፣ ብዙውን ጊዜ በመገልበጥ እና በመለጠፍ የተሞላ። ከ LESS ጋር አይደለም - ቀለሞችን ወይም ፒክስል እሴቶችን እንደ ተለዋዋጮች መድቡ እና አንድ ጊዜ ለውጣቸው።

ቅልቅል

እነዚያ ሶስት የጠረፍ ራዲየስ መግለጫዎች በመደበኛ ol' CSS ውስጥ ማድረግ ያለብዎት? አሁን በማንኛውም ቦታ እንደገና ሊጠቀሙባቸው በሚችሉ ሚክስክስ፣ የኮድ ቅንጣቢዎች ታግዘው ወደ አንድ መስመር ደርሰዋል።

ክወናዎች

ሒሳብን ከኦፕሬሽኖች ጋር በመብረር የእርስዎን ፍርግርግ፣ መሪ እና የበለጠ ተለዋዋጭ ያድርጉት። ወደ CSS ጤነኛ መንገድዎን ያባዙ፣ ያካፍሉ፣ ያክሉ እና ይቀንሱ።

ስካፎልዲንግ እና ማገናኛዎች

`@bodyBackground`	`@white`	የገጽ ዳራ ቀለም
`@textColor`	`@grayDark`	ነባሪ የጽሑፍ ቀለም ለመላው አካል፣ ርእሶች እና ሌሎችም።
`@linkColor`	`#08c`	ነባሪ አገናኝ የጽሑፍ ቀለም
`@linkColorHover`	`darken(@linkColor, 15%)`	ነባሪ አገናኝ የጽሑፍ ማንዣበብ ቀለም

የፍርግርግ ስርዓት

`@gridColumns`	12
`@gridColumnWidth`	60 ፒክስል
`@gridGutterWidth`	20 ፒክስል
`@fluidGridColumnWidth`	6.382978723%
`@fluidGridGutterWidth`	2.127659574%

የፊደል አጻጻፍ

`@sansFontFamily`	"Helvetica Neue", Helvetica, Arial, sans-serif
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	ሜንሎ፣ ሞናኮ፣ “ኩሪየር አዲስ”፣ ሞኖስፔስ
`@baseFontSize`	13 ፒክስል	ፒክስሎች መሆን አለባቸው
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18 ፒክስል	ፒክስሎች መሆን አለባቸው
`@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`	#ኢኢ
`@white`	#ፍፍፍፍ

የአነጋገር ቀለሞች

`@blue`	#049ሲዲቢ
`@green`	#46a546
`@red`	#9d261d
`@yellow`	#ffc40d
`@orange`	#f89406
`@pink`	# c3325 ረ
`@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`	#3-87
`@infoBackground`	#d9edf7

ናቭባር

`@navbarHeight`	40 ፒክስል
`@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`

ስለ ድብልቅ ነገሮች

መሰረታዊ ድብልቆች

መሠረታዊ ድብልቅ በመሠረቱ የ CSS ቅንጣቢ ወይም ከፊል ነው። እነሱ ልክ እንደ ሲኤስኤስ ክፍል የተጻፉ ናቸው እና በማንኛውም ቦታ ሊጠሩ ይችላሉ።

. አካል {
  . clearfix ();
}

የፓራሜትሪክ ድብልቆች

ፓራሜትሪክ ሚክሲን ልክ እንደ መሰረታዊ ድብልቅ ነው፣ ግን ደግሞ ግቤቶችን (ስለዚህ ስሙ) ከአማራጭ ነባሪ እሴቶች ጋር ይቀበላል።

. አካል {
  . ድንበር - ራዲየስ ( 4 ፒክስል );
}

በቀላሉ የእራስዎን ያክሉ

ከሞላ ጎደል ሁሉም የ Bootstrap's mixins በ mixins.less ውስጥ ተቀምጠዋል፣በመሳሪያ ኪት ውስጥ ካሉት .ያነሰ ፋይሎች ውስጥ ድብልቅን ለመጠቀም የሚያስችል ግሩም መገልገያ .less ፋይል።

ስለዚህ፣ ይቀጥሉ እና ያሉትን ይጠቀሙ ወይም እንደፈለጉት የራስዎን ለመጨመር ነፃነት ይሰማዎ።

የተካተቱ ድብልቅዎች

መገልገያዎች

ቅልቅል	መለኪያዎች	አጠቃቀም
`.clearfix()`	ምንም	ውስጥ ተንሳፋፊዎችን ለማጽዳት ወደ ማንኛውም ወላጅ ያክሉ
`.tab-focus()`	ምንም	የዌብኪት የትኩረት ስታይል እና የፋየርፎክስ ዝርዝርን ዙርያ ይተግብሩ
`.center-block()`	ምንም	በመጠቀም የማገጃ-ደረጃ አካልን በራስ-ሰር ያገናኙት።`margin: auto`
`.ie7-inline-block()`	ምንም	`display: inline-block`የIE7 ድጋፍ ለማግኘት ከመደበኛው በተጨማሪ ይጠቀሙ
`.size()`	`@height @width`	በአንድ መስመር ላይ ቁመቱን እና ስፋቱን በፍጥነት ያዘጋጁ
`.square()`	`@size`	`.size()`ስፋቱን እና ቁመቱን እንደ ተመሳሳይ እሴት ለማዘጋጀት ይገነባል።
`.opacity()`	`@opacity`	በሙሉ ቁጥሮች ግልጽ ያልሆነውን መቶኛ አዘጋጅ (ለምሳሌ "50" ወይም "75")

ቅጾች

ቅልቅል	መለኪያዎች	አጠቃቀም
`.placeholder()`	`@color: @placeholderText`	`placeholder`የጽሑፍ ቀለሙን ለግቤቶች ያዘጋጁ

የፊደል አጻጻፍ

ቅልቅል	መለኪያዎች	አጠቃቀም
`#font > #family > .serif()`	ምንም	አንድ ኤለመንት የሰሪፍ ቅርጸ-ቁምፊ ቁልል ይጠቀሙ
`#font > #family > .sans-serif()`	ምንም	አንድ ንጥረ ነገር የሳን-ሰሪፍ ቅርጸ-ቁምፊ ቁልል ይጠቀሙ
`#font > #family > .monospace()`	ምንም	አንድ ኤለመንት የሞኖስፔስ ቅርጸ-ቁምፊ ቁልል ይጠቀሙ
`#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`	የቅርጸ-ቁምፊ ቤተሰብን ወደ ሞኖስፔስ ያቀናብሩ፣ እና መጠንን፣ ክብደትን እና መሪን ይቆጣጠሩ

የፍርግርግ ስርዓት

ቅልቅል	መለኪያዎች	አጠቃቀም
`.container-fixed()`	ምንም	ይዘትዎን ለመያዝ በአግድም ያማከለ መያዣ ይፍጠሩ
`#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 ባህሪያት

ቅልቅል	መለኪያዎች	አጠቃቀም
`.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 አምዶችን ይጠቀሙ

ዳራዎች እና ቀስቶች

ቅልቅል	መለኪያዎች	አጠቃቀም
`#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ን ማጠናቀር አለቦት ።

ለማጠናቀር መሳሪያዎች

መስቀለኛ መንገድ ከ makefile ጋር

የሚከተለውን ትዕዛዝ በማሄድ LESS የትእዛዝ መስመር አቀናባሪን እና ugify-jsን በአለምአቀፍ ደረጃ በ npm ጫን።

$ npm መጫን -g ያነሰ uglify-js

አንዴ ከተጫነ makeከቡትስትራፕ ማውጫዎ ስር ያሂዱ እና ዝግጁ ነዎት።

በተጨማሪም ጠባቂ ከተጫነ በቡትስትራፕ ሊብ ውስጥ ፋይልን ባርትዑ ቁጥር ቡትስትራፕmake watch በራስ-ሰር እንደገና እንዲገነባ ሊሮጡ ይችላሉ (ይህ አያስፈልግም፣ የምቾት ዘዴ ብቻ)።

የትእዛዝ መስመር

LESS የትእዛዝ መስመር መሳሪያን በኖድ በኩል ይጫኑ እና የሚከተለውን ትዕዛዝ ያሂዱ፡

$ lessc ./less/bootstrap.less > bootstrap.css

--compressአንዳንድ ባይት ለማስቀመጥ እየሞከሩ ከሆነ በዚያ ትዕዛዝ ውስጥ ማካተትዎን እርግጠኛ ይሁኑ !

ጃቫስክሪፕት

የቅርብ ጊዜዎቹን Less.js ያውርዱ እና ወደ እሱ የሚወስደውን መንገድ (እና Bootstrap) በ ውስጥ ያካትቱ <head>።

<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>

ያነሱ ፋይሎችን እንደገና ለመሰብሰብ፣ በቀላሉ ያስቀምጡ እና ገጽዎን እንደገና ይጫኑ። Less.js ያጠናቅራቸዋል እና በአካባቢው ማከማቻ ውስጥ ያስቀምጣቸዋል።

መደበኛ ያልሆነ የማክ መተግበሪያ

መደበኛ ያልሆነው የማክ መተግበሪያ .ያነሱ ፋይሎች ማውጫዎችን ይመለከታቸዋል እና ኮዱን ወደ አካባቢያዊ ፋይሎች ያጠናቅራል ከእያንዳንዱ የታየ . አልባ ፋይል በኋላ።

ከፈለጉ በመተግበሪያው ውስጥ ምርጫዎችን በራስ-ሰር ለመቀነስ እና የተጠናቀሩ ፋይሎች በየትኛው ማውጫ ውስጥ እንደሚገኙ መቀያየር ይችላሉ።

በLESS የተሰራ

ለምን ያነሰ?

ምን ይካተታል?

ተጨማሪ እወቅ

ተለዋዋጮች

ቅልቅል

ክወናዎች

የቡትስትራፕ ተለዋዋጮች ያነሱ ተለዋዋጮች፣ እሴቶቻቸው እና የአጠቃቀም መመሪያዎች

ስካፎልዲንግ እና ማገናኛዎች

የፍርግርግ ስርዓት

የፊደል አጻጻፍ

ጠረጴዛዎች

ግራጫ ቀለም ያላቸው ቀለሞች

የአነጋገር ቀለሞች

አካላት

አዝራሮች

ቅጾች

ግዛቶችን እና ማንቂያዎችን ይፍጠሩ

ናቭባር

መውረድ

ጀግና ክፍል

የቡትስትራክ ድብልቆች

ስለ ድብልቅ ነገሮች

መሰረታዊ ድብልቆች

የፓራሜትሪክ ድብልቆች

በቀላሉ የእራስዎን ያክሉ

የተካተቱ ድብልቅዎች

መገልገያዎች

ቅጾች

የፊደል አጻጻፍ

የፍርግርግ ስርዓት

CSS3 ባህሪያት

ዳራዎች እና ቀስቶች

Bootstrapን ከLESS ጋር በማጠናቀር ላይ

ለማጠናቀር መሳሪያዎች

መስቀለኛ መንገድ ከ makefile ጋር

የትእዛዝ መስመር

ጃቫስክሪፕት

መደበኛ ያልሆነ የማክ መተግበሪያ

ተጨማሪ የማክ መተግበሪያዎች

ክራንች

CodeKit

ቀላል