ബൂട്ട്‌സ്‌ട്രാപ്പിനൊപ്പം കുറവ് ഉപയോഗിക്കുന്നു

ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ CSS നിർമ്മിക്കാൻ ഉപയോഗിക്കുന്ന വേരിയബിളുകൾ, മിക്‌സിനുകൾ എന്നിവയും അതിലേറെയും പ്രയോജനപ്പെടുത്തുന്നതിന്, ഒരു CSS പ്രീപ്രൊസസറായ LESS ഉപയോഗിച്ച് ബൂട്ട്‌സ്‌ട്രാപ്പ് ഇഷ്ടാനുസൃതമാക്കുകയും വിപുലീകരിക്കുകയും ചെയ്യുക .

എന്തുകൊണ്ട് കുറവ്?

ബൂട്ട്‌സ്‌ട്രാപ്പ് അതിന്റെ കാമ്പിൽ കുറച്ച് ഉപയോഗിച്ചാണ് നിർമ്മിച്ചിരിക്കുന്നത്, ഞങ്ങളുടെ നല്ല സുഹൃത്തായ അലക്‌സിസ് സെല്ലിയർ സൃഷ്‌ടിച്ച ഡൈനാമിക് സ്‌റ്റൈൽഷീറ്റ് ഭാഷ . ഇത് സിസ്റ്റം അടിസ്ഥാനമാക്കിയുള്ള CSS വികസിപ്പിക്കുന്നത് വേഗമേറിയതും എളുപ്പമുള്ളതും കൂടുതൽ രസകരവുമാക്കുന്നു.

എന്താണ് ഉൾപ്പെടുത്തിയിരിക്കുന്നത്?

CSS-ന്റെ വിപുലീകരണമെന്ന നിലയിൽ, വേരിയബിളുകൾ, കോഡിന്റെ പുനരുപയോഗിക്കാവുന്ന സ്‌നിപ്പെറ്റുകൾക്കായുള്ള മിക്സിനുകൾ, ലളിതമായ ഗണിതത്തിനുള്ള പ്രവർത്തനങ്ങൾ, നെസ്റ്റിംഗ്, കൂടാതെ കളർ ഫംഗ്‌ഷനുകൾ എന്നിവയും കുറവ് ഉൾപ്പെടുന്നു.

കൂടുതലറിയുക

കൂടുതലറിയാൻ http://lesscss.org/ എന്ന ഔദ്യോഗിക വെബ്സൈറ്റ് സന്ദർശിക്കുക .

വേരിയബിളുകൾ

CSS-ൽ നിറങ്ങളും പിക്സൽ മൂല്യങ്ങളും കൈകാര്യം ചെയ്യുന്നത് അൽപ്പം വേദനാജനകമാണ്, സാധാരണയായി കോപ്പിയും പേസ്റ്റും നിറഞ്ഞതാണ്. കുറവാണെങ്കിലും അല്ല - നിറങ്ങളോ പിക്സൽ മൂല്യങ്ങളോ വേരിയബിളുകളായി നൽകുകയും അവ ഒരിക്കൽ മാറ്റുകയും ചെയ്യുക.

മിക്സിൻസ്

സാധാരണ 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`	"ഹെൽവെറ്റിക്ക ന്യൂ", ഹെൽവെറ്റിക്ക, ഏരിയൽ, സാൻസ്-സെരിഫ്
`@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

നവബാർ

`@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`

മിക്സിനുകളെ കുറിച്ച്

അടിസ്ഥാന മിക്സിനുകൾ

അടിസ്ഥാന മിക്‌സിൻ എന്നത് പ്രധാനമായും CSS-ന്റെ ഒരു സ്‌നിപ്പെറ്റിനുള്ള ഉൾപ്പെടുത്തലോ ഭാഗികമോ ആണ്. അവ ഒരു CSS ക്ലാസ് പോലെ എഴുതിയിരിക്കുന്നു, എവിടെയും വിളിക്കാവുന്നതാണ്.

