యుటిలిటీ API

యుటిలిటీ API అనేది యుటిలిటీ క్లాస్‌లను రూపొందించడానికి సాస్-ఆధారిత సాధనం.

ఈ పేజీలో

బూట్‌స్ట్రాప్ యుటిలిటీలు మా యుటిలిటీ APIతో రూపొందించబడ్డాయి మరియు సాస్ ద్వారా మా డిఫాల్ట్ యుటిలిటీ క్లాస్‌లను సవరించడానికి లేదా విస్తరించడానికి ఉపయోగించవచ్చు. మా యుటిలిటీ API వివిధ ఎంపికలతో తరగతుల కుటుంబాలను రూపొందించడానికి సాస్ మ్యాప్‌లు మరియు ఫంక్షన్‌ల శ్రేణిపై ఆధారపడి ఉంటుంది. మీకు Sass మ్యాప్‌లు తెలియకుంటే, ప్రారంభించడానికి అధికారిక Sass డాక్స్‌లో చదవండి .

మ్యాప్ మా అన్ని యుటిలిటీలను కలిగి ఉంది మరియు తర్వాత మీ అనుకూల మ్యాప్‌తో $utilitiesవిలీనం చేయబడుతుంది . $utilitiesయుటిలిటీ మ్యాప్ క్రింది ఎంపికలను ఆమోదించే యుటిలిటీ సమూహాల యొక్క కీడ్ జాబితాను కలిగి ఉంది:

ఎంపిక	టైప్ చేయండి	డిఫాల్ట్ విలువ	వివరణ
`property`	అవసరం	–	ఆస్తి పేరు, ఇది స్ట్రింగ్ లేదా స్ట్రింగ్‌ల శ్రేణి కావచ్చు (ఉదా, క్షితిజ సమాంతర ప్యాడింగ్‌లు లేదా అంచులు).
`values`	అవసరం	–	విలువల జాబితా లేదా తరగతి పేరు విలువతో సమానంగా ఉండకూడదనుకుంటే మ్యాప్. `null`మ్యాప్ కీగా ఉపయోగించబడితే, తరగతి `class`పేరుకు ముందుగా పెట్టబడదు.
`class`	ఐచ్ఛికం	శూన్య	రూపొందించబడిన తరగతి పేరు. అందించబడకపోతే మరియు `property`స్ట్రింగ్‌ల శ్రేణి అయితే, శ్రేణి యొక్క `class`మొదటి మూలకానికి డిఫాల్ట్ అవుతుంది `property`. అందించబడకపోతే మరియు `property`స్ట్రింగ్ అయితే, పేర్ల `values`కోసం కీలు ఉపయోగించబడతాయి .`class`
`css-var`	ఐచ్ఛికం	`false`	CSS నియమాలకు బదులుగా CSS వేరియబుల్‌లను రూపొందించడానికి బూలియన్.
`css-variable-name`	ఐచ్ఛికం	శూన్య	నియమావళి లోపల CSS వేరియబుల్ కోసం కస్టమ్ అన్-ప్రిఫిక్స్డ్ పేరు.
`local-vars`	ఐచ్ఛికం	శూన్య	CSS నియమాలకు అదనంగా రూపొందించడానికి స్థానిక CSS వేరియబుల్స్ యొక్క మ్యాప్.
`state`	ఐచ్ఛికం	శూన్య	ఉత్పత్తి చేయడానికి సూడో-క్లాస్ వేరియంట్‌ల జాబితా (ఉదా, `:hover`లేదా `:focus`).
`responsive`	ఐచ్ఛికం	`false`	ప్రతిస్పందించే తరగతులను రూపొందించాలా వద్దా అని బూలియన్ సూచిస్తుంది.
`rfs`	ఐచ్ఛికం	`false`	RFSతో ఫ్లూయిడ్ రీస్కేలింగ్‌ని ప్రారంభించడానికి బూలియన్ .
`print`	ఐచ్ఛికం	`false`	ప్రింట్ క్లాస్‌లను రూపొందించాల్సిన అవసరం ఉందో లేదో బూలియన్ సూచిస్తుంది.
`rtl`	ఐచ్ఛికం	`true`	యుటిలిటీని RTLలో ఉంచాలా వద్దా అని బూలియన్ సూచిస్తుంది.

API వివరించింది

