ހޯދުން · ބޫޓްސްޓްރެޕް މޯލްޑިވިއަންގައެވެ

ޑައުންލޯޑް ކުރުމުގެ ކުރިން ކޯޑް އެޑިޓަރެއް (އަޅުގަނޑުމެން ލަފާދެނީ ސަބްލައިމް ޓެކްސްޓް 2 ) އަދި އެޗްޓީއެމްއެލް އަދި ސީއެސްއެސް ގެ ކޮންމެވެސް ވަރަކަށް މަސައްކަތްކުރާ ޢިލްމެއް ލިބިފައިވުންކަން ޔަޤީން ކުރައްވާށެވެ. އަޅުގަނޑުމެން މިތަނުގައި ސޯސް ފައިލްތައް ނުހިނގާނަން، އެކަމަކު އެއީ ޑައުންލޯޑް ކުރެވޭނެ ފައިލްތަކެކެވެ. އަޅުގަނޑުމެން ފޯކަސް ކުރާނީ ކޮމްޕައިލް ކުރެވިފައިވާ ބޫޓްސްޓްރެޕް ފައިލްތަކުން ފެށުމަށެވެ.

ޑައުންލޯޑް ކޮމްޕައިލް ކޮށްފި އެވެ

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

ބޫޓްސްޓްރެޕް ޑައުންލޯޑް ކުރާށެވެ

ޑައުންލޯޑް ސޯސް

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

ބޫޓްސްޓްރެޕް ސޯސް ޑައުންލޯޑް ކުރައްވާ

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

ޑައުންލޯޑް ކޮށްލުމަށްފަހު ކޮމްޕްރެސް ކޮށްފައިވާ ފޯލްޑަރ އަންޒިޕް ކޮށްލުމުން (ކޮމްޕައިލް ކުރެވިފައިވާ) ބޫޓްސްޓްރެޕްގެ ސްޓްރަކްޗަރ ފެންނާނެއެވެ. މިކަހަލަ އެއްޗެއް ފެންނާނެއެވެ:

  ބޫޓްސްޓްރެޕް / ├── css / │ ├── ބޫޓްސްޓްރެޕް . css
   │ ├── ބޫޓްސްޓްރެޕް . މިން . css
   ├── js / │ ├── ބޫޓްސްޓްރެޕް . js
   │ ├── ބޫޓްސްޓްރެޕް . މިން . js
   └── img / ├── ގްލައިފިކޮންސް - ހާފްލިންގްސް . png
       └── ގްލިފިކޮންސް - ހާފްލިންގްސް - ހުދު . png އެވެ

މިއީ ބޫޓްސްޓްރެޕްގެ އެންމެ އަސާސީ ފޯމް: ގާތްގަނޑަކަށް ކޮންމެ ވެބް ޕްރޮޖެކްޓެއްގައި ވެސް އަވަހަށް ޑްރޮޕް-އިން ބޭނުން ކުރުމަށް ކޮމްޕައިލް ކުރެވިފައިވާ ފައިލްތަކެވެ. އަޅުގަނޑުމެން ކޮމްޕައިލްޑް ސީއެސްއެސް އަދި ޖޭއެސް ( bootstrap.*) ގެ އިތުރުން ކޮމްޕައިލްކޮށް މިނިފައިޑް ސީއެސްއެސް އަދި ޖޭއެސް ( bootstrap.min.*) ފޯރުކޮށްދެމެވެ. މި އިމޭޖް ފައިލްތައް ކޮމްޕްރެސް ކުރަނީ ޕީއެންޖީ ކޮމްޕްރެސް ކުރުމަށް ބޭނުންކުރާ މެކް އެޕް އެއް ކަމަށްވާ އިމޭޖްއޮޕްޓިމް ބޭނުންކޮށްގެންނެވެ.

ހުރިހާ ޖާވާސްކްރިޕްޓް ޕްލަގިންތަކެއްގައި ޖީކުއަރީ ހިމަނަން ޖެހޭކަން ފާހަގަކުރަމެވެ.

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

ޑޮކްސް ބައިތަކެވެ

ސްކެފޯލްޑިންގ އެވެ

ޓައިޕް އަދި ބެކްގްރައުންޑް ރީސެޓް ކުރުމަށް ހަށިގަނޑަށް ގްލޯބަލް ސްޓައިލްސް، ލިންކް ސްޓައިލްސް، ގްރިޑް ސިސްޓަމް، އަދި ދެ ސާދާ ލޭއައުޓް.

ބޭސް ސީއެސްއެސް

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

ކޮމްޕޯނެންޓްސް

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

ޖާވާސްކްރިޕްޓް ޕްލަގިންސް އެވެ

ކޮމްޕޮނެންޓްސް އާއި އެއްގޮތަށް މި ޖާވާސްކްރިޕްޓް ޕްލަގިންސް އަކީ ޓޫލްޓިޕްސް، ޕޮޕޯވަރސް، މޮޑަލްސް، އަދި އެހެނިހެން ކަންކަމަށް އިންޓަރެކްޓިވް ކޮމްޕޯނެންޓްތަކެކެވެ.

ކޮމްޕޯނެންޓްތަކުގެ ލިސްޓް

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

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

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

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

މިހާރު، މިއޮތީ އާދައިގެ އެޗްޓީއެމްއެލް ފައިލަކަށް ބަލާލާފައެވެ :

