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

ޑިސްޕްލޭ ޕްރޮޕަޓީ

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

އެކަން ކުރާ ގޮތް

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

ނޯޓޭޝަން

ހުރިހާ ބްރޭކްޕޮއިންޓްތަކަށް އަމަލުކުރާ ޑިސްޕްލޭ ޔުޓިލިޓީ ކްލާސްތަކުގައި , އިން ފެށިގެން xsއަށް xxl, އެ ކްލާސްތަކުގައި ބްރޭކްޕޮއިންޓް ކުރުކުރުމެއް ނެތެވެ. އެއީ އެ ކްލާސްތައް އެޕްލައި ކުރެވެނީ އިން ފެށިގެން min-width: 0;މައްޗަށް ކަމުން، އަދި މިހެން ވުމުން މީޑިއާ ކިއުއަރީއަކުން ބަނދެވިފައި ނުވާތީ އެވެ. ނަމަވެސް ބާކީ ހުރި ބްރޭކްޕޮއިންޓްތަކުގައި ބްރޭކްޕޮއިންޓްގެ ކުރުކުރުން ހިމެނެއެވެ.

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

  • .d-{value}އަށްxs
  • .d-{breakpoint}-{value}އަށްޓަކައި sm, md, lg, xl, އަދި xxl.

ކޮންތާކު އަގަކީ އެއް އެއްޗެއް ކަމުގައި ވެއެވެ:

  • none
  • inline
  • inline-block
  • block
  • grid
  • table
  • table-cell
  • table-row
  • flex
  • inline-flex

ޑިސްޕްލޭ ވެލިއުތަކަށް ބަދަލު ގެނެވޭނީ އެސްސީއެސްއެސްގައި displayކަނޑައެޅިފައިވާ އަގުތައް ބަދަލުކޮށް $utilitiesއަލުން ކޮމްޕައިލްކޮށްގެންނެވެ.

މީޑިއާ ކިއުއަރީތަކުން ސްކްރީން ވިޑްތްތަކަށް އަސަރުކުރަނީ ދީފައިވާ ބްރޭކްޕޮއިންޓް ނުވަތަ އެއަށްވުރެ ބޮޑު ބްރޭކްޕޮއިންޓާއެކުގައެވެ . މިސާލަކަށް , , އަދި ސްކްރީންތަކުގައި .d-lg-noneސެޓްކުރެއެވެ .display: none;lgxlxxl

މިސާލުތަކެވެ

ޑީ-އިންލައިން
ޑީ-އިންލައިން
html އެވެ
<div class="d-inline p-2 text-bg-primary">d-inline</div>
<div class="d-inline p-2 text-bg-dark">d-inline</div>
ޑީ-ބްލޮކް އެވެ ޑީ-ބްލޮކް އެވެ
html އެވެ
<span class="d-block p-2 text-bg-primary">d-block</span>
<span class="d-block p-2 text-bg-dark">d-block</span>

އުނިއިތުރުތައް ފޮރުވުން

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

އެލިމެންޓްތައް ފޮރުވުމަށްޓަކައި ފަސޭހައިން އެއްވެސް ރެސްޕޮންސިވް ސްކްރީން ވެރިއޭޝަނަކަށް .d-noneކްލާސް ނުވަތަ ކްލާސްތަކުގެ ތެރެއިން އެއް ކްލާސް ބޭނުން ކުރާށެވެ..d-{sm,md,lg,xl,xxl}-none

ހަމައެކަނި ސްކްރީން ސައިޒްތަކުގެ ދީފައިވާ އިންޓަވަލެއްގައި އެލިމެންޓެއް ދައްކާލުމަށްޓަކައި އެއް .d-*-noneކްލާހާއި ކްލާހަކާ ގުޅުވައިލެވޭނެ .d-*-*، މިސާލަކަށް .d-none .d-md-block .d-xl-none .d-xxl-noneމެދު އަދި ބޮޑެތި ޑިވައިސްތަކުގައި ފިޔަވައި ހުރިހާ ސްކްރީން ސައިޒަކަށް އެލިމެންޓް ފޮރުވޭނެއެވެ.

ސްކްރީން ސައިޒެވެ ކްލާސް
ހުރިހާ އެންމެންގެ މައްޗަށް ފޮރުވިފައި .d-none
ފޮރުވިފައިވަނީ ހަމައެކަނި xs ގައެވެ .d-none .d-sm-block
ފޮރުވިފައި އޮތީ ހަމައެކަނި sm އަށެވެ .d-sm-none .d-md-block
ފޮރުވިފައިވަނީ ހަމައެކަނި މ .d-md-none .d-lg-block
ފޮރުވިފައިވަނީ ހަމައެކަނި lg އަށެވެ .d-lg-none .d-xl-block
ފޮރުވިފައިވަނީ ހަމައެކަނި xl ގައެވެ .d-xl-none
ފޮރުވިފައިވަނީ ހަމައެކަނި xxl ގައެވެ .d-xxl-none .d-xxl-block
ހުރިހާ އެންމެންގެ މައްޗަށް ފެންނަން ހުރެއެވެ .d-block
ފެންނަނީ ހަމައެކަނި xs އިންނެވެ .d-block .d-sm-none
ފެންނަނީ ހަމައެކަނި sm އިންނެވެ .d-none .d-sm-block .d-md-none
ފެންނަނީ ހަމައެކަނި އެމްޑީ އިންނެވެ .d-none .d-md-block .d-lg-none
ފެންނަނީ ހަމައެކަނި lg އިންނެވެ .d-none .d-lg-block .d-xl-none
ފެންނަނީ ހަމައެކަނި xl އިންނެވެ .d-none .d-xl-block .d-xxl-none
ފެންނަނީ ހަމައެކަނި xxl އިންނެވެ .d-none .d-xxl-block
lg އަދި ފުޅާ ސްކްރީންތަކުގައި ފޮރުވުން
lg އަށް ވުރެ ކުދި ސްކްރީންތަކުގައި ފޮރުވުން
html އެވެ
<div class="d-lg-none">hide on lg and wider screens</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>

ޕްރިންޓްގައި ދައްކާށެވެ

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

  • .d-print-none
  • .d-print-inline
  • .d-print-inline-block
  • .d-print-block
  • .d-print-grid
  • .d-print-table
  • .d-print-table-row
  • .d-print-table-cell
  • .d-print-flex
  • .d-print-inline-flex

ޕްރިންޓް އަދި ޑިސްޕްލޭ ކްލާސްތައް އެއްކޮށްލެވޭނެ އެވެ.

ހަމައެކަނި ސްކްރީން (ޕްރިންޓްގައި ފޮރުވުން އެކަނި)
ހަމައެކަނި ޕްރިންޓްކުރުން (ސްކްރީންގައި ފޮރުވުން އެކަނި)
ސްކްރީންގައި ބޮޑުކޮށް ފޮރުވާ ނަމަވެސް އަބަދުވެސް ޕްރިންޓްގައި ދައްކާށެވެ
html އެވެ
<div class="d-print-none">Screen Only (Hide on print only)</div>
<div class="d-none d-print-block">Print Only (Hide on screen only)</div>
<div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>

ސާސް އެވެ

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

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

    "display": (
      responsive: true,
      print: true,
      property: display,
      class: d,
      values: inline inline-block block grid table table-row table-cell flex inline-flex none
    ),