Source

ތަޢާރަފު

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

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

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

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

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

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

ޖޭއެސް އެވެ

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

އަޅުގަނޑުމެން ބޭނުންކުރަނީ ޖީކުއަރީގެ ސްލިމް ބިލްޑް , އެކަމަކު ފުލް ވާޝަން ވެސް ސަޕޯޓް ކުރެވެއެވެ.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

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

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

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

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

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

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

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

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

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 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, shrink-to-fit=no">

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

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

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

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

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

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

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

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

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

މުޖުތަމަޢު

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

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

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