பயன்பாட்டு API

பயன்பாட்டு API என்பது பயன்பாட்டு வகுப்புகளை உருவாக்குவதற்கான சாஸ் அடிப்படையிலான கருவியாகும்.

இந்தப் பக்கத்தில்

பூட்ஸ்டார்ப் பயன்பாடுகள் எங்கள் பயன்பாட்டு API உடன் உருவாக்கப்படுகின்றன, மேலும் சாஸ் வழியாக எங்களின் இயல்புநிலை பயன்பாட்டு வகுப்புகளை மாற்ற அல்லது நீட்டிக்க பயன்படுத்தலாம். எங்கள் பயன்பாட்டு API ஆனது, பல்வேறு விருப்பங்களுடன் வகுப்புகளின் குடும்பங்களை உருவாக்குவதற்கான தொடர்ச்சியான Sass வரைபடங்கள் மற்றும் செயல்பாடுகளை அடிப்படையாகக் கொண்டது. Sass வரைபடங்கள் உங்களுக்குத் தெரியாவிட்டால், தொடங்குவதற்கு அதிகாரப்பூர்வ Sass ஆவணத்தைப் படிக்கவும்.

வரைபடத்தில் எங்களின் $utilitiesஅனைத்து பயன்பாடுகளும் உள்ளன, பின்னர் உங்கள் தனிப்பயன் $utilitiesவரைபடத்துடன் இணைக்கப்படும். பயன்பாட்டு வரைபடத்தில் பின்வரும் விருப்பங்களை ஏற்றுக்கொள்ளும் பயன்பாட்டு குழுக்களின் முக்கிய பட்டியல் உள்ளது:

விருப்பம்	வகை	இயல்புநிலை மதிப்பு	விளக்கம்
`property`	தேவை	–	சொத்தின் பெயர், இது ஒரு சரம் அல்லது சரங்களின் வரிசையாக இருக்கலாம் (எ.கா., கிடைமட்ட திணிப்புகள் அல்லது விளிம்புகள்).
`values`	தேவை	–	மதிப்புகளின் பட்டியல் அல்லது வகுப்பின் பெயரும் மதிப்பும் ஒரே மாதிரியாக இருக்க விரும்பவில்லை எனில் வரைபடம். வரைபட விசையாகப் `null`பயன்படுத்தப்பட்டால், அது தொகுக்கப்படவில்லை.
`class`	விருப்பமானது	ஏதுமில்லை	உருவாக்கப்பட்ட வகுப்பின் பெயர். வழங்கப்படவில்லை மற்றும் `property`சரங்களின் வரிசையாக இருந்தால், அணிவரிசையின் `class`முதல் உறுப்புக்கு இயல்புநிலையாக இருக்கும் `property`.
`css-var`	விருப்பமானது	`false`	CSS விதிகளுக்குப் பதிலாக 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,
)

பட்டியல் அல்லது வரைபடத்தை அமைக்கும் ஒரு Sass மாறியாக, எங்கள் positionபயன்பாடுகளில் உள்ளது :

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; }

CSS மாறி பயன்பாடுகள்

css-varபூலியன் விருப்பத்தை அமைக்கவும், வழக்கமான விதிகளுக்குப் trueபதிலாக கொடுக்கப்பட்ட தேர்வாளருக்கான உள்ளூர் CSS மாறிகளை API உருவாக்கும் . எங்கள் பயன்பாடுகளைக் property: valueகவனியுங்கள் :.text-opacity-*

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

வெளியீடு:

.text-opacity-25 { --bs-text-opacity: .25; }
.text-opacity-50 { --bs-text-opacity: .5; }
.text-opacity-75 { --bs-text-opacity: .75; }
.text-opacity-100 { --bs-text-opacity: 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/utilities";

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

பயன்பாடுகளை மாற்றவும்

இயல்புநிலை $utilitiesவரைபடத்தில் இருக்கும் பயன்பாடுகள் map-getமற்றும் map-mergeசெயல்பாடுகளை மாற்றவும். widthகீழே உள்ள எடுத்துக்காட்டில், பயன்பாடுகளுக்கு கூடுதல் மதிப்பைச் சேர்க்கிறோம் . தொடக்கத்தில் தொடங்கி, map-mergeஎந்தப் பயன்பாட்டை நீங்கள் மாற்ற விரும்புகிறீர்கள் என்பதைக் குறிப்பிடவும். அங்கிருந்து, பயன்பாட்டின் விருப்பங்கள் மற்றும் மதிப்புகளை அணுகவும் மாற்றவும் உள்ளமை "width"வரைபடத்தைப் பெறவும்.map-get

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@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%),
        ),
      ),
    ),
  )
);

பதிலளிப்பதை இயக்கு

இயல்புநிலையாக தற்போது பதிலளிக்காத, ஏற்கனவே உள்ள பயன்பாடுகளின் தொகுப்பிற்கு நீங்கள் பதிலளிக்கக்கூடிய வகுப்புகளை இயக்கலாம். எடுத்துக்காட்டாக, borderவகுப்புகளை பதிலளிக்கக்கூடியதாக மாற்ற:

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

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

இது இப்போது ஒவ்வொரு பிரேக் பாயிண்டிற்கும் பதிலளிக்கக்கூடிய மாறுபாடுகளை .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 பயன்பாடுகள் காணவில்லையா அல்லது வேறு பெயரிடும் மாநாட்டில் பயன்படுத்தப்பட்டுள்ளதா? classகொடுக்கப்பட்ட பயன்பாட்டின் விளைவை மேலெழுதுவதற்கு ஏபிஐ பயன்பாடுகள் பயன்படுத்தப்படலாம் - எடுத்துக்காட்டாக, .ms-*பயன்பாடுகளை பழையதாக மறுபெயரிட .ml-*:

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

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

பயன்பாடுகளை அகற்று

குழு விசையை அமைப்பதன் மூலம் இயல்புநிலை பயன்பாடுகளில் ஏதேனும் ஒன்றை அகற்றவும் null. எடுத்துக்காட்டாக, எங்களின் அனைத்துப் widthபயன்பாடுகளையும் அகற்ற, ஒரு ஐ உருவாக்கி உள்ளே $utilities map-mergeசேர்க்கவும் "width": null.

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

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

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கட்டுப்பாட்டு உத்தரவுக்கு நன்றி .