މައިގަނޑު ކޮންޓެންޓަށް ސްކިޕް ކުރާށެވެ ޑޮކްސް ނެވިގޭޝަނަށް ސްކިޕް ކުރާށެވެ
Check
in English

ޔުޓިލިޓީ އެޕީއައި އެވެ

ޔުޓިލިޓީ އެޕީއައި އަކީ ޔުޓިލިޓީ ކްލާސްތައް އުފެއްދުމަށް ސާސް އަށް ބިނާކޮށް އުފައްދާފައިވާ ޓޫލެކެވެ.

މި ޞަފްޙާގައެވެ

ބޫޓްސްޓްރެޕް ޔުޓިލިޓީސް އުފައްދާފައިވަނީ އަޅުގަނޑުމެންގެ ޔުޓިލިޓީ އެޕީއައި އިން ކަމަށާއި، ސާސް މެދުވެރިކޮށް އަޅުގަނޑުމެންގެ ޑިފޯލްޓް ސެޓްގެ ޔުޓިލިޓީ ކްލާސްތައް ބަދަލުކުރުމަށް ނުވަތަ ދިގުކުރުމަށް ބޭނުންކުރެވިދާނެ ކަމަށެވެ. އަޅުގަނޑުމެންގެ ޔުޓިލިޓީ އެޕީއައި ބިނާވެފައިވަނީ ތަފާތު އޮޕްޝަންތަކާއެކު ކްލާސްތަކުގެ އާއިލާތައް އުފެއްދުމަށްޓަކައި ސާސް މެޕްތަކާއި ފަންކްޝަންތަކުގެ ސިލްސިލާއެއްގެ މައްޗަށެވެ. ސާސް މެޕްތަކަށް އަހުލުވެރި ނުވާނަމަ، ސާސްގެ ރަސްމީ ޑޮކްސް އަށް ކިޔައިގެން ފަށަން ޖެހެ އެވެ.

މި $utilitiesމެޕްގައި އަޅުގަނޑުމެންގެ ހުރިހާ ޔުޓިލިޓީސްއެއް ހިމެނޭއިރު، ފަހުން ތިޔަބޭފުޅުންގެ ކަސްޓަމް $utilitiesމެޕާ އެއްކޮށްލާނީ، އެތަނުގައި ހުރިނަމައެވެ. ޔުޓިލިޓީ މެޕްގައި ތިރީގައިވާ ގޮތްތައް ބަލައިގަންނަ ޔުޓިލިޓީ ގްރޫޕްތަކުގެ ކީޑް ލިސްޓެއް ހިމެނެއެވެ.

