މައިގަނޑު ކޮންޓެންޓަށް ސްކިޕް ކުރާށެވެ ޑޮކްސް ނެވިގޭޝަނަށް ސްކިޕް ކުރާށެވެ
Check
in English

ބޫޓްސްޓްރެޕް އިން ފަށާށެވެ

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

މި ޞަފްޙާގައެވެ

އަވަހަށް ފެށުން

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


  1. index.htmlޕްރޮޖެކްޓް ރޫޓްގައި އާ ފައިލްއެއް އުފައްދާށެވެ . މޯބައިލް ޑިވައިސްތަކުގައި ރަނގަޅަށް ރެސްޕޮންސިވް ބިހޭވިއަރ<meta name="viewport"> އަށް ޓެގް ވެސް ހިމަނާށެވެ .

    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

  2. ބޫޓްސްޓްރެޕްގެ ސީއެސްއެސް އަދި ޖޭއެސް ހިމަނާށެވެ. އަޅުގަނޑުމެންގެ ސީއެސްއެސް އަށް ޓެގް ޖައްސަވާ، އަދި އަޅުގަނޑުމެންގެ <link>ޖާވާސްކްރިޕްޓް ބަންޑަލް އަށް ޓެގް (ޑްރޮޕްޑައުންސް، ޕޮޕަރސް، އަދި ޓޫލްޓިޕްސް ޕޮޒިޝަން ކުރުމަށް ޕޮޕަރ ހިމެނޭގޮތަށް) ބަންދު ކުރުމުގެ ކުރިން . އަޅުގަނޑުމެންގެ ސީޑީއެން ލިންކްތަކާ ބެހޭ އިތުރު މައުލޫމާތު ހޯއްދަވާށެވެ .<head><script></body>

    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

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

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

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

ރެފަރެންސްގެ ގޮތުގައި މިއީ އަޅުގަނޑުމެންގެ ޕްރައިމަރީ ސީޑީއެން ލިންކްތަކެވެ.

ތަފްޞީލު ޔޫ.އާރ.އެލް
ސީއެސްއެސް އެވެ https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css
ޖޭއެސް އެވެ https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js

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

ދެން އަޅަންޖެހޭ ފިޔަވަޅުތަކެވެ

ޖޭއެސް ކޮމްޕޯނެންޓްސް އެވެ

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

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

މުހިންމު ގްލޯބަލްސް

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

އެޗްޓީއެމްއެލް5 ޑޮކްޓައިޕް

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

<!doctype html>
<html lang="en">
  ...
</html>

ރެސްޕޮންސިވް މެޓާ ޓެގް

Bootstrap is developed mobile first , އަޅުގަނޑުމެން ފުރަތަމަ މޯބައިލް ޑިވައިސްތަކަށް ކޯޑް އޮޕްޓިމައިޒްކޮށް އޭގެ ފަހުން ސީއެސްއެސް މީޑިއާ ކިއުއަރީސް ބޭނުންކޮށްގެން ބޭނުންވާ ގޮތަށް ކޮމްޕޯނެންޓްތައް ސްކޭލް އަޕް ކުރާ ސްޓްރެޓެޖީއެކެވެ. ހުރިހާ ޑިވައިސްތަކަށް ރަނގަޅަށް ރެންޑަރިންގ އާއި ޓަޗް ޒޫމިންގ ކަށަވަރުކުރުމަށްޓަކައި، ރެސްޕޮންސިވް ވިއުޕޯޓް މެޓާ ޓެގް ތިބާގެ އަށް އިތުރުކޮށްލާށެވެ <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

މިކަމުގެ މިސާލެއް ޢަމަލީ ގޮތުން ފެނިވަޑައިގަންނަވާނީ އަވަސް ފެށުމުންނެވެ .

ފޮށި ސައިޒް ކުރުން

ސީއެސްއެސްގައި އިތުރަށް ސީދާ ސައިޒިންގ އަށްޓަކައި، އަޅުގަނޑުމެން ގްލޯބަލް box-sizingވެލިއު އިން content-boxއަށް ބަދަލުކުރަމެވެ border-box. މިއީ އެލިމެންޓެއްގެ ފައިނަލް ކޮމްޕިއުޓް ކުރެވިފައިވާ ފުޅާމިނަށް އަސަރު ނުކުރާނެކަން ކަށަވަރުކޮށްދޭ paddingކަމަކަށް ވިޔަސް، ގޫގުލް މެޕްސް އަދި ގޫގުލް ކަސްޓަމް ސަރޗް އިންޖީން ފަދަ ބައެއް ތިންވަނަ ފަރާތެއްގެ ސޮފްޓްވެއާތަކަށް މައްސަލަތައް ކުރިމަތިވެދާނެ ކަމެކެވެ.

އެކަން އޯވަރރައިޑް ކުރަން ޖެހޭ މަދުން ނަމަވެސް ތިރީގައިވާ ފަދަ އެއްޗެއް ބޭނުން ކުރާށެވެ.

.selector-for-some-widget {
  box-sizing: content-box;
}

މަތީގައިވާ ސްނިޕެޓާއެކު، ނެސްޓް ކުރެވިފައިވާ އެލިމެންޓްތައް- އޭގެ ތެރޭގައި ޖެނެރޭޓް ކުރެވިފައިވާ ކޮންޓެންޓް ވިއާ ::beforeއާއި ::after— ހުރިހާ އެއްޗެއް އެއަށް ކަނޑައެޅިފައިވާ އެއްޗެއް box-sizingވާރުތަވާނެއެވެ .selector-for-some-widget.

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

ރީބޫޓް ކުރާށެވެ

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

މުޖުތަމަޢު

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

  • ދަ އޮފިޝަލް ބޫޓްސްޓްރެޕް ބްލޮގް ކިޔައި ސަބްސްކްރައިބް ކޮށްލައްވާށެވެ .
  • އަޅުގަނޑުމެންގެ ގިޓްހަބް ޑިސްކަޝަންސް އާއި ސުވާލުކޮށް އެކްސްޕްލޯރ ކުރާށެވެ .
  • އައިއާރުސީގައި ތިބި އެކުވެރި ބޫޓްސްޓްރެޕަރުންނާ ޗެޓް ކުރާށެވެ. ސަރވަރގައި irc.libera.chat، #bootstrapޗެނަލްގައި.
  • އިމްޕްލިމެންޓޭޝަން އެހީތެރިކަން ސްޓޭކް އޮވަރފްލޯ (ޓެގް ކުރެވިފައިވާ bootstrap-5) އިން ލިބިދާނެއެވެ.
  • ޑިވެލޮޕަރުން އެންމެ ގިނައިން ހޯދުމަށްޓަކައި npmbootstrap ނުވަތަ އެފަދަ ޑެލިވަރީ މެކޭނިޒަމްތަކެއް މެދުވެރިކޮށް ޑިސްޓްރިބިއުޓް ކުރާއިރު ބޫޓްސްޓްރެޕްގެ ފަންކްޝަނަލިޓީ ބަދަލުކުރާ ނުވަތަ އިތުރުކުރާ ޕެކޭޖްތަކުގައި ކީވޯޑް ބޭނުންކުރަންވާނެއެވެ .

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