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

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

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

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

ނޯޓޭޝަން

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

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

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

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

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

ޑިސްޕްލޭ ވެލިއުތަކަށް ބަދަލު ގެނެވޭނީ $displaysވެރިއޭބަލް ބަދަލުކޮށް އެސްސީއެސްއެސް އަލުން ކޮމްޕައިލްކޮށްގެންނެވެ.

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

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

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

<span class="d-block p-2 bg-primary text-white">d-block</span>
<span class="d-block p-2 bg-dark text-white">d-block</span>

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

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

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

ހަމައެކަނި ސްކްރީން ސައިޒްތަކުގެ ދީފައިވާ އިންޓަވަލެއްގައި އެލިމެންޓެއް ދައްކާލުމަށްޓަކައި އެއް .d-*-noneކްލާހާއި ކްލާހަކާ ގުޅުވައިލެވޭނެ .d-*-*، މިސާލަކަށް .d-none .d-md-block .d-xl-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-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>