బూట్‌స్ట్రాప్‌తో తక్కువగా ఉపయోగించడం
బూట్స్ట్రాప్ యొక్క CSSని రూపొందించడానికి ఉపయోగించే వేరియబుల్స్, మిక్సిన్లు మరియు మరిన్నింటి ప్రయోజనాన్ని పొందడానికి, తక్కువ CSS ప్రీప్రాసెసర్‌తో బూట్‌స్ట్రాప్‌ను అనుకూలీకరించండి మరియు విస్తరించండి .
తక్కువతో నిర్మించబడింది
ఎందుకు తక్కువ?
బూట్స్ట్రాప్ మా మంచి స్నేహితుడు, అలెక్సిస్ సెల్లియర్ చేత సృష్టించబడిన డైనమిక్ స్టైల్‌షీట్ భాష, దాని కోర్ వద్ద తక్కువతో తయారు చేయబడింది . ఇది సిస్టమ్ ఆధారిత CSSని అభివృద్ధి చేయడాన్ని వేగంగా, సులభంగా మరియు మరింత సరదాగా చేస్తుంది.
ఏమి చేర్చబడింది?
CSS యొక్క పొడిగింపుగా, తక్కువ వేరియబుల్స్, కోడ్ యొక్క పునర్వినియోగ స్నిప్పెట్‌ల కోసం మిక్సిన్లు, సాధారణ గణితానికి సంబంధించిన కార్యకలాపాలు, గూడు మరియు రంగు ఫంక్షన్‌లను కూడా కలిగి ఉంటుంది.
వేరియబుల్స్
CSSలో రంగులు మరియు పిక్సెల్ విలువలను నిర్వహించడం కొంచెం నొప్పిగా ఉంటుంది, సాధారణంగా కాపీ మరియు పేస్ట్‌తో నిండి ఉంటుంది. అయితే తక్కువతో కాదు - రంగులు లేదా పిక్సెల్ విలువలను వేరియబుల్స్‌గా కేటాయించి, వాటిని ఒకసారి మార్చండి.
మిక్సిన్స్
మీరు సాధారణ ol' CSSలో చేయవలసిన ఆ మూడు సరిహద్దు-వ్యాసార్థం ప్రకటనలు? ఇప్పుడు మీరు ఎక్కడైనా మళ్లీ ఉపయోగించగలిగే మిక్సిన్లు, కోడ్ స్నిప్పెట్‌ల సహాయంతో అవి ఒక లైన్‌కు తగ్గాయి.
కార్యకలాపాలు
ఆపరేషన్‌లతో ఎగిరి గణితం చేయడం ద్వారా మీ గ్రిడ్‌ని, లీడింగ్‌గా మరియు మరింత ఫ్లెక్సిబుల్‌గా చేయండి. CSS తెలివికి మీ మార్గాన్ని బహుళ, విభజించండి, జోడించండి మరియు తీసివేయండి.
బూట్స్ట్రాప్ వేరియబుల్స్ తక్కువ వేరియబుల్స్, వాటి విలువలు మరియు వినియోగ మార్గదర్శకాలు
హైపర్‌లింక్‌లు
@linkColor |
#08c | డిఫాల్ట్ లింక్ టెక్స్ట్ రంగు | |
@linkColorHover |
darken(@linkColor, 15%) |
డిఫాల్ట్ లింక్ టెక్స్ట్ హోవర్ రంగు |
గ్రిడ్ వ్యవస్థ
@gridColumns |
12 |
@gridColumnWidth |
60px |
@gridGutterWidth |
20px |
@fluidGridColumnWidth |
6.382978723% |
@fluidGridGutterWidth |
2.127659574% |
టైపోగ్రఫీ
@baseFontSize |
13px | |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
|
@baseLineHeight |
18px |
గ్రేస్కేల్ రంగులు
@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 |
భాగాలు
బటన్లు
@primaryButtonBackground |
@linkColor |
రూపాలు
@placeholderText |
@grayLight |
నవబార్
@navbarHeight |
40px | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
రాష్ట్రాలు మరియు హెచ్చరికలను ఫారమ్ చేయండి
@warningText |
#f3edd2 | |
@warningBackground |
#c09853 | |
@errorText |
#b94a48 | |
@errorBackground |
#f2dede | |
@successText |
#468847 | |
@successBackground |
#dff0d8 | |
@infoText |
#3a87ad | |
@infoBackground |
#d9edf7 |
బూట్స్ట్రాప్ మిక్సిన్లు
మిక్సిన్స్ గురించి
ప్రాథమిక మిక్సిన్స్
ప్రాథమిక మిక్సిన్ అనేది CSS యొక్క స్నిప్పెట్ కోసం తప్పనిసరిగా చేర్చబడుతుంది లేదా పాక్షికంగా ఉంటుంది. అవి CSS క్లాస్ లాగా వ్రాయబడ్డాయి మరియు ఎక్కడైనా పిలవవచ్చు.
- . మూలకం {
- . clearfix ();
- }
పారామెట్రిక్ మిక్సిన్స్
పారామెట్రిక్ మిక్సిన్ అనేది ప్రాథమిక మిక్సిన్ లాగా ఉంటుంది, అయితే ఇది ఐచ్ఛిక డిఫాల్ట్ విలువలతో పారామితులను (అందుకే పేరు) కూడా అంగీకరిస్తుంది.
- . మూలకం {
- . సరిహద్దు - వ్యాసార్థం ( 4px );
- }
మీ స్వంతంగా సులభంగా జోడించండి
దాదాపు అన్ని బూట్స్ట్రాప్ మిక్సిన్లు mixins.lessలో నిల్వ చేయబడతాయి, టూల్‌కిట్‌లోని ఏదైనా .less ఫైల్‌లలో మిక్సిన్‌ని ఉపయోగించడానికి మిమ్మల్ని అనుమతించే అద్భుతమైన యుటిలిటీ .లెస్ ఫైల్.
కాబట్టి, ముందుకు సాగండి మరియు ఇప్పటికే ఉన్న వాటిని ఉపయోగించండి లేదా మీకు అవసరమైన విధంగా మీ స్వంతంగా జోడించుకోవడానికి సంకోచించకండి.
మిక్స్‌లు చేర్చబడ్డాయి
యుటిలిటీస్
| మిక్సిన్ | పారామితులు | వాడుక |
|---|---|---|
.clearfix() |
ఏదీ లేదు | లోపల ఫ్లోట్‌లను క్లియర్ చేయడానికి ఏదైనా పేరెంట్‌కి జోడించండి |
.tab-focus() |
ఏదీ లేదు | వెబ్‌కిట్ ఫోకస్ స్టైల్ మరియు రౌండ్ ఫైర్‌ఫాక్స్ అవుట్‌లైన్‌ని వర్తింపజేయండి |
.center-block() |
ఏదీ లేదు | బ్లాక్-లెవల్ ఎలిమెంట్‌ని ఉపయోగించి ఆటో సెంటర్margin: auto |
.ie7-inline-block() |
ఏదీ లేదు | display: inline-blockIE7 మద్దతు పొందడానికి రెగ్యులర్‌కు అదనంగా ఉపయోగించండి |
.size() |
@height: 5px, @width: 5px |
ఒక లైన్‌లో ఎత్తు మరియు వెడల్పును త్వరగా సెట్ చేయండి |
.square() |
@size: 5px |
.size()వెడల్పు మరియు ఎత్తును ఒకే విలువగా సెట్ చేయడానికి బిల్డ్ ఆన్ చేస్తుంది |
.opacity() |
@opacity: 100 |
పూర్ణ సంఖ్యలలో, అస్పష్టత శాతాన్ని సెట్ చేయండి (ఉదా, "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() |
ఏదీ లేదు | @siteWidthమీ కంటెంట్‌ను ఉంచడం కోసం స్థిర-వెడల్పు (తో సెట్ చేయబడిన) కంటైనర్‌ను అందించండి |
.columns() |
@columns: 1 |
ఎన్ని నిలువు వరుసలనైనా విస్తరించే గ్రిడ్ నిలువు వరుసను రూపొందించండి (డిఫాల్ట్‌గా 1 నిలువు వరుస వరకు) |
.offset() |
@columns: 1 |
గ్రిడ్ నిలువు వరుసను ఎడమ మార్జిన్‌తో ఆఫ్‌సెట్ చేయండి, అది ఎన్ని నిలువు వరుసలనైనా విస్తరించి ఉంటుంది |
.gridColumn() |
ఏదీ లేదు | ఒక మూలకాన్ని గ్రిడ్ కాలమ్ లాగా ఫ్లోట్ చేయండి |
CSS3 లక్షణాలు
| మిక్సిన్ | పారామితులు | వాడుక |
|---|---|---|
.border-radius() |
@radius: 5px |
మూలకం యొక్క మూలలను రౌండ్ చేయండి. ఒకే విలువ లేదా నాలుగు స్పేస్-వేరు చేయబడిన విలువలు కావచ్చు |
.box-shadow() |
@shadow: 0 1px 3px rgba(0,0,0,.25) |
మూలకానికి డ్రాప్ షాడోని జోడించండి |
.transition() |
@transition |
CSS3 పరివర్తన ప్రభావాన్ని జోడించండి (ఉదా, all .2s linear) |
.rotate() |
@degrees |
మూలకాన్ని n డిగ్రీలు తిప్పండి |
.scale() |
@ratio |
మూలకాన్ని దాని అసలు పరిమాణం కంటే n రెట్లు స్కేల్ చేయండి |
.translate() |
@x: 0, @y: 0 |
x మరియు y విమానాలపై మూలకాన్ని తరలించండి |
.background-clip() |
@clip |
మూలకం యొక్క నేపథ్యాన్ని కత్తిరించండి (దీనికి ఉపయోగపడుతుంది border-radius) |
.background-size() |
@size |
CSS3 ద్వారా నేపథ్య చిత్రాల పరిమాణాన్ని నియంత్రించండి |
.box-sizing() |
@boxmodel |
మూలకం కోసం బాక్స్ మోడల్‌ను మార్చండి (ఉదా, border-boxపూర్తి వెడల్పు కోసం input) |
.user-select() |
@select |
పేజీలోని టెక్స్ట్ యొక్క కర్సర్ ఎంపికను నియంత్రించండి |
.resizable() |
@direction: both |
ఏదైనా మూలకాన్ని కుడి మరియు దిగువన పరిమాణం మార్చగలిగేలా చేయండి |
.content-columns() |
@columnCount, @columnGap: @gridColumnGutter |
ఏదైనా మూలకం యొక్క కంటెంట్ 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 |
గ్రేడియంట్ మరియు కొద్దిగా ముదురు అంచుని కేటాయించడానికి బటన్‌ల కోసం ఉపయోగించబడుతుంది |
తక్కువతో బూట్స్ట్రాప్ కంపైల్ చేస్తోంది
కంపైలింగ్ కోసం సాధనాలు
మేక్‌ఫైల్‌తో నోడ్
కింది ఆదేశాన్ని అమలు చేయడం ద్వారా npmతో తక్కువ కమాండ్ లైన్ కంపైలర్‌ను ఇన్‌స్టాల్ చేయండి:
$ npm ఇన్‌స్టాల్ తక్కువ
ఇన్‌స్టాల్ చేసిన తర్వాత makeమీ బూట్స్ట్రాప్ డైరెక్టరీ యొక్క రూట్ నుండి అమలు చేయండి మరియు మీరు అంతా సిద్ధంగా ఉన్నారు.
అదనంగా, మీరు వాచర్‌ని ఇన్‌స్టాల్ చేసి ఉంటే, మీరు బూట్స్ట్రాప్ లిబ్‌లో make watchఫైల్‌ను సవరించిన ప్రతిసారీ బూట్స్ట్రాప్ స్వయంచాలకంగా పునర్నిర్మించబడేలా మీరు అమలు చేయవచ్చు (ఇది అవసరం లేదు, అనుకూలమైన పద్ధతి మాత్రమే).
కమాండ్ లైన్
నోడ్ ద్వారా తక్కువ కమాండ్ లైన్ సాధనాన్ని ఇన్‌స్టాల్ చేయండి మరియు కింది ఆదేశాన్ని అమలు చేయండి:
$lessc ./lib/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 ఫైల్‌ని ప్రతి సేవ్ చేసిన తర్వాత కోడ్‌ను స్థానిక ఫైల్‌లకు కంపైల్ చేస్తుంది.
మీరు కావాలనుకుంటే, ఆటోమేటిక్ మినిఫైయింగ్ కోసం యాప్‌లో ప్రాధాన్యతలను టోగుల్ చేయవచ్చు మరియు కంపైల్ చేసిన ఫైల్‌లు ఏ డైరెక్టరీలో ముగుస్తాయి.
మరిన్ని Mac యాప్‌లు
క్రంచ్
క్రంచ్ అనేది అడోబ్ ఎయిర్‌లో నిర్మించిన తక్కువ ఎడిటర్ మరియు కంపైలర్.
కోడ్‌కిట్
అనధికారిక Mac యాప్ వలె అదే వ్యక్తి సృష్టించిన కోడ్‌కిట్ అనేది తక్కువ, సాస్, స్టైలస్ మరియు కాఫీస్క్రిప్ట్‌లను కంపైల్ చేసే Mac యాప్.
సరళమైనది
Mac, Linux మరియు PC యాప్ తక్కువ ఫైల్‌లను డ్రాగ్ మరియు డ్రాప్ కంపైలింగ్ కోసం. అదనంగా, సోర్స్ కోడ్ GitHubలో ఉంది .