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

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

އަޅުގަނޑުމެންގެ ރެސްޕޮންސިވް ޑިސްޕްލޭ ޔުޓިލިޓީ ކްލާސްތަކާއެކު 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

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

<div class="d-inline p-2 text-bg-primary">d-inline</div>
<div class="d-inline p-2 text-bg-dark">d-inline</div>

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

<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

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

<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
    ),