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

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

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

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

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

ގޮތް ވައްތަރު ތަފްޞީލު
property ބޭނުންވާ ޕްރޮޕަޓީގެ ނަން، މިއީ ސްޓްރިންގް ނުވަތަ ސްޓްރިންގްސްގެ އެރޭއަކަށް ވެދާނެ (އެބަހީ، ހޮރައިޒޮންޓަލް ޕެޑިންގސް ނުވަތަ މާރޖިންސް) އެވެ.
values ބޭނުންވާ އަގުތަކުގެ ލިސްޓް، ނުވަތަ ކްލާސް ނަމާއި އަގު އެއްގޮތްވާން ބޭނުން ނުވާނަމަ މެޕެއް. nullމެޕް ކީގެ ގޮތުގައި ބޭނުންކުރާނަމަ، އެއީ ކޮމްޕައިލް ނުކުރެވޭނެ އެއްޗެކެވެ .
class އިޚްތިޔާރީ ޕްރޮޕަޓީއާ އެއްގޮތަކަށް ވާކަށް ބޭނުން ނުވާނަމަ ކްލާސް ނަމަށް ވެރިއޭބަލް. ކީ ނުލިބިއްޖެނަމަ classއަދި propertyކީ އަކީ ސްޓްރިންގްސްގެ އެރޭއެއް ކަމުގައި ވާނަމަ، ކްލާސް ނަމަކީ propertyއެރޭގެ ފުރަތަމަ އެލިމެންޓަކަށް ވާނެއެވެ.
state އިޚްތިޔާރީ ޔުޓިލިޓީއަށް ޖެނެރޭޓް ކުރަން ބޭނުންވާ :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; }

ކަސްޓަމް ކްލާސް ޕްރިފިކްސް

classކޮމްޕައިލް ކުރެވިފައިވާ ސީއެސްއެސްގައި ބޭނުންކުރާ ކްލާސް ޕްރިފިކްސް ބަދަލުކުރުމަށް އޮޕްޝަން ބޭނުންކުރާށެވެ :

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

އައުޓްޕުޓް:

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

ދައުލަތްތަކެވެ

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

ޔުޓިލިޓީސް ބަދަލުކުރުން

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

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

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

.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އޮޕްޝަން އަށް ސެޓްކޮށްގެން 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ޑިރެކްޓިވް ގެ ސަބަބުން .