ކުރިމަތިލުން
ބޫޓްސްޓްރެޕް ބިނާކޮށް ބެލެހެއްޓުމަށް ބޭނުންކުރާ ގައިޑިންގ ޕްރިންސިޕަލްތަކާއި ސްޓްރެޓެޖީތަކާއި އުކުޅުތަކާ ބެހޭގޮތުން ދަސްކޮށްލުމުން އަމިއްލައަށް ފަސޭހައިން ކަސްޓަމައިޒްކޮށް އެކްސްޓެންޑް ކުރެވޭނެއެވެ.
ގެޓިންގ ސްޓާޓްޑް ޕޭޖްތަކުން ޕްރޮޖެކްޓާއި އެ ޕްރޮޖެކްޓުން ލިބޭ ކަންތައްތަކުގެ ތަޢާރަފް ދަތުރެއް ލިބިގެންދާއިރު، މި ލިޔުމުގައި ފޯކަސްކޮށްފައިވަނީ ބޫޓްސްޓްރެޕްގައި އަޅުގަނޑުމެން ކުރާ ކަންތައްތައް ކުރަނީ ކީއްވެގެންތޯއެވެ . އެއީ އަޅުގަނޑުމެންގެ ފަލްސަފާ ބަޔާންކޮށްދީ، އެހެން މީހުންނަށް އަޅުގަނޑުމެންގެ ކިބައިން ދަސްކޮށް، އަޅުގަނޑުމެންނާއެކު ޙިއްޞާކޮށް، އަޅުގަނޑުމެން ކުރިއެރުވުމަށް އެހީތެރިވެދެވޭނެ ގޮތަށް ވެބްގައި ބިނާކުރުމަށެވެ.
ރަނގަޅަށް އަޑު ނުއިވޭ ކަމެއް ފެނޭ، ނުވަތަ ފަހަރެއްގައި މިއަށްވުރެ ރަނގަޅަށް ކުރެވިދާނެ ކަމެއް ހެއްޔެވެ؟ މައްސަލައެއް ހުޅުވާލާ —އަޅުގަނޑުމެން އެކަމާ ބެހޭގޮތުން ތިޔަބޭފުޅުންނާ މަޝްވަރާ ކުރަން ވަރަށް އުފާވާނެ.
އަޅުގަނޑުމެން މުޅިންވެސް މިއިން ކޮންމެ އެއްޗަކަށް އިތުރަށް ޑައިވް ކުރާނަން، އެކަމަކު މަތީ ފެންވަރެއްގައި، މިއޮތީ އަޅުގަނޑުމެންގެ އުސޫލަށް މަގުދައްކާ އެއްޗެއް.
- ކޮމްޕޯނެންޓްތައް ވާންޖެހޭނީ ރެސްޕޮންސިވް އަދި މޮބައިލް-ފަސްޓް އަށެވެ
- ކޮމްޕޯނެންޓްތައް ބިނާކުރަންވާނީ ބޭސް ކްލާހަކާއެކު ކަމަށާއި، މޮޑިފައިއަރ ކްލާސްތައް މެދުވެރިކޮށް ފުޅާކުރަންވާނެއެވެ
- ކޮމްޕޮނެންޓް ސްޓޭޓްތަކުން އާންމު ޒޭޑް-އިންޑެކްސް ސްކޭލަކަށް ކިޔަމަންވާން ޖެހެއެވެ
- ކުރެވެން އޮތް ކޮންމެ ވަގުތެއްގައި ޖާވާސްކްރިޕްޓަށްވުރެ އެޗްޓީއެމްއެލް އަދި ސީއެސްއެސް އިމްޕްލިމެންޓޭޝަނަކަށް އިސްކަންދޭށެވެ
- ވީހާވެސް ގިނައިން ކަސްޓަމް ސްޓައިލްތަކުގެ މައްޗަށް ޔުޓިލިޓީސް ބޭނުން ކުރާށެވެ
- ކުރެވެން އޮތް ކޮންމެ ފަހަރަކު، ހަރުކަށި އެޗްޓީއެމްއެލް ޝަރުތުތައް ތަންފީޒުކުރުމުން ދުރުހެލިވާށެވެ (ކުޑަކުދިން ސެލެކްޓަރުން)
ބޫޓްސްޓްރެޕްގެ ރެސްޕޮންސިވް ސްޓައިލްތައް ބިނާކޮށްފައިވަނީ ރެސްޕޮންސިވް ގޮތަކަށް ކަމަށާއި، މިއީ ގިނަ ފަހަރަށް މޯބައިލް-ފަސްޓް ގެ ނަމުން ނަންދެވިފައިވާ ގޮތެކެވެ . އަޅުގަނޑުމެންގެ ޑޮކްސްގައި މި ލަފުޒު ބޭނުންކޮށް، ބޮޑު ތަނުން އެއްބަސްވާ ނަމަވެސް ބައެއް ފަހަރު މިއީ މާ ފުޅާ ލަފުޒުތަކަކަށް ވެދާނެއެވެ. ބޫޓްސްޓްރެޕްގައި ކޮންމެ ކޮމްޕޮނެންޓަކީ މުޅިން ރެސްޕޮންސިވް ވާން ނުޖެހޭ ނަމަވެސް ، މި ރެސްޕޮންސިވް އެޕްރޯޗަކީ ވިއުޕޯޓް ބޮޑުވަމުންދާވަރަކަށް ސްޓައިލްތައް އިތުރުކުރުމަށް ބާރުއަޅައިގެން ސީއެސްއެސް އޮވަރރައިޑްސް މަދުކުރުމެވެ.
ބޫޓްސްޓްރެޕް ހުރަސްކޮށް، މިކަން އެންމެ ސާފުކޮށް ފެންނާނެ އަޅުގަނޑުމެންގެ މީޑިއާ ސުވާލުތަކުން. ގިނަ ހާލަތްތަކުގައި އަޅުގަނޑުމެން ބޭނުންކުރަނީ min-widthވަކި ބްރޭކްޕޮއިންޓެއްގައި އަމަލުކުރަން ފެށި، މަތީ ބްރޭކްޕޮއިންޓްތަކުގެ ތެރެއިން ކުރިއަށް ގެންދާ ސުވާލުތަކެވެ. މިސާލަކަށް އޭ އިންފިނިޓީއަށް .d-noneއަމަލުކުރެއެވެ min-width: 0. އަނެއްކޮޅުން .d-md-noneމީޑިއަމް ބްރޭކްޕޮއިންޓުން ފެށިގެން މައްޗަށް އޭ އަމަލުކުރެއެވެ.
ބައެއް ފަހަރު އަޅުގަނޑުމެން ބޭނުންކުރާނީ max-widthކޮމްޕޮނެންޓެއްގެ އިންހެރެންޓް ކޮމްޕްލެކްސިޓީއަށް އެކަން ބޭނުންވާ ވަގުތުތަކުގައެވެ. ބައެއް ފަހަރު، މި އޯވަރރައިޑްތަކަކީ އަޅުގަނޑުމެންގެ ކޮމްޕޯނެންޓްތަކުން ކޯރ ފަންކްޝަނަލިޓީ އަލުން ލިޔުމަށްވުރެ، ތަންފީޒުކުރުމާއި ސަޕޯޓްކުރުމަށް ފަންކްޝަނަލީ އަދި މެންޓަލްލީ ސާފު އެއްޗެކެވެ. އަޅުގަނޑުމެން މަސައްކަތް ކުރަނީ މި ގޮތް ހަނިކުރުމަށް، އެކަމަކު ދޭތެރެ ދޭތެރެއިން މި ގޮތް ބޭނުންކުރާނަން.
އަޅުގަނޑުމެންގެ ރީބޫޓް، ކްރޮސް ބްރައުޒާ ނޯމަލައިޒޭޝަން ސްޓައިލްޝީޓެއް އެއްފަރާތްކޮށް، އަޅުގަނޑުމެންގެ ހުރިހާ ސްޓައިލްތަކެއްގެ އަމާޒަކީ ސެލެކްޓަރެއްގެ ގޮތުގައި ކްލާސްތައް ބޭނުންކުރުމެވެ. މާނައަކީ ސްޓައިލްތައް މާ ވަކިކޮށް ފަސޭހައިން އޯވަރރައިޑް ކުރެވޭ ގޮތަށް ހަދާ ޓައިޕް ސެލެކްޓަރސް (އެބަހީ، input[type="text"]) އަދި އެކްސްޓްރާނިއަސް ޕޭރެންޓް ކްލާސްތަކުން (އެބަހީ، ) ސްޓިއަރ ކްލިއަރ ކުރުން..parent .child
އެގޮތުން، ކޮމްޕޯނެންޓްތައް ބިނާކުރަންވާނީ އާންމު، އޯވަރރައިޑް ނުކުރެވޭ ޕްރޮޕަޓީ-ވެލިއު ޖޯޑުތައް ހިމެނޭ ބޭސް ކްލާހަކާއެކުގައެވެ. މިސާލަކަށް، .btnއަދި .btn-primary. އަޅުގަނޑުމެން ބޭނުންކުރަނީ .btnއާންމު ހުރިހާ ސްޓައިލްތަކަށް ކަމަށްވާ display, padding, އަދި border-width. .btn-primaryއަޅުގަނޑުމެން ދެން ބޭނުންކުރަނީ ކުލަ، ބެކްގްރައުންޑް-ކުލަ، ބޯޑަރ-ކުލަ ފަދަ ތަކެތި އިތުރުކުރުން ފަދަ މޮޑިފައިއަރސް އެވެ.
މޮޑިފައި ކްލާސްތައް ބޭނުންކުރަންވާނީ ހަމައެކަނި އެތައް ވައްތަރެއްގެ ތެރެއިން ބަދަލުކުރަންޖެހޭ އެތައް ޕްރޮޕަޓީއެއް ނުވަތަ އަގުތަކެއް ހުންނަ ވަގުތުތަކުގައެވެ. މޮޑިފައިއަރސް އަކީ އަބަދުވެސް ކޮންމެހެން ބޭނުންވާ އެއްޗެއް ނޫން ކަމުން، ކޯޑްގެ ލައިންތައް އުފައްދާއިރު ހަގީގަތުގައި ސޭވްކޮށް، ކޮންމެހެން ބޭނުން ނުވާ އޯވަރރައިޑްތައް ހުއްޓުވަމުންދާކަން ޔަގީން ކުރައްވާށެވެ. މޮޑިފައިޓަރސްގެ ރަނގަޅު މިސާލުތަކަކީ އަޅުގަނޑުމެންގެ ތީމް ކަލަރ ކްލާސްތަކާއި ސައިޒް ވެރިއަންޓްސް އެވެ.
ބޫޓްސްޓްރެޕްގައި ދެ z-indexސްކޭލްއެއް ހުރެއެވެ- ކޮމްޕޮނެންޓެއްގެ ތެރޭގައި ހުންނަ އެލިމެންޓްތަކާއި އޯވަރލޭ ކޮމްޕޯނެންޓްތަކެވެ.
borderބޫޓްސްޓްރެޕްގައި ހުންނަ ބައެއް ކޮމްޕޯނެންޓްތައް ބިލްޑްކޮށްފައިވަނީ ޕްރޮޕަޓީއަށް ބަދަލު ނުކޮށް ޑަބަލް ބޯޑަރުތައް ހުއްޓުވުމަށްޓަކައި އޯވަލެޕް ކުރާ އެލިމެންޓްތަކާއެކުގައެވެ . މިސާލަކަށް ބަޓަން ގްރޫޕްތަކާއި، އިންޕުޓް ގްރޫޕްތަކާއި، ޕޭޖިނޭޝަން އެވެ.- މި ކޮމްޕޯނެންޓްތައް ހިއްސާކުރާ ސްޓޭންޑަރޑް
z-indexސްކޭލް އޮފް0ތްރޫ3. 0އަކީ ޑިފޯލްޓް (އިނިޝިއަލް)،1އަކީ:hover,2އަކީ:active/.active, އަދި ,3އަކީ:focus.- މި އުސޫލަކީ އެންމެ މަތީ ޔޫޒަރ ޕްރިއޮރިޓީއަށް އަޅުގަނޑުމެން އުންމީދުކުރާ ގޮތާ އެއްގޮތް ގޮތެކެވެ. އެލިމެންޓެއް ފޯކަސް ކޮށްފިނަމަ އެއީ ވިއުގަ އާއި ޔޫޒަރުގެ ސަމާލުކަމުގައި ހުންނަ އެއްޗެކެވެ. އެކްޓިވް އެލިމެންޓްތައް ދެވަނައަށް އެންމެ މަތީގައި އުޅެނީ އެއީ ސްޓޭޓް ދައްކުވައިދޭ އެއްޗަކަށް ވާތީއެވެ. ހޯވަރ ތިންވަނައަށް އެންމެ މަތީގައި އޮތީ ޔޫޒަރުގެ ނިޔަތް ދައްކުވައިދޭތީ ނަމަވެސް ގާތްގަނޑަކަށް ކޮންމެ އެއްޗެއް ހޯވަރ ކުރެވޭނެއެވެ.
ބޫޓްސްޓްރެޕްގައި ކޮންމެވެސް ވައްތަރެއްގެ އޯވަރލޭއެއްގެ ގޮތުގައި މަސައްކަތްކުރާ ބައެއް ކޮމްޕޯނެންޓްތައް ހިމެނެއެވެ. މީގެ ތެރޭގައި ހިމެނެނީ، އެންމެ މަތީ ތަރުތީބުން z-index, ޑްރޮޕްޑައުންސް، ފިކްސްޑް އަދި ސްޓިކީ ނަވްބާރސް، މޮޑަލްސް، ޓޫލްޓިޕްސް، އަދި ޕޮޕޯވަރސް އެވެ. މި ކޮމްޕޯނެންޓްތަކުގެ އަމިއްލަ z-indexސްކޭލްއެއް ހުންނައިރު، އެ ކޮމްޕޯނެންޓްތައް ފެށެނީ 1000. މި ފެށޭ ނަންބަރަކީ ރެންޑަމް ނަންބަރެއް ކަމަށާއި، މިއީ އަޅުގަނޑުމެންގެ ސްޓައިލްތަކާއި ތިޔަބޭފުޅުންގެ ޕްރޮޖެކްޓްގެ ކަސްޓަމް ސްޓައިލްތަކާ ދެމެދު ކުޑަ ބަފަރެއްގެ ގޮތުގައި ޚިދުމަތްކުރާ ނަންބަރެކެވެ.
ކޮންމެ އޯވަރލޭ ކޮމްޕޮނެންޓެއްގެ z-indexއަގު ކުޑަކޮށް އިތުރުކޮށްދެނީ އާންމު ޔޫއައި ޕްރިންސިޕަލްތަކުގެ ސަބަބުން ޔޫޒަރ ފޯކަސްޑް ނުވަތަ ހޯވަރޑް އެލިމެންޓްތައް ހުރިހާ ވަގުތެއްގައި ވެސް ފެންނަން ހުންނަ ގޮތަކަށެވެ. މިސާލަކަށް މޮޑަލް އަކީ ޑޮކިއުމެންޓް ބްލޮކް ކުރުން (މިސާލަކަށް، މޮޑަލްގެ ފިޔަވަޅަކަށް ފިޔަވައި އެހެން ފިޔަވަޅެއް ނުނެގޭނެ)، އެހެންކަމުން އަޅުގަނޑުމެން އެކަން އަޅުގަނޑުމެންގެ ނަވްބާރތަކުގެ މައްޗަށް ޖައްސަމެވެ.
މިކަމާ ބެހޭ އިތުރު މަޢުލޫމާތު އަޅުގަނޑުމެންގެ z-indexލޭއައުޓް ޕޭޖުން ހޯއްދަވާށެވެ .
ކުރެވެން އޮތް ކޮންމެ ވަގުތެއްގައި އަޅުގަނޑުމެން އިސްކަންދެނީ ޖާވާސްކްރިޕްޓަށްވުރެ އެޗްޓީއެމްއެލް އާއި ސީއެސްއެސް ލިޔެލުމަށެވެ. އާންމު ގޮތެއްގައި އެޗްޓީއެމްއެލް އާއި ސީއެސްއެސް އަކީ ތަފާތު ހުރިހާ ތަޖުރިބާ ލެވެލްއެއްގެ ގިނަ ބަޔަކަށް މާ ގިނަ އަދި ލިބޭނެ ގޮތްތަކެކެވެ. އެޗްޓީއެމްއެލް އަދި ސީއެސްއެސް ވެސް ޖާވާސްކްރިޕްޓަށް ވުރެ ބްރައުޒާގައި އަވަސްވެފައިވާއިރު، އާންމުކޮށް ބްރައުޒާއިން ތިބާއަށް ވަރަށް ބޮޑު ފުންޝަނަލިޓީއެއް ލިބިގެންދެއެވެ.
މި އުސޫލަކީ އަޅުގަނޑުމެންގެ ފުރަތަމަ ދަރަޖައިގެ ޖާވާސްކްރިޕްޓް އެޕީއައި އަކީ dataއެޓްރިބިއުޓްސް އެވެ. އަޅުގަނޑުމެންގެ ޖާވާސްކްރިޕްޓް ޕްލަގިންސް ބޭނުން ކުރުމަށް ގާތްގަނޑަކަށް އެއްވެސް ޖާވާސްކްރިޕްޓެއް ލިޔަން ނުޖެހޭނެ؛ އޭގެ ބަދަލުގައި އެޗްޓީއެމްއެލް ލިޔެލާށެވެ. މިކަމާ ބެހޭ އިތުރު މަޢުލޫމާތު އަޅުގަނޑުމެންގެ ޖާވާސްކްރިޕްޓް އޯވަރވިއު ޕޭޖުން ކިޔައިބަލާށެވެ .
އެންމެ ފަހުން އަޅުގަނޑުމެންގެ ސްޓައިލްތައް ބިނާވެފައިވަނީ އާންމު ވެބް އެލިމެންޓްތަކުގެ އަސާސީ ސުލޫކުތަކުގެ މައްޗަށެވެ. ކުރެވެން އޮތް ކޮންމެ ވަގުތެއްގައި އަޅުގަނޑުމެން އިސްކަންދެނީ ބްރައުޒާއިން ލިބޭ އެއްޗެއް ބޭނުންކުރުމަށެވެ. މިސާލަކަށް .btnގާތްގަނޑަކަށް ކޮންމެ އެލިމެންޓެއްގައި ކްލާހެއް ބެހެއްޓިދާނެ ނަމަވެސް ގިނަ އެލިމެންޓްތަކުން އެއްވެސް ސެމެންޓިކް ވެލިއުއެއް ނުވަތަ ބްރައުޒާ ފަންކްޝަނަލިޓީއެއް ނުދެއެވެ. އެހެންކަމުން އޭގެ ބަދަލުގައި އަޅުގަނޑުމެން ބޭނުންކުރަނީ <button>ސ އާއި <a>ސ.
މިއަށްވުރެ ކޮމްޕްލެކްސް ކޮމްޕޯނެންޓްތަކަށް ވެސް ހަމަ އެގޮތެވެ. އަޅުގަނޑުމެންނަށް އިންޕުޓެއްގެ ޙާލަތަށް ބަލައިގެން ބެލެނިވެރި އެލިމެންޓަކަށް ކްލާސްތައް އިތުރުކުރުމަށް އަޅުގަނޑުމެންގެ އަމިއްލަ ފޯމް ވެލިޑޭޝަން ޕްލަގިން ލިޔެވޭނެ ކަމުގައި ވިޔަސް، އެކަމުގެ ސަބަބުން ޓެކްސްޓް ސްޓައިލް ކުރުމަށް ރަތްކުލައިން ލިޔެވޭނެ ކަމުގައި ވިޔަސް، އަޅުގަނޑުމެން އިސްކަންދެނީ ކޮންމެ:valid ބްރައުޒަރަކުން އަޅުގަނޑުމެންނަށް ފޯރުކޮށްދޭ / :invalidސޫޑޯ-އެލިމެންޓްތައް ބޭނުންކުރުމަށެވެ.
ޔުޓިލިޓީ ކްލާސްތަކަކީ - ކުރިން ބޫޓްސްޓްރެޕް 3 ގައި އެހީތެރިން - ސީއެސްއެސް ބްލޮޓް އާއި ޕޭޖް ޕާފޯމަންސް ދަށްވުމާ ދެކޮޅަށް މަސައްކަތްކުރުމުގައި ވަރުގަދަ އެކުވެރިއެކެވެ. ޔުޓިލިޓީ ކްލާހަކީ އާންމުކޮށް ކްލާހެއްގެ ގޮތުގައި ފާޅުކުރެވޭ އެއް، ބަދަލު ނުކުރެވޭ ޕްރޮޕަޓީ-ވެލިއު ޖޯޑުކުރުމެކެވެ (އެބަހީ، .d-blockތަމްސީލުކުރެއެވެ display: block;). އެމީހުންގެ ޕްރައިމަރީ އެޕީލް އަކީ އެޗްޓީއެމްއެލް ލިޔަމުންދާއިރު ބޭނުންކުރުމުގެ ސްޕީޑް އާއި ލިޔަން ޖެހޭ ކަސްޓަމް ސީއެސްއެސްގެ މިންވަރު ލިމިޓް ކުރުމެވެ.
ވަކިން ޚާއްޞަކޮށް ކަސްޓަމް ސީއެސްއެސްއާ ގުޅޭގޮތުން، ޔުޓިލިޓީސް އިން ތިބާގެ އެންމެ ގިނައިން ތަކުރާރުކުރާ ޕްރޮޕަޓީ-ވެލިއު ޖޯޑުތައް އެއް ކްލާސްތަކަށް ކުޑަކޮށްގެން ފައިލް ސައިޒް އިތުރުވުމާ ދެކޮޅަށް މަސައްކަތް ކުރުމަށް އެހީތެރިވެދެވިދާނެއެވެ. މިއީ ތިބާގެ ޕްރޮޖެކްޓްތަކުގައި ސްކޭލްގައި ބޮޑު އަސަރެއް ކޮށްފާނެ ކަމެކެވެ.
އަބަދުވެސް ކުރެވޭނެ ކަމެއް ނޫން ނަމަވެސް، އަޅުގަނޑުމެން މަސައްކަތް ކުރަނީ ކޮމްޕޯނެންޓްތަކަށް އަޅުގަނޑުމެންގެ އެޗްޓީއެމްއެލް ޝަރުތުތަކުގައި މާބޮޑަށް ޑޮގްމެޓިކް ނުވުމަށެވެ. މިގޮތުން އަޅުގަނޑުމެންގެ ސީއެސްއެސް ސެލެކްޓަރސްގައި ސިންގަލް ކްލާސްތަކަށް ފޯކަސްކޮށް، ވަގުތުން ކުދިން ސެލެކްޓަރސް ( >). މިއީ ތިޔަބޭފުޅުންގެ ތަންފީޒުކުރުމުގައި އިތުރު ފްލެކްސިބިލިޓީއެއް ލިބި، އަޅުގަނޑުމެންގެ ސީއެސްއެސް ސާދާކޮށް، ވަކި ޚާއްޞަކަން ކުޑަކޮށް ބެހެއްޓުމަށް އެހީތެރިވެދޭ ކަމެކެވެ.