బూట్‌స్ట్రాప్‌తో తక్కువగా ఉపయోగించడం

బూట్‌స్ట్రాప్ యొక్క CSSని రూపొందించడానికి ఉపయోగించే వేరియబుల్స్, మిక్సిన్‌లు మరియు మరిన్నింటి ప్రయోజనాన్ని పొందడానికి, తక్కువ CSS ప్రీప్రాసెసర్‌తో బూట్‌స్ట్రాప్‌ను అనుకూలీకరించండి మరియు విస్తరించండి .

ఎందుకు తక్కువ?

బూట్‌స్ట్రాప్ మా మంచి స్నేహితుడు, అలెక్సిస్ సెల్లియర్ చేత సృష్టించబడిన డైనమిక్ స్టైల్‌షీట్ లాంగ్వేజ్, దాని ప్రధాన భాగంలో తక్కువతో తయారు చేయబడింది . ఇది సిస్టమ్ ఆధారిత CSSని అభివృద్ధి చేయడాన్ని వేగంగా, సులభంగా మరియు మరింత సరదాగా చేస్తుంది.

ఏమి చేర్చబడింది?

CSS యొక్క పొడిగింపుగా, తక్కువ వేరియబుల్స్, కోడ్ యొక్క పునర్వినియోగ స్నిప్పెట్‌ల కోసం మిక్సిన్‌లు, సాధారణ గణితానికి సంబంధించిన కార్యకలాపాలు, గూడు మరియు రంగు ఫంక్షన్‌లను కూడా కలిగి ఉంటుంది.

ఇంకా నేర్చుకో

మరింత తెలుసుకోవడానికి http://lesscss.org/ వద్ద అధికారిక వెబ్‌సైట్‌ను సందర్శించండి .

వేరియబుల్స్

CSSలో రంగులు మరియు పిక్సెల్ విలువలను నిర్వహించడం కొంచెం నొప్పిగా ఉంటుంది, సాధారణంగా కాపీ మరియు పేస్ట్‌తో నిండి ఉంటుంది. అయితే తక్కువతో కాదు - రంగులు లేదా పిక్సెల్ విలువలను వేరియబుల్స్‌గా కేటాయించి, వాటిని ఒకసారి మార్చండి.

మిక్సిన్స్

మీరు సాధారణ 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`	"హెల్వెటికా న్యూయు", హెల్వెటికా, ఏరియల్, సాన్స్-సెరిఫ్
`@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`	#ఇఇఇ
`@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`
`@@dropdownDividerTop`	`#e5e5e5`
`@@dropdownDividerBottom`	`@white`

హీరో యూనిట్

`@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 నిలువు వరుసలను ఉపయోగించేలా చేయండి
`.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ని తిరిగి కంపైల్ చేయాలి.

కంపైలింగ్ కోసం సాధనాలు

మేక్‌ఫైల్‌తో నోడ్

కింది ఆదేశాన్ని అమలు చేయడం ద్వారా npmతో ప్రపంచవ్యాప్తంగా తక్కువ కమాండ్ లైన్ కంపైలర్, JSHint, Recess మరియు uglify-jsని ఇన్‌స్టాల్ చేయండి:

$ npm ఇన్‌స్టాల్ -g తక్కువ jshint recess uglify-js

ఇన్‌స్టాల్ చేసిన తర్వాత makeమీ బూట్‌స్ట్రాప్ డైరెక్టరీ యొక్క రూట్ నుండి అమలు చేయండి మరియు మీరు అంతా సిద్ధంగా ఉన్నారు.

అదనంగా, మీరు వాచర్‌ని ఇన్‌స్టాల్ చేసి ఉంటే, మీరు బూట్‌స్ట్రాప్ లిబ్‌లో make watchఫైల్‌ను సవరించిన ప్రతిసారీ బూట్‌స్ట్రాప్ స్వయంచాలకంగా పునర్నిర్మించబడేలా మీరు అమలు చేయవచ్చు (ఇది అవసరం లేదు, అనుకూలమైన పద్ధతి మాత్రమే).

కమాండ్ లైన్

నోడ్ ద్వారా తక్కువ కమాండ్ లైన్ సాధనాన్ని ఇన్‌స్టాల్ చేయండి మరియు కింది ఆదేశాన్ని అమలు చేయండి:

$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 యాప్

అనధికారిక Mac యాప్ .less ఫైల్‌ల డైరెక్టరీలను చూస్తుంది మరియు చూసిన .less ఫైల్‌ని ప్రతి సేవ్ చేసిన తర్వాత కోడ్‌ను స్థానిక ఫైల్‌లకు కంపైల్ చేస్తుంది.

మీరు కావాలనుకుంటే, ఆటోమేటిక్ మినిఫైయింగ్ కోసం యాప్‌లో ప్రాధాన్యతలను టోగుల్ చేయవచ్చు మరియు కంపైల్ చేసిన ఫైల్‌లు ఏ డైరెక్టరీలో ముగుస్తాయి.

తక్కువతో నిర్మించబడింది

ఎందుకు తక్కువ?

ఏమి చేర్చబడింది?

ఇంకా నేర్చుకో

వేరియబుల్స్

మిక్సిన్స్

కార్యకలాపాలు

బూట్‌స్ట్రాప్ వేరియబుల్స్ తక్కువ వేరియబుల్స్, వాటి విలువలు మరియు వినియోగ మార్గదర్శకాలు

పరంజా మరియు లింకులు

గ్రిడ్ వ్యవస్థ

టైపోగ్రఫీ

పట్టికలు

గ్రేస్కేల్ రంగులు

యాస రంగులు

భాగాలు

బటన్లు

రూపాలు

రాష్ట్రాలు మరియు హెచ్చరికలను ఫారమ్ చేయండి

నవబార్

డ్రాప్‌డౌన్‌లు

హీరో యూనిట్

బూట్స్ట్రాప్ మిక్సిన్లు

మిక్సిన్స్ గురించి

ప్రాథమిక మిక్సిన్స్

పారామెట్రిక్ మిక్సిన్స్

మీ స్వంతంగా సులభంగా జోడించండి

మిక్స్‌లు చేర్చబడ్డాయి

యుటిలిటీస్

రూపాలు

టైపోగ్రఫీ

గ్రిడ్ వ్యవస్థ

CSS3 లక్షణాలు

నేపథ్యాలు మరియు ప్రవణతలు

తక్కువతో బూట్‌స్ట్రాప్ కంపైల్ చేస్తోంది

కంపైలింగ్ కోసం సాధనాలు

మేక్‌ఫైల్‌తో నోడ్

కమాండ్ లైన్

జావాస్క్రిప్ట్

అనధికారిక Mac యాప్

మరిన్ని Mac యాప్‌లు

క్రంచ్

కోడ్‌కిట్

సరళమైనది