LESSን በBootstrap በመጠቀም

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

ለምን ያነሰ?

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

ምን ይካተታል?

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

ተጨማሪ እወቅ

ያነሰ CSS

የበለጠ ለማወቅ በ 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
@@dropdownDividerTop #e5e5e5
@@dropdownDividerBottom @white

ጀግና ክፍል

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

ስለ ድብልቅ ነገሮች

መሰረታዊ ድብልቆች

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

  1. . አካል {
  2. . clearfix ();
  3. }

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

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

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

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

ከሞላ ጎደል ሁሉም የ 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 አምዶችን ይጠቀሙ
.hyphens() @mode: auto ሲፈልጉ CSS3 ማሰረዣ (ያካትታል word-wrap: break-word)

ዳራዎች እና ቀስቶች

ቅልቅል መለኪያዎች አጠቃቀም
#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 የትእዛዝ መስመር አቀናባሪ፣ JSHint፣ Recess እና ugify-js በአለምአቀፍ ደረጃ በ npm ጫን።

$ npm መጫን -g ያነሰ jshint recess 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 ያጠናቅራቸዋል እና በአካባቢው ማከማቻ ውስጥ ያስቀምጣቸዋል።

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

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

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

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

ክራንች

ክራንች በAdobe Air ላይ የተገነባ በጣም ጥሩ የሆነ ትንሽ አርታዒ እና ማጠናከሪያ ነው።

CodeKit

ከመደበኛው የማክ መተግበሪያ ጋር በተመሳሳይ ሰው የተፈጠረ፣ CodeKit LESS፣ SASS፣ Stylus እና CoffeeScript የሚያጠናቅቅ የማክ መተግበሪያ ነው።

ቀላል

LESS ፋይሎችን ለመጎተት እና ለመጣል የማክ፣ ሊኑክስ እና ፒሲ መተግበሪያ። በተጨማሪም፣ የምንጭ ኮድ በ GitHub ላይ ነው።