<!ޑޮކްޓައިޕް html>
<html> އެވެ
  <ބޮލުގައި> އެވެ
    <title> ބޫޓްސްޓްރެޕް 101 ޓެމްޕްލޭޓް </title>
    <meta name = "ވިއުޕޯޓް" ކޮންޓެންޓް = "ވިޑްތް=ޑިވައިސް-ވިޑްތް، އިންޓިޝިއަލް-ސްކޭލް=1.0" >  
  </head> އެވެ
  <ހަށިގަނޑު> އެވެ
    <h1> ހެލޯ، ދުނިޔެ! </h1> އެވެ
    <script src = "https://code.jquery.com/jquery.js" ></ސްކްރިޕްޓް> 
  </body> އެވެ
</html> އެވެ

މިއީ ބޫޓްސްޓްރެޕްޑް ޓެމްޕްލޭޓަކަށް ހެދުމަށްޓަކައި ، ހަމައެކަނި އެކަށީގެންވާ ސީއެސްއެސް އަދި ޖޭއެސް ފައިލްތައް ހިމަނާށެވެ:

<!ޑޮކްޓައިޕް html>
<html> އެވެ
  <ބޮލުގައި> އެވެ
    <title> ބޫޓްސްޓްރެޕް 101 ޓެމްޕްލޭޓް </title>
    <meta name = "ވިއުޕޯޓް" ކޮންޓެންޓް = "ވިޑްތް=ޑިވައިސް-ވިޑްތް، އިންޓިޝިއަލް-ސްކޭލް=1.0" >  
    <!-- ބޫޓްސްޓްރެޕް -->
    <link href = "css/bootstrap.min.css" rel = "ސްޓައިލްޝީޓް" މީޑިއާ = "ސްކްރީން" >   
  </head> އެވެ
  <ހަށިގަނޑު> އެވެ
    <h1> ހެލޯ، ދުނިޔެ! </h1> އެވެ
    <script src = "https://code.jquery.com/jquery.js" ></ސްކްރިޕްޓް> 
    <script src = "ޖޭއެސް/ބޫޓްސްޓްރަޕް.މިން.ޖޭއެސް" ></script> 
  </body> އެވެ
</html> އެވެ

އަދި ތިޔަ ސެޓް ވެއްޖެ! އެ ދެ ފައިލް އިތުރުކުރުމުން ބޫޓްސްޓްރެޕް އިން ކޮންމެ ސައިޓެއް ނުވަތަ އެޕްލިކޭޝަނެއް ވެސް ޑިވެލޮޕް ކުރަން ފެށޭނެ އެވެ.

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

ސްޓާޓަރ ޓެމްޕްލޭޓް

ބޫޓްސްޓްރަޕް ސީއެސްއެސް އާއި ޖާވާސްކްރިޕްޓްގެ ހުރިހާ އެއްޗެއް ހިމެނޭ ބެއާބޯންސް އެޗްޓީއެމްއެލް ޑޮކިއުމަންޓެކެވެ.
އަސާސީ މާކެޓިންގ ސައިޓް

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

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

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

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

ކަސްޓަމް އާއި ބޮޑެތި ފޯމް ކޮންޓްރޯލްތަކާއި ފްލެކްސިބަލް ލޭއައުޓެއް އެކުލެވޭ ގޮތަށް ބެއާބޯންސް ސައިން އިން ފޯމްގައި ސޮއިކޮށްފައިވެ އެވެ.
ސްޓިކީ ފޫޓަރެއް

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

ފާހަގަކޮށްލެވޭ ކެރޮސެލްއެއް ހިމެނޭ އަސާސީ މާކެޓިން ސައިޓުގައި އިތުރަށް އިންޓަރެކްޓިވް ރިފްއެކެވެ.

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

ބޫޓްސްޓްރެޕް ޑޮކްސް އަށް ޒިޔާރަތް ކުރައްވާ ބޫޓްސްޓްރެޕް ކަސްޓަމައިޒް ކޮށްލާށެވެ

ފަށަންވީ ގޮތް

1. ޑައުންލޯޑް ކުރުން

ޑައުންލޯޑް ކޮމްޕައިލް ކޮށްފި އެވެ

ޑައުންލޯޑް ސޯސް

2. ފައިލް ސްޓްރަކްޗަރ

3. ހިމެނޭ ކަންތައްތައް

ޑޮކްސް ބައިތަކެވެ

ސްކެފޯލްޑިންގ އެވެ

ބޭސް ސީއެސްއެސް

ކޮމްޕޯނެންޓްސް

ޖާވާސްކްރިޕްޓް ޕްލަގިންސް އެވެ

ކޮމްޕޯނެންޓްތަކުގެ ލިސްޓް

4. އަސާސީ އެޗްޓީއެމްއެލް ޓެމްޕްލޭޓް

5. މިސާލުތައް

ސްޓާޓަރ ޓެމްޕްލޭޓް

އަސާސީ މާކެޓިންގ ސައިޓް

ފްލޫޑް ލޭއައުޓް

ހަނި މާކެޓިންގ އެވެ

ޖަސްޓިފައިޑް ނަވް

ސައިން އިން ކޮށްލާށެވެ

ސްޓިކީ ފޫޓަރެއް

ކެރޮސެލް ޖަމްބޮޓްރޯން އެވެ

ދެން ކީއްހެއްޔެވެ؟