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

ތަޢާރަފު

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

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

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

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

ސީއެސްއެސް އެވެ

<link>އަޅުގަނޑުމެންގެ ސީއެސްއެސް ލޯޑް ކުރުމަށްޓަކައި ސްޓައިލްޝީޓް ތިބާގެ <head>ކުރިން އެހެން ހުރިހާ ސްޓައިލްޝީޓްތަކަށް ކޮޕީ-ޕޭސްޓް ކޮށްލާށެވެ .

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

ޖޭއެސް އެވެ

އަޅުގަނޑުމެންގެ ގިނަ ކޮމްޕޯނެންޓްތައް މަސައްކަތް ކުރުމަށް ޖާވާސްކްރިޕްޓް ބޭނުން ކުރަން ޖެހެއެވެ. ވަކިން ޚާއްޞަކޮށް، އެމީހުންނަށް ބޭނުންވަނީ އަޅުގަނޑުމެންގެ އަމިއްލަ ޖާވާސްކްރިޕްޓް ޕްލަގިންސް އާއި ޕޮޕަރ އެވެ. ތިރީގައިވާ އެއް <script>s ތިބާގެ ޞަފްޙާތަކުގެ ފަހުކޮޅު ކައިރީގައި، ބަންދުކުރާ </body>ޓެގްގެ ކުރިން، އެތަންތަން އެނެބަލް ކުރުމަށްޓަކައި ބަހައްޓާށެވެ.

ބައިވަރު

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

ވަކި

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

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

މޮޑިއުލްތަކެވެ

ބޭނުންކުރާނަމަ <script type="module">، އަޅުގަނޑުމެންގެ މޮޑިއުލްއެއްގެ ގޮތުގައި ބޫޓްސްޓްރެޕް ބޭނުންކުރާ ބަޔަށް ރިއާޔަތް ކުރައްވާށެވެ.

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

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

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

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

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

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

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

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

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

އެޗްޓީއެމްއެލް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 ފޮލޯ ކުރެވޭނެ އެވެ .