థీమ్ బూట్స్ట్రాప్
సులభమైన థీమ్ మరియు కాంపోనెంట్ మార్పుల కోసం గ్లోబల్ స్టైల్ ప్రాధాన్యతల కోసం మా కొత్త అంతర్నిర్మిత సాస్ వేరియబుల్స్‌తో బూట్స్ట్రాప్ 4ని అనుకూలీకరించండి.
పరిచయం
distబూట్స్ట్రాప్ 3లో, తక్కువ, కస్టమ్ CSS మరియు మేము మా ఫైల్‌లలో చేర్చిన ప్రత్యేక థీమ్ స్టైల్‌షీట్‌లో వేరియబుల్ ఓవర్‌రైడ్‌ల ద్వారా థీమింగ్ ఎక్కువగా నడపబడుతుంది . కొంత ప్రయత్నంతో, కోర్ ఫైల్‌లను తాకకుండానే బూట్స్ట్రాప్ 3 రూపాన్ని పూర్తిగా రీడిజైన్ చేయవచ్చు. బూట్స్ట్రాప్ 4 సుపరిచితమైన, కానీ కొద్దిగా భిన్నమైన విధానాన్ని అందిస్తుంది.
ఇప్పుడు, థీమింగ్ సాస్ వేరియబుల్స్, సాస్ మ్యాప్స్ మరియు కస్టమ్ CSS ద్వారా సాధించబడుతుంది. అంకితమైన థీమ్ స్టైల్‌షీట్ లేదు; బదులుగా, మీరు గ్రేడియంట్లు, నీడలు మరియు మరిన్నింటిని జోడించడానికి అంతర్నిర్మిత థీమ్‌ను ప్రారంభించవచ్చు.
సాస్
వేరియబుల్స్, మ్యాప్‌లు, మిక్సిన్‌లు మరియు మరిన్నింటి ప్రయోజనాన్ని పొందడానికి మా సోర్స్ Sass ఫైల్‌లను ఉపయోగించండి. మా బిల్డ్‌లో బ్రౌజర్ రౌండింగ్‌తో సమస్యలను నివారించడానికి మేము Sass రౌండింగ్ ఖచ్చితత్వాన్ని 6కి (డిఫాల్ట్‌గా ఇది 5) పెంచాము.
ఫైల్ నిర్మాణం
సాధ్యమైనప్పుడల్లా, బూట్స్ట్రాప్ యొక్క ప్రధాన ఫైల్‌లను సవరించడాన్ని నివారించండి. Sass కోసం, అంటే బూట్‌స్ట్రాప్‌ను దిగుమతి చేసే మీ స్వంత స్టైల్‌షీట్‌ని సృష్టించడం అంటే మీరు దానిని సవరించవచ్చు మరియు పొడిగించవచ్చు. మీరు npm వంటి ప్యాకేజీ నిర్వాహికిని ఉపయోగిస్తున్నారని ఊహిస్తే, మీరు ఇలా కనిపించే ఫైల్ నిర్మాణాన్ని కలిగి ఉంటారు:
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scssమీరు మా సోర్స్ ఫైల్‌లను డౌన్‌లోడ్ చేసి, ప్యాకేజీ నిర్వాహికిని ఉపయోగించకుంటే, మీరు బూట్స్ట్రాప్ యొక్క సోర్స్ ఫైల్‌లను మీ స్వంత ఫైల్‌ల నుండి వేరుగా ఉంచుతూ, ఆ నిర్మాణాన్ని పోలి ఉండే ఏదైనా మాన్యువల్‌గా సెటప్ చేయాలనుకుంటున్నారు.
your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scssదిగుమతి చేస్తోంది
మీ లో custom.scss, మీరు బూట్స్ట్రాప్ యొక్క సోర్స్ Sass ఫైల్‌లను దిగుమతి చేస్తారు. మీకు రెండు ఎంపికలు ఉన్నాయి: బూట్స్ట్రాప్ మొత్తాన్ని చేర్చండి లేదా మీకు అవసరమైన భాగాలను ఎంచుకోండి. మేము రెండవదాన్ని ప్రోత్సహిస్తాము, అయినప్పటికీ మా భాగాలలో కొన్ని అవసరాలు మరియు డిపెండెన్సీలు ఉన్నాయని గుర్తుంచుకోండి. మీరు మా ప్లగిన్‌ల కోసం కొన్ని జావాస్క్రిప్ట్‌లను కూడా చేర్చాలి.
// Custom.scss
// Option A: Include all of Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";// Custom.scss
// Option B: Include parts of Bootstrap
// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";ఆ సెటప్‌తో, మీరు మీలోని సాస్ వేరియబుల్స్ మరియు మ్యాప్‌లలో దేనినైనా సవరించడం ప్రారంభించవచ్చు custom.scss. // Optionalమీరు అవసరమైన విధంగా విభాగం కింద బూట్స్ట్రాప్ భాగాలను జోడించడం కూడా ప్రారంభించవచ్చు . మా ఫైల్ నుండి పూర్తి దిగుమతి స్టాక్‌ను bootstrap.scssమీ ప్రారంభ బిందువుగా ఉపయోగించమని మేము సూచిస్తున్నాము.
వేరియబుల్ డిఫాల్ట్‌లు
బూట్స్ట్రాప్ 4లోని ప్రతి సాస్ వేరియబుల్ !defaultబూట్స్ట్రాప్ సోర్స్ కోడ్‌ను సవరించకుండానే మీ స్వంత సాస్‌లో వేరియబుల్ డిఫాల్ట్ విలువను భర్తీ చేయడానికి మిమ్మల్ని అనుమతించే ఫ్లాగ్‌ను కలిగి ఉంటుంది. అవసరమైన విధంగా వేరియబుల్స్‌ను కాపీ చేసి పేస్ట్ చేయండి, వాటి విలువలను సవరించండి మరియు !defaultఫ్లాగ్‌ను తీసివేయండి. వేరియబుల్ ఇప్పటికే కేటాయించబడి ఉంటే, అది బూట్‌స్ట్రాప్‌లోని డిఫాల్ట్ విలువల ద్వారా తిరిగి కేటాయించబడదు.
మీరు బూట్స్ట్రాప్ యొక్క వేరియబుల్స్ యొక్క పూర్తి జాబితాను లో కనుగొంటారు scss/_variables.scss. కొన్ని వేరియబుల్స్ కు సెట్ చేయబడ్డాయి null, ఈ వేరియబుల్స్ మీ కాన్ఫిగరేషన్‌లో ఓవర్‌రైడ్ చేయబడితే తప్ప ప్రాపర్టీని అవుట్‌పుట్ చేయవు.
అదే Sass ఫైల్‌లోని వేరియబుల్ ఓవర్‌రైడ్‌లు డిఫాల్ట్ వేరియబుల్స్‌కు ముందు లేదా తర్వాత రావచ్చు. అయితే, Sass ఫైల్‌లలో ఓవర్‌రైడ్ చేస్తున్నప్పుడు, మీరు Bootstrap యొక్క Sass ఫైల్‌లను దిగుమతి చేసే ముందు మీ ఓవర్‌రైడ్‌లు తప్పనిసరిగా వస్తాయి.
npm ద్వారా బూట్‌స్ట్రాప్‌ను దిగుమతి చేసేటప్పుడు మరియు కంపైల్ చేసేటప్పుడు background-colorమార్చే ఉదాహరణ ఇక్కడ ఉంది color:<body>
// Your variable overrides
$body-bg: #000;
$body-color: #111;
// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";దిగువ గ్లోబల్ ఎంపికలతో సహా బూట్‌స్ట్రాప్‌లోని ఏదైనా వేరియబుల్ కోసం అవసరమైన విధంగా పునరావృతం చేయండి.
మ్యాప్‌లు మరియు లూప్‌లు
బూట్స్ట్రాప్ 4లో కొన్ని సాస్ మ్యాప్‌లు ఉన్నాయి, సంబంధిత CSS కుటుంబాలను రూపొందించడాన్ని సులభతరం చేసే కీలక విలువ జతల. మేము మా రంగులు, గ్రిడ్ బ్రేక్‌పాయింట్‌లు మరియు మరిన్నింటి కోసం సాస్ మ్యాప్‌లను ఉపయోగిస్తాము. Sass వేరియబుల్స్ లాగానే, అన్ని Sass మ్యాప్‌లు !defaultఫ్లాగ్‌ని కలిగి ఉంటాయి మరియు భర్తీ చేయబడతాయి మరియు పొడిగించబడతాయి.
మా Sass మ్యాప్‌లలో కొన్ని డిఫాల్ట్‌గా ఖాళీగా విలీనం చేయబడ్డాయి. ఇచ్చిన సాస్ మ్యాప్‌ను సులభంగా విస్తరించేందుకు ఇది జరుగుతుంది, అయితే మ్యాప్ నుండి ఐటెమ్‌లను తీసివేయడం కొంచెం కష్టతరం అవుతుంది.
మ్యాప్‌ని సవరించండి
మా మ్యాప్‌లో ఇప్పటికే ఉన్న రంగును సవరించడానికి $theme-colors, మీ అనుకూల Sass ఫైల్‌కు క్రింది వాటిని జోడించండి:
$theme-colors: (
"primary": #0074d9,
"danger": #ff4136
);మ్యాప్‌కు జోడించండి
కు కొత్త రంగును $theme-colorsజోడించడానికి, కొత్త కీ మరియు విలువను జోడించండి:
$theme-colors: (
"custom-color": #900
);మ్యాప్ నుండి తీసివేయండి
నుండి రంగులను తీసివేయడానికి $theme-colors, లేదా ఏదైనా ఇతర మ్యాప్, ఉపయోగించండి map-remove. మీరు దీన్ని మా అవసరాలు మరియు ఎంపికల మధ్య తప్పనిసరిగా చేర్చాలని గుర్తుంచుకోండి:
// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
$theme-colors: map-remove($theme-colors, "info", "light", "dark");
// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
...అవసరమైన కీలు
బూట్స్ట్రాప్ సాస్ మ్యాప్‌లలో కొన్ని నిర్దిష్ట కీల ఉనికిని ఊహిస్తుంది, వీటిని మనం ఉపయోగించాము మరియు విస్తరించాము. మీరు చేర్చబడిన మ్యాప్‌లను అనుకూలీకరించినప్పుడు, నిర్దిష్ట Sass మ్యాప్ యొక్క కీని ఉపయోగిస్తున్నప్పుడు మీరు ఎర్రర్‌లను ఎదుర్కోవచ్చు.
ఉదాహరణకు, మేము లింక్‌లు, బటన్‌లు మరియు ఫారమ్ స్టేట్‌ల కోసం primary, success, మరియు dangerకీలను ఉపయోగిస్తాము. $theme-colorsఈ కీల విలువలను భర్తీ చేయడం వలన ఎటువంటి సమస్యలు ఉండకూడదు, కానీ వాటిని తీసివేయడం వలన సాస్ సంకలనం సమస్యలు ఏర్పడవచ్చు. ఈ సందర్భాలలో, మీరు ఆ విలువలను ఉపయోగించుకునే సాస్ కోడ్‌ని సవరించాలి.
విధులు
బూట్స్ట్రాప్ అనేక సాస్ ఫంక్షన్‌లను ఉపయోగిస్తుంది, అయితే సాధారణ థీమింగ్‌కు ఉపసమితి మాత్రమే వర్తిస్తుంది. రంగు మ్యాప్‌ల నుండి విలువలను పొందడానికి మేము మూడు ఫంక్షన్‌లను చేర్చాము:
@function color($key: "blue") {
@return map-get($colors, $key);
}
@function theme-color($key: "primary") {
@return map-get($theme-colors, $key);
}
@function gray($key: "100") {
@return map-get($grays, $key);
}మీరు v3 నుండి కలర్ వేరియబుల్‌ను ఎలా ఉపయోగించాలనుకుంటున్నారో వంటి సాస్ మ్యాప్ నుండి ఒక రంగును ఎంచుకోవడానికి ఇవి మిమ్మల్ని అనుమతిస్తాయి.
.custom-element {
color: gray("100");
background-color: theme-color("dark");
}మ్యాప్ నుండి నిర్దిష్ట స్థాయి రంగును పొందడానికి మాకు మరొక ఫంక్షన్ కూడా ఉంది. $theme-colorsప్రతికూల స్థాయి విలువలు రంగును తేలికపరుస్తాయి, అయితే అధిక స్థాయిలు ముదురుతాయి.
@function theme-color-level($color-name: "primary", $level: 0) {
$color: theme-color($color-name);
$color-base: if($level > 0, #000, #fff);
$level: abs($level);
@return mix($color-base, $color, $level * $theme-color-interval);
}ఆచరణలో, మీరు ఫంక్షన్‌కు కాల్ చేసి, రెండు పారామితులలో పాస్ చేయాలి: రంగు పేరు $theme-colors(ఉదా, ప్రాథమిక లేదా ప్రమాదం) మరియు సంఖ్యా స్థాయి.
.custom-element {
color: theme-color-level(primary, -10);
}అదనపు సాస్ మ్యాప్‌ల కోసం స్థాయి ఫంక్షన్‌లను సృష్టించడానికి భవిష్యత్తులో అదనపు ఫంక్షన్‌లు లేదా మీ స్వంత కస్టమ్ సాస్‌ని జోడించవచ్చు లేదా మీరు మరింత వెర్బోస్‌గా ఉండాలనుకుంటే సాధారణమైనది కూడా.
రంగు విరుద్ధంగా
బూట్‌స్ట్రాప్‌లో మేము చేర్చే అదనపు ఫంక్షన్ కలర్ కాంట్రాస్ట్ ఫంక్షన్, color-yiq. ఇది పేర్కొన్న బేస్ కలర్ ఆధారంగా లైట్ ( ) లేదా డార్క్ ( ) కాంట్రాస్ట్ కలర్‌ను స్వయంచాలకంగా తిరిగి ఇవ్వడానికి YIQ కలర్ స్పేస్‌ని ఉపయోగిస్తుంది. మీరు బహుళ తరగతులను రూపొందించే మిక్సిన్‌లు లేదా లూప్‌లకు ఈ ఫంక్షన్ ప్రత్యేకంగా ఉపయోగపడుతుంది.#fff#111
ఉదాహరణకు, మా $theme-colorsమ్యాప్ నుండి రంగుల స్విచ్‌లను రూపొందించడానికి:
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-yiq($value);
}
}ఇది ఒక-ఆఫ్ కాంట్రాస్ట్ అవసరాలకు కూడా ఉపయోగించవచ్చు:
.custom-element {
color: color-yiq(#000); // returns `color: #fff`
}మీరు మా రంగు మ్యాప్ ఫంక్షన్‌లతో బేస్ కలర్‌ను కూడా పేర్కొనవచ్చు:
.custom-element {
color: color-yiq(theme-color("dark")); // returns `color: #fff`
}ఎస్కేప్ SVG
SVG నేపథ్య చిత్రాల కోసం , మరియు అక్షరాలు escape-svgనుండి తప్పించుకోవడానికి మేము ఫంక్షన్‌ని ఉపయోగిస్తాము . IEలో బ్యాక్‌గ్రౌండ్ ఇమేజ్‌లను సరిగ్గా రెండర్ చేయడానికి ఈ అక్షరాలు తప్పించుకోవాలి.<>#
విధులను జోడించండి మరియు తీసివేయండి
మేము CSS ఫంక్షన్‌ను చుట్టడానికి addమరియు ఫంక్షన్‌లను ఉపయోగిస్తాము . "యూనిట్‌లెస్" విలువను వ్యక్తీకరణలోకి పంపినప్పుడు లోపాలను నివారించడం ఈ ఫంక్షన్‌ల యొక్క ప్రాథమిక ఉద్దేశ్యం . వంటి వ్యక్తీకరణలు గణితశాస్త్రపరంగా సరైనవి అయినప్పటికీ, అన్ని బ్రౌజర్‌లలో లోపాన్ని చూపుతాయి.subtractcalc0calccalc(10px - 0)
గణన చెల్లుబాటు అయ్యే ఉదాహరణ:
$border-radius: .25rem;
$border-width: 1px;
.element {
// Output calc(.25rem - 1px) is valid
border-radius: calc($border-radius - $border-width);
}
.element {
// Output the same calc(.25rem - 1px) as above
border-radius: subtract($border-radius, $border-width);
}గణన చెల్లని ఉదాహరణ:
$border-radius: .25rem;
$border-width: 0;
.element {
// Output calc(.25rem - 0) is invalid
border-radius: calc($border-radius - $border-width);
}
.element {
// Output .25rem
border-radius: subtract($border-radius, $border-width);
}సాస్ ఎంపికలు
మా అంతర్నిర్మిత కస్టమ్ వేరియబుల్స్ ఫైల్‌తో బూట్స్ట్రాప్ 4ని అనుకూలీకరించండి మరియు కొత్త $enable-*సాస్ వేరియబుల్స్‌తో గ్లోబల్ CSS ప్రాధాన్యతలను సులభంగా టోగుల్ చేయండి. వేరియబుల్ విలువను భర్తీ చేయండి మరియు npm run testఅవసరమైన విధంగా తిరిగి కంపైల్ చేయండి.
scss/_variables.scssమీరు బూట్స్ట్రాప్ ఫైల్‌లో కీలకమైన గ్లోబల్ ఆప్షన్‌ల కోసం ఈ వేరియబుల్‌లను కనుగొని అనుకూలీకరించవచ్చు .
| వేరియబుల్ | విలువలు | వివరణ |
|---|---|---|
$spacer |
1rem(డిఫాల్ట్), లేదా ఏదైనా విలువ > 0 |
ప్రోగ్రామాటిక్‌గా మా స్పేసర్ యుటిలిటీలను రూపొందించడానికి డిఫాల్ట్ స్పేసర్ విలువను పేర్కొంటుంది . |
$enable-rounded |
true(డిఫాల్ట్) లేదాfalse |
border-radiusవివిధ భాగాలపై ముందే నిర్వచించిన శైలులను ప్రారంభిస్తుంది . |
$enable-shadows |
trueలేదా false(డిఫాల్ట్) |
box-shadowవివిధ భాగాలపై ముందే నిర్వచించిన శైలులను ప్రారంభిస్తుంది . |
$enable-gradients |
trueలేదా false(డిఫాల్ట్) |
background-imageవివిధ భాగాలపై స్టైల్స్ ద్వారా ముందే నిర్వచించబడిన ప్రవణతలను ప్రారంభిస్తుంది . |
$enable-transitions |
true(డిఫాల్ట్) లేదాfalse |
transitionవివిధ భాగాలపై ముందే నిర్వచించిన లను ప్రారంభిస్తుంది . |
$enable-prefers-reduced-motion-media-query |
true(డిఫాల్ట్) లేదాfalse |
prefers-reduced-motionమీడియా ప్రశ్నను ప్రారంభిస్తుంది , ఇది వినియోగదారుల బ్రౌజర్/ఆపరేటింగ్ సిస్టమ్ ప్రాధాన్యతల ఆధారంగా నిర్దిష్ట యానిమేషన్‌లు/పరివర్తనాలను అణిచివేస్తుంది. |
$enable-hover-media-query |
trueలేదా false(డిఫాల్ట్) |
తిరస్కరించబడింది |
$enable-grid-classes |
true(డిఫాల్ట్) లేదాfalse |
గ్రిడ్ సిస్టమ్ కోసం CSS తరగతుల ఉత్పత్తిని ప్రారంభిస్తుంది (ఉదా, .container, .row, .col-md-1, మొదలైనవి). |
$enable-caret |
true(డిఫాల్ట్) లేదాfalse |
న సూడో ఎలిమెంట్ కేరెట్‌ని ప్రారంభిస్తుంది .dropdown-toggle. |
$enable-pointer-cursor-for-buttons |
true(డిఫాల్ట్) లేదాfalse |
నాన్-డిసేబుల్ బటన్ ఎలిమెంట్‌లకు “హ్యాండ్” కర్సర్‌ని జోడించండి. |
$enable-print-styles |
true(డిఫాల్ట్) లేదాfalse |
ప్రింటింగ్‌ని ఆప్టిమైజ్ చేయడానికి స్టైల్‌లను ప్రారంభిస్తుంది. |
$enable-responsive-font-sizes |
trueలేదా false(డిఫాల్ట్) |
ప్రతిస్పందించే ఫాంట్ పరిమాణాలను ప్రారంభిస్తుంది . |
$enable-validation-icons |
true(డిఫాల్ట్) లేదాfalse |
background-imageవచన ఇన్‌పుట్‌లలోని చిహ్నాలను మరియు ధ్రువీకరణ స్థితుల కోసం కొన్ని అనుకూల ఫారమ్‌లను ప్రారంభిస్తుంది . |
$enable-deprecation-messages |
trueలేదా false(డిఫాల్ట్) |
trueవిస్మరించబడిన మిక్సిన్‌లు మరియు ఫంక్షన్‌లలో తీసివేయడానికి ప్లాన్ చేసిన ఏవైనా ఉపయోగించినప్పుడు హెచ్చరికలను చూపడానికి సెట్ చేయండి v5. |
రంగు
బూట్స్ట్రాప్ యొక్క అనేక భాగాలు మరియు యుటిలిటీలు సాస్ మ్యాప్‌లో నిర్వచించబడిన రంగుల శ్రేణి ద్వారా నిర్మించబడ్డాయి. నియమాల శ్రేణిని త్వరగా రూపొందించడానికి ఈ మ్యాప్‌ను సాస్‌లో లూప్ చేయవచ్చు.
అన్ని రంగులు
బూట్స్ట్రాప్ 4లో అందుబాటులో ఉన్న అన్ని రంగులు సాస్ వేరియబుల్స్‌గా మరియు scss/_variables.scssఫైల్‌లో సాస్ మ్యాప్‌గా అందుబాటులో ఉంటాయి. మేము ఇప్పటికే చేర్చిన గ్రేస్కేల్ ప్యాలెట్ లాగా అదనపు షేడ్స్‌ని జోడించడానికి ఇది తదుపరి చిన్న విడుదలలలో విస్తరించబడుతుంది .
మీరు మీ సాస్‌లో వీటిని ఎలా ఉపయోగించవచ్చో ఇక్కడ ఉంది:
// With variable
.alpha { color: $purple; }
// From the Sass map with our `color()` function
.beta { color: color("purple"); }రంగు వినియోగ తరగతులు సెట్టింగ్ colorమరియు background-color.
భవిష్యత్తులో, మేము దిగువన ఉన్న గ్రేస్కేల్ రంగులతో అందించిన విధంగా ప్రతి రంగు యొక్క షేడ్స్ కోసం Sass మ్యాప్‌లు మరియు వేరియబుల్‌లను అందించాలని లక్ష్యంగా పెట్టుకుంటాము.
థీమ్ రంగులు
scss/_variables.scssబూట్స్ట్రాప్ ఫైల్‌లో సాస్ వేరియబుల్స్ మరియు సాస్ మ్యాప్‌గా కూడా అందుబాటులో ఉండే రంగు స్కీమ్‌లను రూపొందించడానికి చిన్న రంగుల పాలెట్‌ను రూపొందించడానికి మేము అన్ని రంగుల ఉపసమితిని ఉపయోగిస్తాము .
గ్రేస్
గ్రే వేరియబుల్స్ యొక్క విస్తారమైన సెట్ మరియు scss/_variables.scssమీ ప్రాజెక్ట్ అంతటా స్థిరమైన గ్రే షేడ్స్ కోసం సాస్ మ్యాప్. ఇవి "కూల్ గ్రేస్" అని గమనించండి, ఇవి న్యూట్రల్ గ్రేస్ కాకుండా సూక్ష్మమైన నీలిరంగు టోన్ వైపు మొగ్గు చూపుతాయి.
లోపల scss/_variables.scss, మీరు బూట్స్ట్రాప్ యొక్క రంగు వేరియబుల్స్ మరియు సాస్ మ్యాప్‌లను కనుగొంటారు. $colorsసాస్ మ్యాప్ యొక్క ఉదాహరణ ఇక్కడ ఉంది :
$colors: (
"blue": $blue,
"indigo": $indigo,
"purple": $purple,
"pink": $pink,
"red": $red,
"orange": $orange,
"yellow": $yellow,
"green": $green,
"teal": $teal,
"cyan": $cyan,
"white": $white,
"gray": $gray-600,
"gray-dark": $gray-800
) !default;అనేక ఇతర భాగాలలో అవి ఎలా ఉపయోగించబడుతున్నాయో నవీకరించడానికి మ్యాప్‌లో విలువలను జోడించండి, తీసివేయండి లేదా సవరించండి. దురదృష్టవశాత్తు ఈ సమయంలో, ప్రతి భాగం ఈ సాస్ మ్యాప్‌ని ఉపయోగించదు. భవిష్యత్ నవీకరణలు దీన్ని మెరుగుపరచడానికి ప్రయత్నిస్తాయి. అప్పటి వరకు, ${color}వేరియబుల్స్ మరియు ఈ సాస్ మ్యాప్‌ని ఉపయోగించడం గురించి ప్లాన్ చేయండి.
భాగాలు
బూట్స్ట్రాప్ యొక్క అనేక భాగాలు మరియు యుటిలిటీలు @eachసాస్ మ్యాప్‌పై పునరావృతమయ్యే లూప్‌లతో నిర్మించబడ్డాయి. $theme-colorsమా ద్వారా ఒక కాంపోనెంట్ యొక్క వేరియంట్‌లను రూపొందించడానికి మరియు ప్రతి బ్రేక్‌పాయింట్‌కి ప్రతిస్పందించే వేరియంట్‌లను రూపొందించడానికి ఇది ప్రత్యేకంగా సహాయపడుతుంది . మీరు ఈ Sass మ్యాప్‌లను అనుకూలీకరించి, తిరిగి కంపైల్ చేస్తున్నప్పుడు, ఈ లూప్‌లలో మీ మార్పులు స్వయంచాలకంగా ప్రతిబింబించడాన్ని మీరు చూస్తారు.
సవరించేవారు
బూట్స్ట్రాప్ యొక్క అనేక భాగాలు బేస్-మాడిఫైయర్ క్లాస్ విధానంతో నిర్మించబడ్డాయి. దీనర్థం స్టైలింగ్‌లో ఎక్కువ భాగం బేస్ క్లాస్‌కు (ఉదా, .btn) కలిగి ఉంటుంది, అయితే స్టైల్ వైవిధ్యాలు మాడిఫ��యర్ క్లాస్‌లకు పరిమితం చేయబడ్డాయి (ఉదా, .btn-danger). $theme-colorsఈ మాడిఫైయర్ తరగతులు మా మాడిఫైయర్ తరగతుల సంఖ్య మరియు పేరును అనుకూలీకరించడానికి మ్యాప్ నుండి నిర్మించబడ్డాయి .
కాంపోనెంట్ మరియు మా అన్ని బ్యాక్‌గ్రౌండ్ యుటిలిటీలకు $theme-colorsమాడిఫైయర్‌లను రూపొందించడానికి మేము మ్యాప్‌పై ఎలా లూప్ చేస్తాము అనేదానికి ఇక్కడ రెండు ఉదాహరణలు ఉన్నాయి ..alert.bg-*
// Generate alert modifier classes
@each $color, $value in $theme-colors {
.alert-#{$color} {
@include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
}
}
// Generate `.bg-*` color utilities
@each $color, $value in $theme-colors {
@include bg-variant('.bg-#{$color}', $value);
}రెస్పాన్సివ్
ఈ సాస్ లూప్‌లు రంగు మ్యాప్‌లకు మాత్రమే పరిమితం కాలేదు. మీరు మీ భాగాలు లేదా యుటిలిటీల యొక్క ప్రతిస్పందించే వైవిధ్యాలను కూడా రూపొందించవచ్చు. ఉదాహరణకు మా ప్రతిస్పందించే టెక్స్ట్ అలైన్‌మెంట్ యుటిలిటీలను తీసుకోండి, ఇక్కడ మేము సాస్ మ్యాప్ @eachకోసం లూప్‌ను $grid-breakpointsమీడియా ప్రశ్నతో కలుపుతాము.
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
.text#{$infix}-left { text-align: left !important; }
.text#{$infix}-right { text-align: right !important; }
.text#{$infix}-center { text-align: center !important; }
}
}మీరు మీని సవరించవలసి వస్తే $grid-breakpoints, మీ మార్పులు ఆ మ్యాప్‌లో మళ్ళించే అన్ని లూప్‌లకు వర్తిస్తాయి.
CSS వేరియబుల్స్
బూట్స్ట్రాప్ 4 దాని సంకలనం చేయబడిన CSSలో దాదాపు రెండు డజన్ల CSS అనుకూల లక్షణాలను (వేరియబుల్స్) కలిగి ఉంది. ఇవి మీ బ్రౌజర్ ఇన్‌స్పెక్టర్, కోడ్ శాండ్‌బాక్స్ లేదా సాధారణ ప్రోటోటైపింగ్‌లో పని చేస్తున్నప్పుడు మా థీమ్ రంగులు, బ్రేక్‌పాయింట్‌లు మరియు ప్రాథమిక ఫాంట్ స్టాక్‌ల వంటి సాధారణంగా ఉపయోగించే విలువలకు సులభమైన యాక్సెస్‌ను అందిస్తాయి.
అందుబాటులో ఉన్న వేరియబుల్స్
ఇక్కడ మేము చేర్చే వేరియబుల్స్ ఉన్నాయి ( :rootఅవసరమని గమనించండి). అవి మా _root.scssఫైల్‌లో ఉన్నాయి.
:root {
--blue: #007bff;
--indigo: #6610f2;
--purple: #6f42c1;
--pink: #e83e8c;
--red: #dc3545;
--orange: #fd7e14;
--yellow: #ffc107;
--green: #28a745;
--teal: #20c997;
--cyan: #17a2b8;
--white: #fff;
--gray: #6c757d;
--gray-dark: #343a40;
--primary: #007bff;
--secondary: #6c757d;
--success: #28a745;
--info: #17a2b8;
--warning: #ffc107;
--danger: #dc3545;
--light: #f8f9fa;
--dark: #343a40;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}ఉదాహరణలు
CSS వేరియబుల్స్ Sass యొక్క వేరియబుల్స్‌కు సమానమైన సౌలభ్యాన్ని అందిస్తాయి, కానీ బ్రౌజర్‌కు అందించడానికి ముందు సంకలనం అవసరం లేకుండా. ఉదాహరణకు, ఇక్కడ మేము CSS వేరియబుల్స్‌తో మా పేజీ ఫాంట్ మరియు లింక్ స్టైల్‌లను రీసెట్ చేస్తున్నాము.
body {
font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
color: var(--blue);
}బ్రేక్ పాయింట్ వేరియబుల్స్
మేము వాస్తవానికి మా CSS వేరియబుల్స్‌లో బ్రేక్‌పాయింట్‌లను చేర్చినప్పటికీ (ఉదా, --breakpoint-md), మీడియా ప్రశ్నలలో వీటికి మద్దతు లేదు, కానీ అవి ఇప్పటికీ మీడియా ప్రశ్నలలో నియమావళిలో ఉపయోగించబడతాయి . ఈ బ్రేక్‌పాయింట్ వేరియబుల్స్ JavaScript ద్వారా ఉపయోగించబడే బ్యాక్‌వర్డ్ కంపాటబిలిటీ కోసం కంపైల్ చేయబడిన CSSలో ఉంటాయి. స్పెక్‌లో మరింత తెలుసుకోండి .
మద్దతు లేని వాటికి ఇక్కడ ఉదాహరణ ఉంది :
@media (min-width: var(--breakpoint-sm)) {
...
}మరియు మద్దతిచ్చే వాటికి ఇక్కడ ఉదాహరణ :
@media (min-width: 768px) {
.custom-element {
color: var(--primary);
}
}