ގޮތް ވައްތަރު ޑިފޯލްޓް ވެލިއު ތަފްޞީލު
property ބޭނުންވާ – ޕްރޮޕަޓީގެ ނަން، މިއީ ސްޓްރިންގް ނުވަތަ ސްޓްރިންގްސްގެ އެރޭއަކަށް ވެދާނެ (އެބަހީ، ހޮރައިޒޮންޓަލް ޕެޑިންގސް ނުވަތަ މާރޖިންސް) އެވެ.
values ބޭނުންވާ – އަގުތަކުގެ ލިސްޓް، ނުވަތަ ކްލާސް ނަމާއި އަގު އެއްގޮތްވާން ބޭނުން ނުވާނަމަ މެޕެއް. nullމެޕް ކީގެ ގޮތުގައި ބޭނުންކުރާނަމަ، ކްލާސް classނަމަށް ޕްރީޕެންޑް ނުކުރެވެއެވެ.
class އިޚްތިޔާރީ null އެވެ ޖެނެރޭޓް ކުރެވޭ ކްލާހުގެ ނަން. ފޯރުކޮށްދީފައި ނުވާނަމަ އަދި propertyސްޓްރިންގްތަކުގެ އެރޭއެއްނަމަ، އެރޭގެ classފުރަތަމަ އެލިމެންޓަށް ޑިފޯލްޓް ވާނެއެވެ property. ފޯރުކޮށްދީފައި ނުވާނަމަ އަދި propertyސްޓްރިންގް އެއްނަމަ values، ނަންތަކަށް ބޭނުންކުރަނީ classކީތަކެވެ.
css-var އިޚްތިޔާރީ false ސީއެސްއެސް އުސޫލުތަކުގެ ބަދަލުގައި ސީއެސްއެސް ވެރިއޭބަލްތައް އުފެއްދުމަށް ބޫލިއަން.
css-variable-name އިޚްތިޔާރީ null އެވެ ރޫލްސެޓްގެ ތެރޭގައިވާ ސީއެސްއެސް ވެރިއޭބަލްއަށް ކަސްޓަމް އަން-ޕްރިފިކްސްޑް ނަމެވެ.
local-vars އިޚްތިޔާރީ null އެވެ ސީއެސްއެސް އުސޫލުތަކުގެ އިތުރުން ޖެނެރޭޓް ކުރަންޖެހޭ ލޯކަލް ސީއެސްއެސް ވެރިއޭބަލްތަކުގެ މެޕް.
state އިޚްތިޔާރީ null އެވެ އުފައްދަން ބޭނުންވާ ސޫޑޯ ކްލާސް ވައްތަރުތަކުގެ ލިސްޓް (އެބަހީ، :hoverނުވަތަ :focus).
responsive އިޚްތިޔާރީ false ރެސްޕޮންސިވް ކްލާސްތައް ޖެނެރޭޓް ކުރަންވީތޯ ދައްކުވައިދޭ ބޫލިއަން.
rfs އިޚްތިޔާރީ false އާރުއެފްއެސް އާއި އެކު ފްލޫޑް ރީސްކޭލިންގ ކުރެވޭނެ ގޮތް ހެދުމަށް ބޫލިއަން .
print އިޚްތިޔާރީ false ޕްރިންޓް ކްލާސްތައް ޖެނެރޭޓް ކުރަން ޖެހޭތޯ ދައްކާ ބޫލިއަން.
rtl އިޚްތިޔާރީ true ޔުޓިލިޓީ އާރުޓީއެލްގައި ބަހައްޓަންވީތޯ ދައްކާ ބޫލިއަން.

އެޕީއައި އިން ކިޔައިދިނެވެ

$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ކީ ސެޓް ކުރަން ޖެހޭއިރު، އޭގައި ސައްހަ ސީއެސްއެސް ޕްރޮޕަޓީއެއް ހިމެނިފައި އޮންނަން ޖެހެއެވެ. މި ޕްރޮޕަޓީ ބޭނުންކުރަނީ ޖެނެރޭޓް ކުރެވިފައިވާ ޔުޓިލިޓީގެ ރޫލްސެޓްގައެވެ. ކީ 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އަޅުގަނޑުމެންގެ ޔުޓިލިޓީސްގައިވާ ފަދައިން، ލިސްޓް ނުވަތަ މެޕް ސެޓްކުރާ ސާސް ވެރިއޭބަލްއެއްގެ ގޮތުގައި :

values: $position-values

ކްލާސް

classކޮމްޕައިލް ކުރެވިފައިވާ ސީއެސްއެސްގައި ބޭނުންކުރާ ކްލާސް ޕްރިފިކްސް ބަދަލުކުރުމަށް އޮޕްޝަން ބޭނުންކުރާށެވެ . މިސާލަކަށް އިން އަށް ބަދަލު .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; }

If class: null, ކޮންމެ ކީއަކަށް ކްލާސްތައް އުފައްދައެވެ values:

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

އައުޓްޕުޓް:

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

ސީއެސްއެސް ވެރިއޭބަލް ޔުޓިލިޓީސް

css-varބޫލިއަން އޮޕްޝަން އަށް ސެޓްކޮށްލުމުން އެޕީއައި އިން އާންމު އުސޫލުތަކުގެ trueބަދަލުގައި ދީފައިވާ ސެލެކްޓަރަށް ލޯކަލް ސީއެސްއެސް ވެރިއޭބަލްތައް އުފައްދާނެއެވެ . ކްލާސް ނަމަށްވުރެ ތަފާތު ސީއެސްއެސް ވެރިއޭބަލް ނަމެއް ސެޓް property: valueކުރުމަށް އިޚްތިޔާރީ އެއް އިތުރުކުރުން .css-variable-name

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

ލޯކަލް ސީއެސްއެސް ވެރިއޭބަލްސް