. ഘടകം {
  . clearfix ();
}

പാരാമെട്രിക് മിക്സിനുകൾ

ഒരു പാരാമെട്രിക് മിക്‌സിൻ ഒരു അടിസ്ഥാന മിക്‌സിൻ പോലെയാണ്, എന്നാൽ ഇത് ഓപ്‌ഷണൽ ഡിഫോൾട്ട് മൂല്യങ്ങളുള്ള പാരാമീറ്ററുകളും (അതിനാൽ പേര്) സ്വീകരിക്കുന്നു.

. ഘടകം {
  . ബോർഡർ - ആരം ( 4px );
}

നിങ്ങളുടേത് എളുപ്പത്തിൽ ചേർക്കുക

ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ മിക്കവാറും എല്ലാ മിക്സിനുകളും 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 വീണ്ടും കംപൈൽ ചെയ്യണം .

കംപൈൽ ചെയ്യുന്നതിനുള്ള ഉപകരണങ്ങൾ

മേക്ക്‌ഫൈലുള്ള നോഡ്

ഇനിപ്പറയുന്ന കമാൻഡ് പ്രവർത്തിപ്പിച്ച് npm ഉപയോഗിച്ച് ആഗോളതലത്തിൽ LESS കമാൻഡ് ലൈൻ കമ്പൈലറും uglify-js-ഉം ഇൻസ്റ്റാൾ ചെയ്യുക:

$ npm ഇൻസ്റ്റാൾ -g കുറവ് uglify-js

ഇൻസ്റ്റാൾ ചെയ്തുകഴിഞ്ഞാൽ make, നിങ്ങളുടെ ബൂട്ട്സ്ട്രാപ്പ് ഡയറക്ടറിയുടെ റൂട്ടിൽ നിന്ന് പ്രവർത്തിപ്പിക്കുക, നിങ്ങൾ എല്ലാം സജ്ജമാക്കിക്കഴിഞ്ഞു.

കൂടാതെ, നിങ്ങൾ വാച്ചർ ഇൻസ്റ്റാൾ ചെയ്‌തിട്ടുണ്ടെങ്കിൽ, make watchബൂട്ട്‌സ്‌ട്രാപ്പ് ലിബിൽ ഒരു ഫയൽ എഡിറ്റുചെയ്യുമ്പോഴെല്ലാം ബൂട്ട്‌സ്‌ട്രാപ്പ് സ്വയമേവ പുനർനിർമ്മിക്കുന്നതിന് നിങ്ങൾ പ്രവർത്തിപ്പിക്കാം (ഇത് ആവശ്യമില്ല, ഒരു സൗകര്യപ്രദമായ രീതി മാത്രം).

കമാൻഡ് ലൈൻ

നോഡ് വഴി LESS കമാൻഡ് ലൈൻ ടൂൾ ഇൻസ്റ്റാൾ ചെയ്ത് ഇനിപ്പറയുന്ന കമാൻഡ് പ്രവർത്തിപ്പിക്കുക:

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

--compressനിങ്ങൾ ചില ബൈറ്റുകൾ സംരക്ഷിക്കാൻ ശ്രമിക്കുകയാണെങ്കിൽ ആ കമാൻഡിൽ ഉൾപ്പെടുത്തുന്നത് ഉറപ്പാക്കുക !

ജാവാസ്ക്രിപ്റ്റ്

ഏറ്റവും പുതിയ Les.js ഡൗൺലോഡ് ചെയ്‌ത് അതിലേക്കുള്ള പാത (ബൂട്ട്‌സ്‌ട്രാപ്പും) എന്നതിൽ ഉൾപ്പെടുത്തുക <head>.

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

.less ഫയലുകൾ വീണ്ടും കംപൈൽ ചെയ്യാൻ, അവ സംരക്ഷിച്ച് നിങ്ങളുടെ പേജ് വീണ്ടും ലോഡുചെയ്യുക. Less.js അവ കംപൈൽ ചെയ്യുകയും ലോക്കൽ സ്റ്റോറേജിൽ സൂക്ഷിക്കുകയും ചെയ്യുന്നു.