$utilitiesఅన్ని యుటిలిటీ వేరియబుల్స్ మా _utilities.scssస్టైల్‌షీట్‌లోని వేరియబుల్‌కు జోడించబడతాయి . యుటిలిటీల యొక్క ప్రతి సమూహం ఇలా కనిపిస్తుంది:

$utilities: (
  "opacity": (
    property: opacity,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

కింది వాటిని ఏది అవుట్‌పుట్ చేస్తుంది:

.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }

ఆస్తి

ఏదైనా యుటిలిటీ కోసం అవసరమైన propertyకీ తప్పనిసరిగా సెట్ చేయబడాలి మరియు అది తప్పనిసరిగా చెల్లుబాటు అయ్యే CSS ప్రాపర్టీని కలిగి ఉండాలి. ఈ ప్రాపర్టీ ఉత్పత్తి చేయబడిన యుటిలిటీ నియమావళిలో ఉపయోగించబడుతుంది. కీ తొలగించబడినప్పుడు class, అది డిఫాల్ట్ తరగతి పేరుగా కూడా పనిచేస్తుంది. text-decorationయుటిలిటీని పరిగణించండి :

$utilities: (
  "text-decoration": (
    property: text-decoration,
    values: none underline line-through
  )
);

అవుట్‌పుట్:

.text-decoration-none { text-decoration: none !important; }
.text-decoration-underline { text-decoration: underline !important; }
.text-decoration-line-through { text-decoration: line-through !important; }

విలువలు

రూపొందించబడిన తరగతి పేర్లు మరియు నియమాలలో పేర్కొన్న వాటి కోసం ఏ విలువలు ఉపయోగించాలో valuesపేర్కొనడానికి కీని ఉపయోగించండి. propertyజాబితా లేదా మ్యాప్ కావచ్చు (యుటిలిటీస్‌లో లేదా సాస్ వేరియబుల్‌లో సెట్ చేయబడింది).

జాబితాగా, text-decorationయుటిలిటీల వలె :

values: none underline line-through

మ్యాప్‌గా, opacityయుటిలిటీల వలె :

values: (
  0: 0,
  25: .25,
  50: .5,
  75: .75,
  100: 1,
)

positionమా యుటిలిటీలలో వలె జాబితా లేదా మ్యాప్‌ను సెట్ చేసే Sass వేరియబుల్‌గా :

values: $position-values

తరగతి

classకంపైల్ చేయబడిన CSSలో ఉపయోగించిన తరగతి ఉపసర్గను మార్చడానికి ఎంపికను ఉపయోగించండి . ఉదాహరణకు, దీని నుండి .opacity-*మార్చడానికి .o-*:

$utilities: (
  "opacity": (
    property: opacity,
    class: o,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

అవుట్‌పుట్:

.o-0 { opacity: 0 !important; }
.o-25 { opacity: .25 !important; }
.o-50 { opacity: .5 !important; }
.o-75 { opacity: .75 !important; }
.o-100 { opacity: 1 !important; }

, ప్రతి కీలకు class: nullతరగతులను రూపొందిస్తే :values

$utilities: (
  "visibility": (
    property: visibility,
    class: null,
    values: (
      visible: visible,
      invisible: hidden,
    )
  )
);

అవుట్‌పుట్:

.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }

CSS వేరియబుల్ యుటిలిటీస్

css-varబూలియన్ ఎంపికను సెట్ చేయండి trueమరియు API సాధారణ property: valueనియమాలకు బదులుగా ఇచ్చిన ఎంపిక కోసం స్థానిక CSS వేరియబుల్‌లను ఉత్పత్తి చేస్తుంది. css-variable-nameతరగతి పేరు కాకుండా వేరే CSS వేరియబుల్ పేరును సెట్ చేయడానికి ఐచ్ఛికాన్ని జోడించండి .

మా .text-opacity-*యుటిలిటీలను పరిగణించండి. మేము ఎంపికను జోడిస్తే css-variable-name, మేము అనుకూల అవుట్‌పుట్‌ని పొందుతాము.

$utilities: (
  "text-opacity": (
    css-var: true,
    css-variable-name: text-alpha,
    class: text-opacity,
    values: (
      25: .25,
      50: .5,
      75: .75,
      100: 1
    )
  ),
);

అవుట్‌పుట్:

.text-opacity-25 { --bs-text-alpha: .25; }
.text-opacity-50 { --bs-text-alpha: .5; }
.text-opacity-75 { --bs-text-alpha: .75; }
.text-opacity-100 { --bs-text-alpha: 1; }

స్థానిక CSS వేరియబుల్స్

local-varsయుటిలిటీ క్లాస్ రూల్‌సెట్‌లో స్థానిక CSS వేరియబుల్‌లను రూపొందించే సాస్ మ్యాప్‌ను పేర్కొనడానికి ఎంపికను ఉపయోగించండి . రూపొందించబడిన CSS నియమాలలో ఆ స్థానిక CSS వేరియబుల్‌లను వినియోగించడానికి అదనపు పని అవసరమని దయచేసి గమనించండి. ఉదాహరణకు, మా .bg-*యుటిలిటీలను పరిగణించండి:

$utilities: (
  "background-color": (
    property: background-color,
    class: bg,
    local-vars: (
      "bg-opacity": 1
    ),
    values: map-merge(
      $utilities-bg-colors,
      (
        "transparent": transparent
      )
    )
  )
);

అవుట్‌పుట్:

.bg-primary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
}

రాష్ట్రాలు

stateనకిలీ-తరగతి వైవిధ్యాలను రూపొందించడానికి ఎంపికను ఉపయోగించండి . ఉదాహరణ సూడో-తరగతులు :hoverమరియు :focus. రాష్ట్రాల జాబితా అందించబడినప్పుడు, ఆ నకిలీ తరగతికి తరగతి పేర్లు సృష్టించబడతాయి. ఉదాహరణకు, హోవర్‌లో అస్పష్టతను మార్చడానికి, జోడించండి మరియు మీరు మీ కంపైల్ చేసిన CSSలో state: hoverపొందుతారు ..opacity-hover:hover

బహుళ నకిలీ తరగతులు కావాలా? స్థలం-వేరు చేయబడిన రాష్ట్రాల జాబితాను ఉపయోగించండి: state: hover focus.

$utilities: (
  "opacity": (
    property: opacity,
    class: opacity,
    state: hover,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

అవుట్‌పుట్:

.opacity-0-hover:hover { opacity: 0 !important; }
.opacity-25-hover:hover { opacity: .25 !important; }
.opacity-50-hover:hover { opacity: .5 !important; }
.opacity-75-hover:hover { opacity: .75 !important; }
.opacity-100-hover:hover { opacity: 1 !important; }

రెస్పాన్సివ్

అన్ని బ్రేక్‌పాయింట్‌లలోresponsive ప్రతిస్పందించే యుటిలిటీలను (ఉదా, .opacity-md-25) రూపొందించడానికి బూలియన్‌ని జోడించండి .

$utilities: (
  "opacity": (
    property: opacity,
    responsive: true,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

అవుట్‌పుట్:

.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: .25 !important; }
.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }
.opacity-100 { opacity: 1 !important; }

@media (min-width: 576px) {
  .opacity-sm-0 { opacity: 0 !important; }
  .opacity-sm-25 { opacity: .25 !important; }
  .opacity-sm-50 { opacity: .5 !important; }
  .opacity-sm-75 { opacity: .75 !important; }
  .opacity-sm-100 { opacity: 1 !important; }
}

@media (min-width: 768px) {
  .opacity-md-0 { opacity: 0 !important; }
  .opacity-md-25 { opacity: .25 !important; }
  .opacity-md-50 { opacity: .5 !important; }
  .opacity-md-75 { opacity: .75 !important; }
  .opacity-md-100 { opacity: 1 !important; }
}

@media (min-width: 992px) {
  .opacity-lg-0 { opacity: 0 !important; }
  .opacity-lg-25 { opacity: .25 !important; }
  .opacity-lg-50 { opacity: .5 !important; }
  .opacity-lg-75 { opacity: .75 !important; }
  .opacity-lg-100 { opacity: 1 !important; }
}

@media (min-width: 1200px) {
  .opacity-xl-0 { opacity: 0 !important; }
  .opacity-xl-25 { opacity: .25 !important; }
  .opacity-xl-50 { opacity: .5 !important; }
  .opacity-xl-75 { opacity: .75 !important; }
  .opacity-xl-100 { opacity: 1 !important; }
}

@media (min-width: 1400px) {
  .opacity-xxl-0 { opacity: 0 !important; }
  .opacity-xxl-25 { opacity: .25 !important; }
  .opacity-xxl-50 { opacity: .5 !important; }
  .opacity-xxl-75 { opacity: .75 !important; }
  .opacity-xxl-100 { opacity: 1 !important; }
}

ముద్రణ

printఎంపికను ప్రారంభించడం వలన ప్రింట్ కోసం యుటిలిటీ తరగతులు కూడా ఉత్పత్తి చేయబడతాయి, ఇవి @media print { ... }మీడియా ప్రశ్నలో మాత్రమే వర్తించబడతాయి.

$utilities: (
  "opacity": (
    property: opacity,
    print: true,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

అవుట్‌పుట్:

.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: .25 !important; }
.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }
.opacity-100 { opacity: 1 !important; }

@media print {
  .opacity-print-0 { opacity: 0 !important; }
  .opacity-print-25 { opacity: .25 !important; }
  .opacity-print-50 { opacity: .5 !important; }
  .opacity-print-75 { opacity: .75 !important; }
  .opacity-print-100 { opacity: 1 !important; }
}

ప్రాముఖ్యత

API ద్వారా రూపొందించబడిన అన్ని యుటిలిటీలు !importantఉద్దేశించిన విధంగా కాంపోనెంట్‌లు మరియు మాడిఫైయర్ క్లాస్‌లను ఓవర్‌రైడ్ చేస్తున్నాయని నిర్ధారించుకోవడం. మీరు ఈ సెట్టింగ్‌ని $enable-important-utilitiesవేరియబుల్‌తో ప్రపంచవ్యాప్తంగా టోగుల్ చేయవచ్చు (డిఫాల్ట్‌గా కు true).

APIని ఉపయోగించడం

యుటిలిటీస్ API ఎలా పనిచేస్తుందో ఇప్పుడు మీకు బాగా తెలుసు, మీ స్వంత అనుకూల తరగతులను ఎలా జోడించాలో మరియు మా డిఫాల్ట్ యుటిలిటీలను ఎలా సవరించాలో తెలుసుకోండి.

యుటిలిటీలను భర్తీ చేయండి

అదే కీని ఉపయోగించడం ద్వారా ఇప్పటికే ఉన్న యుటిలిటీలను భర్తీ చేయండి. ఉదాహరణకు, మీకు అదనపు రెస్పాన్సివ్ ఓవర్‌ఫ్లో యుటిలిటీ క్లాసులు కావాలంటే, మీరు ఇలా చేయవచ్చు:

$utilities: (
  "overflow": (
    responsive: true,
    property: overflow,
    values: visible hidden scroll auto,
  ),
);

యుటిలిటీలను జోడించండి

$utilitiesఒక తో డిఫాల్ట్ మ్యాప్‌కి కొత్త యుటిలిటీలను జోడించవచ్చు map-merge. మా అవసరమైన Sass ఫైల్‌లు _utilities.scssముందుగా దిగుమతి చేసుకున్నాయని నిర్ధారించుకోండి, ఆపై map-mergeమీ అదనపు యుటిలిటీలను జోడించడానికి ఉపయోగించండి. ఉదాహరణకు, cursorమూడు విలువలతో ప్రతిస్పందించే యుటిలిటీని ఎలా జోడించాలో ఇక్కడ ఉంది.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "cursor": (
      property: cursor,
      class: cursor,
      responsive: true,
      values: auto pointer grab,
    )
  )
);

@import "bootstrap/scss/utilities/api";

యుటిలిటీలను సవరించండి

$utilitiesడిఫాల్ట్ మ్యాప్‌లో map-getమరియు map-mergeఫంక్షన్‌లతో ఇప్పటికే ఉన్న యుటిలిటీలను సవరించండి . దిగువ ఉదాహరణలో, మేము widthయుటిలిటీలకు అదనపు విలువను జోడిస్తున్నాము. ప్రారంభంలో ప్రారంభించి map-merge, ఆపై మీరు ఏ యుటిలిటీని సవరించాలనుకుంటున్నారో పేర్కొనండి. అక్కడ నుండి, యుటిలిటీ ఎంపికలు మరియు విలువలను యాక్సెస్ చేయడానికి మరియు సవరించడానికి సమూహ "width"మ్యాప్‌ని పొందండి.map-get

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "width": map-merge(
      map-get($utilities, "width"),
      (
        values: map-merge(
          map-get(map-get($utilities, "width"), "values"),
          (10: 10%),
        ),
      ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

ప్రతిస్పందనను ప్రారంభించండి

మీరు ప్రస్తుతం డిఫాల్ట్‌గా స్పందించని యుటిలిటీల సెట్ కోసం ప్రతిస్పందించే తరగతులను ప్రారంభించవచ్చు. ఉదాహరణకు, borderతరగతులను ప్రతిస్పందించేలా చేయడానికి:

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities, (
    "border": map-merge(
      map-get($utilities, "border"),
      ( responsive: true ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

ఇది ఇప్పుడు ప్రతి బ్రేక్‌పాయింట్‌కు .borderమరియు ప్రతిస్పందించే వైవిధ్యాలను సృష్టిస్తుంది. .border-0మీరు రూపొందించిన CSS ఇలా కనిపిస్తుంది:

.border { ... }
.border-0 { ... }

@media (min-width: 576px) {
  .border-sm { ... }
  .border-sm-0 { ... }
}

@media (min-width: 768px) {
  .border-md { ... }
  .border-md-0 { ... }
}

@media (min-width: 992px) {
  .border-lg { ... }
  .border-lg-0 { ... }
}

@media (min-width: 1200px) {
  .border-xl { ... }
  .border-xl-0 { ... }
}

@media (min-width: 1400px) {
  .border-xxl { ... }
  .border-xxl-0 { ... }
}

యుటిలిటీస్ పేరు మార్చండి

v4 యుటిలిటీలను కోల్పోయారా లేదా మరొక పేరు పెట్టే విధానాన్ని ఉపయోగించారా? యుటిలిటీస్ API అనేది ఇచ్చిన యుటిలిటీ యొక్క ఫలితాన్ని భర్తీ చేయడానికి ఉపయోగించబడుతుంది class-ఉదాహరణకు, .ms-*యుటిలిటీలను పాతదిగా మార్చడానికి .ml-*:

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities, (
    "margin-start": map-merge(
      map-get($utilities, "margin-start"),
      ( class: ml ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

యుటిలిటీలను తీసివేయండి

map-remove()Sass ఫంక్షన్‌తో ఏదైనా డిఫాల్ట్ యుటిలిటీలను తీసివేయండి .

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

// Remove multiple utilities with a comma-separated list
$utilities: map-remove($utilities, "width", "float");

@import "bootstrap/scss/utilities/api";

మీరు map-merge()సాస్ ఫంక్షన్‌నిnull కూడా ఉపయోగించవచ్చు మరియు యుటిలిటీని తీసివేయడానికి గ్రూప్ కీని సెట్ చేయవచ్చు.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "width": null
  )
);

@import "bootstrap/scss/utilities/api";

జోడించండి, తీసివేయండి, సవరించండి

map-merge()మీరు Sass ఫంక్షన్‌తో ఒకేసారి అనేక యుటిలిటీలను జోడించవచ్చు, తీసివేయవచ్చు మరియు సవరించవచ్చు . మీరు మునుపటి ఉదాహరణలను ఒక పెద్ద మ్యాప్‌లో ఎలా కలపవచ్చో ఇక్కడ ఉంది.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    // Remove the `width` utility
    "width": null,

    // Make an existing utility responsive
    "border": map-merge(
      map-get($utilities, "border"),
      ( responsive: true ),
    ),

    // Add new utilities
    "cursor": (
      property: cursor,
      class: cursor,
      responsive: true,
      values: auto pointer grab,
    )
  )
);

@import "bootstrap/scss/utilities/api";

RTLలో యుటిలిటీని తీసివేయండి

అరబిక్‌లో లైన్ బ్రేక్‌లు వంటి కొన్ని అంచు కేసులు RTL స్టైలింగ్‌ను కష్టతరం చేస్తాయి. rtlఈ విధంగా ఎంపికను సెట్ చేయడం ద్వారా RTL అవుట్‌పుట్ నుండి యుటిలిటీలను తొలగించవచ్చు false:

$utilities: (
  "word-wrap": (
    property: word-wrap word-break,
    class: text,
    values: (break: break-word),
    rtl: false
  ),
);

అవుట్‌పుట్:

/* rtl:begin:remove */
.text-break {
  word-wrap: break-word !important;
  word-break: break-word !important;
}
/* rtl:end:remove */

ఇది RTLలో దేనినీ అవుట్‌పుట్ చేయదు, RTLCSS removeనియంత్రణ ఆదేశానికి ధన్యవాదాలు .