local-varsޔުޓިލިޓީ ކްލާސްގެ ރޫލްސެޓްގެ ތެރޭގައި ލޯކަލް ސީއެސްއެސް ވެރިއޭބަލްތައް އުފައްދާނެ ސާސް މެޕެއް ކަނޑައެޅުމަށް އިޚްތިޔާރު ބޭނުންކުރާށެވެ . ޖެނެރޭޓް ކުރެވޭ ސީއެސްއެސް އުސޫލުތަކުގައި އެ ލޯކަލް ސީއެސްއެސް ވެރިއޭބަލްތައް ކޮންސިއުމް ކުރުމަށް އިތުރު މަސައްކަތްތަކެއް ކުރަން ޖެހިދާނެކަން ފާހަގަކުރަމެވެ. މިސާލަކަށް އަޅުގަނޑުމެންގެ .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. ސްޓޭޓްތަކުގެ ލިސްޓެއް ފޯރުކޮށްދިނުމުން، އެ ސޫޑޯ ކްލާހަށް ކްލާސް ނަންތައް އުފައްދައެވެ. މިސާލަކަށް ހޯވަރގައި އޮޕަސިޓީ ބަދަލުކުރުމަށްޓަކައި އެޑް ކޮށްލުމުން 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; }
}

މުހިންމުކަން

އެޕީއައި އިން އުފައްދާ ހުރިހާ ޔުޓިލިޓީތަކެއްގައި ހިމެނެނީ !importantއެމީހުން ގަސްތުކުރާ ގޮތަށް ކޮމްޕޯނެންޓްތަކާއި މޮޑިފައިއަރ ކްލާސްތައް އޯވަރރައިޑް ކުރާކަން ޔަގީންކުރުމަށެވެ. މި ސެޓިންގ ގްލޯބަލްކޮށް ޓޮގްލް ކުރެވޭނީ $enable-important-utilitiesވެރިއޭބަލް (ޑިފޯލްޓް ކޮށްގެން true) އިންނެވެ.

އެޕީއައި ބޭނުންކޮށްގެންނެވެ

މިހާރު ޔުޓިލިޓީސް އެޕީއައި މަސައްކަތްކުރާ ގޮތަށް އަހުލުވެރިވެފައިވާތީ، އަމިއްލައަށް ކަސްޓަމް ކްލާސްތައް އިތުރުކޮށް އަޅުގަނޑުމެންގެ ޑިފޯލްޓް ޔުޓިލިޓީސް ބަދަލުކުރާނެ ގޮތް ދަސްކޮށްލާށެވެ.

ޔުޓިލިޓީސް އޯވަރރައިޑް ކުރުން

އެއް ކީ ބޭނުންކޮށްގެން މިހާރު ހުރި ޔުޓިލިޓީތައް އޯވަރރައިޑް ކުރުން. މިސާލަކަށް، އިތުރު ރެސްޕޮންސިވް އޯވަރފްލޯ ޔުޓިލިޓީ ކްލާސްތައް ބޭނުންނަމަ، މިކަން ކުރެވިދާނެއެވެ:

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

ޔުޓިލިޓީސް އިތުރުކުރުން

$utilitiesއާ ޔުޓިލިޓީސް ޑިފޯލްޓް މެޕަށް އިތުރުކުރެވޭނީ އެއް map-merge. _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-getmap-mergewidthmap-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ކޮންމެ ބްރޭކްޕޮއިންޓަކަށް ރެސްޕޮންސިވް ވެރިއޭޝަންތައް އުފެދޭނެ ކަމެކެވެ. ތިބާ އުފައްދާ ސީއެސްއެސް ހުންނާނީ މިގޮތަށެވެ:

.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/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()ސާސް ފަންކްޝަން އިން ޑިފޯލްޓް ޔުޓިލިޓީތަކުގެ ތެރެއިން އެއްވެސް ޔުޓިލިޓީއެއް ނައްތާލާށެވެ .

@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()ސާސް ފަންކްޝަން އިން އެއްފަހަރާ ގިނަ ޔުޓިލިޓީސްތައް އިތުރުކޮށް، ނައްތާލައި، ބަދަލުކުރެވޭނެއެވެ . މިއީ ކުރީގެ މިސާލުތައް އެއްކޮށްލައިގެން އެއް ބޮޑު މެޕެކެވެ.

@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އޮޕްޝަން އަށް ސެޓްކޮށްގެން 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 */

މިއީ އާރްޓީއެލްގައި އެއްވެސް އެއްޗެއް އައުޓްޕުޓް ނުކުރާ ކަމެއް، އާރްޓީއެލްސީއެސްއެސް ކޮންޓްރޯލް removeޑިރެކްޓިވް ގެ ސަބަބުން .