അനൗദ്യോഗിക മാക് ആപ്പ്

അനൗദ്യോഗിക Mac ആപ്പ് .less ഫയലുകളുടെ ഡയറക്‌ടറികൾ വീക്ഷിക്കുകയും കണ്ട .less ഫയലിന്റെ ഓരോ സേവ് ചെയ്‌തതിന് ശേഷവും ലോക്കൽ ഫയലുകളിലേക്ക് കോഡ് കംപൈൽ ചെയ്യുകയും ചെയ്യുന്നു.

നിങ്ങൾക്ക് താൽപ്പര്യമുണ്ടെങ്കിൽ, സ്വയമേവ ചെറുതാക്കുന്നതിനും കംപൈൽ ചെയ്‌ത ഫയലുകൾ ഏത് ഡയറക്‌ടറിയിലാണ് അവസാനിക്കുന്നതെന്നും ആപ്പിലെ മുൻഗണനകൾ ടോഗിൾ ചെയ്യാം.

കുറച്ച് കൊണ്ട് നിർമ്മിച്ചത്

എന്തുകൊണ്ട് കുറവ്?

എന്താണ് ഉൾപ്പെടുത്തിയിരിക്കുന്നത്?

കൂടുതലറിയുക

വേരിയബിളുകൾ

മിക്സിൻസ്

പ്രവർത്തനങ്ങൾ

ബൂട്ട്സ്ട്രാപ്പ് വേരിയബിളുകൾ കുറവ് വേരിയബിളുകൾ, അവയുടെ മൂല്യങ്ങൾ, ഉപയോഗ മാർഗ്ഗനിർദ്ദേശങ്ങൾ

സ്കാർഫോൾഡിംഗും ലിങ്കുകളും

ഗ്രിഡ് സിസ്റ്റം

ടൈപ്പോഗ്രാഫി

പട്ടികകൾ

ഗ്രേസ്കെയിൽ നിറങ്ങൾ

ആക്സന്റ് നിറങ്ങൾ

ഘടകങ്ങൾ

ബട്ടണുകൾ

ഫോമുകൾ

ഫോം സ്റ്റേറ്റുകളും അലേർട്ടുകളും

നവബാർ

ഡ്രോപ്പ്ഡൗണുകൾ

ഹീറോ യൂണിറ്റ്

ബൂട്ട്സ്ട്രാപ്പ് മിക്സിനുകൾ

മിക്സിനുകളെ കുറിച്ച്

അടിസ്ഥാന മിക്സിനുകൾ

പാരാമെട്രിക് മിക്സിനുകൾ

നിങ്ങളുടേത് എളുപ്പത്തിൽ ചേർക്കുക

മിക്സിനുകൾ ഉൾപ്പെടുത്തിയിട്ടുണ്ട്

യൂട്ടിലിറ്റികൾ

ഫോമുകൾ

ടൈപ്പോഗ്രാഫി

ഗ്രിഡ് സിസ്റ്റം

CSS3 പ്രോപ്പർട്ടികൾ

പശ്ചാത്തലങ്ങളും ഗ്രേഡിയന്റുകളും

കുറവ് ഉപയോഗിച്ച് ബൂട്ട്സ്ട്രാപ്പ് കംപൈൽ ചെയ്യുന്നു

കംപൈൽ ചെയ്യുന്നതിനുള്ള ഉപകരണങ്ങൾ

മേക്ക്‌ഫൈലുള്ള നോഡ്

കമാൻഡ് ലൈൻ

ജാവാസ്ക്രിപ്റ്റ്

അനൗദ്യോഗിക മാക് ആപ്പ്

കൂടുതൽ Mac ആപ്പുകൾ

ക്രഞ്ച്

കോഡ്കിറ്റ്

ലളിതം