1. ޑައުންލޯޑް ކުރުން
ޑައުންލޯޑް ކުރުމުގެ ކުރިން ކޯޑް އެޑިޓަރެއް (އަޅުގަނޑުމެން ލަފާދެނީ ސަބްލައިމް ޓެކްސްޓް 2 ) އަދި އެޗްޓީއެމްއެލް އަދި ސީއެސްއެސް ގެ ކޮންމެވެސް ވަރަކަށް މަސައްކަތްކުރާ ޢިލްމެއް ލިބިފައިވުންކަން ޔަޤީން ކުރައްވާށެވެ. އަޅުގަނޑުމެން މިތަނުގައި ސޯސް ފައިލްތައް ނުހިނގާނަން، އެކަމަކު އެއީ ޑައުންލޯޑް ކުރެވޭނެ ފައިލްތަކެކެވެ. އަޅުގަނޑުމެން ފޯކަސް ކުރާނީ އަޅުގަނޑުމެންގެ ކޮމްޕައިލް ކުރެވިފައިވާ ބޫޓްސްޓްރެޕް ފައިލްތައް ފެށުމަށެވެ.
ޑައުންލޯޑް ކޮމްޕައިލް ކޮށްފި އެވެ
އެންމެ އަވަހަށް ފަށަންވީ ގޮތް: އަޅުގަނޑުމެންގެ ސީއެސްއެސް، ޖޭއެސް، އަދި ތަސްވީރުތަކުގެ ކޮމްޕައިލްކޮށް މިނިފައިޑް ވަރޝަންތައް ހޯދުން. ޑޮކްސް ނުވަތަ އަސްލު ސޯސް ފައިލްތަކެއް ނެތެވެ.
ޑައުންލޯޑް ސޯސް
ހުރިހާ ސީއެސްއެސް އަދި ޖާވާސްރިޕްޓްގެ އަސްލު ފައިލްތަކާއި، ޑޮކްސްގެ ލޯކަލް ކޮޕީއެއް ސީދާ ގިޓްހަބުން އެންމެ ފަހުގެ ވަރޝަން ޑައުންލޯޑްކޮށްގެން ހޯއްދަވާށެވެ.
2. ފައިލް ސްޓްރަކްޗަރ
ޑައުންލޯޑްގެ ތެރެއިން ތިރީގައިވާ ފައިލް ސްޓްރަކްޗަރ އާއި ކޮންޓެންޓްސް ފެނިވަޑައިގަންނަވާނެ، އާންމު އެސެޓްތައް ލޮޖިކަލީ ގްރޫޕްކޮށް، ކޮމްޕައިލް ކުރެވިފައިވާ އަދި މިނިފައިޑް ވެރިއޭޝަންތައް ފޯރުކޮށްދެވޭނެއެވެ.
ޑައުންލޯޑް ކޮށްލުމަށްފަހު ކޮމްޕްރެސް ކޮށްފައިވާ ފޯލްޑަރ އަންޒިޕް ކޮށްލުމުން (ކޮމްޕައިލް ކުރެވިފައިވާ) ބޫޓްސްޓްރެޕްގެ ސްޓްރަކްޗަރ ފެންނާނެއެވެ. މިކަހަލަ އެއްޗެއް ފެންނާނެއެވެ:
ބޫޓްސްޓްރެޕް / ├── css / │ ├── ބޫޓްސްޓްރެޕް . css │ ├── ބޫޓްސްޓްރެޕް . މިން . css ├── js / │ ├── ބޫޓްސްޓްރެޕް . js │ ├── ބޫޓްސްޓްރެޕް . މިން . js ├── img / │ ├── ގްލައިފިކޮންސް - ހާފްލިންގްސް . png │ ├── ގްލިފިކޮންސް - ހާފްލިންގްސް - ހުދު . png އެވެ └── ރީޑްމީ . މއ
މިއީ ބޫޓްސްޓްރެޕްގެ އެންމެ އަސާސީ ފޯމް: ގާތްގަނޑަކަށް ކޮންމެ ވެބް ޕްރޮޖެކްޓެއްގައި ވެސް އަވަހަށް ޑްރޮޕް-އިން ބޭނުން ކުރުމަށް ކޮމްޕައިލް ކުރެވިފައިވާ ފައިލްތަކެވެ. އަޅުގަނޑުމެން ކޮމްޕައިލްޑް ސީއެސްއެސް އަދި ޖޭއެސް ( bootstrap.*) ގެ އިތުރުން ކޮމްޕައިލްކޮށް މިނިފައިޑް ސީއެސްއެސް އަދި ޖޭއެސް ( bootstrap.min.*) ފޯރުކޮށްދެމެވެ. މި އިމޭޖް ފައިލްތައް ކޮމްޕްރެސް ކުރަނީ ޕީއެންޖީ ކޮމްޕްރެސް ކުރުމަށް ބޭނުންކުރާ މެކް އެޕް އެއް ކަމަށްވާ އިމޭޖްއޮޕްޓިމް ބޭނުންކޮށްގެންނެވެ.
3. ހިމެނޭ ކަންތައްތައް
ބޫޓްސްޓްރެޕް އަންނަނީ ހުރިހާ ބާވަތެއްގެ ކަންކަމަށް އެޗްޓީއެމްއެލް، ސީއެސްއެސް، އަދި ޖޭއެސް އާއި އެކު ނަމަވެސް އެކަންކަން ޚުލާޞާ ކުރެވޭނީ ބޫޓްސްޓްރެޕް ޑޮކިއުމަންޓޭޝަންގެ މަތީގައި ފެންނަ އަތްމަތި ކެޓަގަރީތަކަކުންނެވެ .
ޑޮކްސް ބައިތަކެވެ
ސްކެފޯލްޑިންގ އެވެ
ޓައިޕް އަދި ބެކްގްރައުންޑް ރީސެޓް ކުރުމަށް ހަށިގަނޑަށް ގްލޯބަލް ސްޓައިލްސް، ލިންކް ސްޓައިލްސް، ގްރިޑް ސިސްޓަމް، އަދި ދެ ސާދާ ލޭއައުޓް.
ބޭސް ސީއެސްއެސް
ޓައިޕޮގްރަފީ، ކޯޑް، ޓޭބަލް، ފޯމް، އަދި ބަޓަން ފަދަ އާންމު އެޗްޓީއެމްއެލް އެލިމެންޓްތަކަށް ސްޓައިލްސް. އަދި ހިމެނެނީ ގްލިފިކޮންސް , މޮޅު ކުޑަ އައިކޮން ސެޓެކެވެ.
ކޮމްޕޯނެންޓްސް
ޓެބްތަކާއި ގިތެޔޮ، ނެވްބާރ، އެލާޓް، ޕޭޖް ހެޑަރސް، އަދި އެހެނިހެން އާންމު އިންޓަރފޭސް ކޮމްޕޯނެންޓްތަކަށް ބޭނުންވާ އަސާސީ ސްޓައިލްތައް.
ޖާވާސްކްރިޕްޓް ޕްލަގިންސް އެވެ
ކޮމްޕޮނެންޓްސް އާއި އެއްގޮތަށް މި ޖާވާސްކްރިޕްޓް ޕްލަގިންސް އަކީ ޓޫލްޓިޕްސް، ޕޮޕޯވަރސް، މޮޑަލްސް، އަދި އެހެނިހެން ކަންކަމަށް އިންޓަރެކްޓިވް ކޮމްޕޯނެންޓްތަކެކެވެ.
ކޮމްޕޯނެންޓްތަކުގެ ލިސްޓް
އެކުގައި ކޮމްޕޮނެންޓްސް އަދި ޖާވާސްކްރިޕްޓް ޕްލަގިންސް ބައިތަކުން ތިރީގައިވާ އިންޓަރފޭސް އެލިމެންޓްތައް ލިބިގެންދެއެވެ.
- ބަޓަން ގްރޫޕްތަކެވެ
- ބަޓަން ޑްރޮޕްޑައުންސް
- ނޭވިގޭޝަނަލް ޓެބްތަކާއި، ގިތެޔޮ ގިރާ، އަދި ލިސްޓްތަކެވެ
- ނަވްބާރެވެ
- ލޭބަލްތައް
- ބެޖްތައް
- ޕޭޖް ހެޑަރސް އާއި ހީރޯ ޔުނިޓް
- ތަމްބްނެއިލްސް
- އެލާޓްތައް
- ޕްރޮގްރެސް ބާރސް
- މޮޑަލްސް އެވެ
- ޑްރޮޕްޑައުންސް އެވެ
- ޓޫލްޓިޕްސް އެވެ
- ޕޮޕޯވަރސް އެވެ
- އެކޯޑިއަން އެވެ
- ކެރޮސެލް އެވެ
- ޓައިޕްއެހެޑް އެވެ
ކުރިއަށް އޮތް ގައިޑްތަކުގައި، އަޅުގަނޑުމެން މި ކޮމްޕޯނެންޓްތަކުގެ ތެރެއިން ވަކިވަކިން އިތުރަށް ތަފްސީލުކޮށް ހިނގާފާނެއެވެ. އޭގެ ކުރިން މިއިން ކޮންމެ އެއްޗެއް ބޭނުންކޮށް ކަސްޓަމައިޒް ކުރާނެ ގޮތުގެ މަޢުލޫމާތު ހޯދުމަށް ޑޮކިއުމަންޓޭޝަންގައި ބަލާށެވެ.
4. އަސާސީ އެޗްޓީއެމްއެލް ޓެމްޕްލޭޓް
ކޮންޓެންޓްތަކުގެ މައްޗަށް ކުރު އިންޓްރޯއަކުން މަގުން ބޭރުކޮށްލުމުން، ބޫޓްސްޓްރެޕް ބޭނުން ކުރުމަށް އަޅުގަނޑުމެންނަށް ފޯކަސް ކުރެވިދާނެއެވެ. އެކަން ކުރުމަށްޓަކައި، އަޅުގަނޑުމެން ބޭނުންކުރާނީ، ފައިލް ސްޓްރަކްޗަރ ގައި އަޅުގަނޑުމެން ފާހަގަކުރި ހުރިހާ އެއްޗެއް ހިމެނޭ އަސާސީ އެޗްޓީއެމްއެލް ޓެމްޕްލޭޓެކެވެ .
މިހާރު، މިއޮތީ އާދައިގެ އެޗްޓީއެމްއެލް ފައިލަކަށް ބަލާލާފައެވެ :
- <html> އެވެ
- <ބޮލުގައި> އެވެ
- <title> ބޫޓްސްޓްރެޕް 101 ޓެމްޕްލޭޓް </title>
- </head> އެވެ
- <ހަށިގަނޑު> އެވެ
- <h1> ހެލޯ، ދުނިޔެ! </h1> އެވެ
- </body> އެވެ
- </html> އެވެ
މިއީ ބޫޓްސްޓްރެޕްޑް ޓެމްޕްލޭޓަކަށް ހެދުމަށްޓަކައި ، ހަމައެކަނި އެކަށީގެންވާ ސީއެސްއެސް އަދި ޖޭއެސް ފައިލްތައް ހިމަނާށެވެ:
- <html> އެވެ
- <ބޮލުގައި> އެވެ
- <title> ބޫޓްސްޓްރެޕް 101 ޓެމްޕްލޭޓް </title>
- <!-- ބޫޓްސްޓްރެޕް -->
- <link href = "css/bootstrap.min.css" rel = "ސްޓައިލްޝީޓް" >
- </head> އެވެ
- <ހަށިގަނޑު> އެވެ
- <h1> ހެލޯ، ދުނިޔެ! </h1> އެވެ
- <script src = "ޖޭއެސް/ބޫޓްސްޓްރެޕް.މިން.ޖޭއެސް" ></script>
- </body> އެވެ
- </html> އެވެ
އަދި ތިޔަ ސެޓް ވެއްޖެ! އެ ދެ ފައިލް އިތުރުކުރުމުން ބޫޓްސްޓްރެޕް އިން ކޮންމެ ސައިޓެއް ނުވަތަ އެޕްލިކޭޝަނެއް ޑިވެލޮޕް ކުރަން ފެށޭނެ އެވެ.
5. މިސާލުތައް
މަދު މިސާލު ލޭއައުޓްތަކަކާއެކު ބޭސް ޓެމްޕްލޭޓުން ކުރިއަށް ދާށެވެ. އަޅުގަނޑުމެން ބާރުއަޅަނީ ފޯލްކްސް އަށް މި މިސާލުތައް ތަކުރާރުކޮށް، ހަމައެކަނި ނިމުމެއްގެ ނަތީޖާއެއްގެ ގޮތުގައި ބޭނުން ނުކުރުމަށެވެ.
-
އަސާސީ މާކެޓިންގ ސައިޓް
ޕްރައިމަރީ މެސެޖަކަށް ހީރޯ ޔުނިޓަކާއި ތިން ސަޕޯޓިން އެލިމެންޓެއް ހިމެނޭ ގޮތަށް ތައްޔާރުކޮށްފައިވެ އެވެ.
-
ފްލޫޑް ލޭއައުޓް
އަޅުގަނޑުމެންގެ އާ ރެސްޕޮންސިވް، ފްލޫޑް ގްރިޑް ސިސްޓަމް ބޭނުންކޮށްގެން ސީމްލޭސް ލިކުއިޑް ލޭއައުޓެއް އުފައްދައެވެ.
-
ސްޓާޓަރ ޓެމްޕްލޭޓް
ބޫޓްސްޓްރެޕް ސީއެސްއެސް އާއި ޖާވާސްކްރިޕްޓްގެ ހުރިހާ އެއްޗެއް ހިމެނޭ ބެއާބޯންސް އެޗްޓީއެމްއެލް ޑޮކިއުމަންޓެކެވެ.
ދެން ކީއްހެއްޔެވެ؟
މަޢުލޫމާތާއި، މިސާލުތަކާއި، ކޯޑް ސްނިޕެޓްތަކަށް ޑޮކްސްއަށް ދިއުމަށް ނުވަތަ ދެން އޮތް ލީޕް ނަގައިގެން ކުރިއަށް އޮތް ކޮންމެ ޕްރޮޖެކްޓަކަށް ބޫޓްސްޓްރެޕް ކަސްޓަމައިޒް ކުރާށެވެ.
ބޫޓްސްޓްރެޕް ޑޮކްސް އަށް ޒިޔާރަތް ކުރައްވާ ބޫޓްސްޓްރެޕް ކަސްޓަމައިޒް ކޮށްލާށެވެ