ތަޢާރަފު

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

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

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

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

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

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

ޖޭއެސް އެވެ

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

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

ބައިވަރު

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

ވަކި

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

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

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

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

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

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

ތިމާގެ ޕޭޖްތައް އެންމެ ފަހުގެ ޑިޒައިން އަދި ޑިވެލޮޕްމަންޓް ސްޓޭންޑަޑްތަކާއެކު ސެޓްއަޕްކޮށްފައި ހުރިކަން ޔަގީން ކުރައްވާށެވެ. މާނައަކީ އެޗްޓީއެމްއެލް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-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

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

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

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" 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.

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

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

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

މުޖުތަމަޢު

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

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

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

ސީއެސްޕީތަކާއި އެންބެޑެޑް އެސްވީޖީތަކެވެ

ބޫޓްސްޓްރެޕްގެ ބައެއް ކޮމްޕޯނެންޓްތަކުގައި އަޅުގަނޑުމެންގެ ސީއެސްއެސްގައި އެންބެޑެޑް އެސްވީޖީތައް ހިމެނޭއިރު، ބްރައުޒާތަކާއި ޑިވައިސްތަކުގައި ކޮމްޕޯނެންޓްތައް އެއްގޮތަކަށް އަދި ފަސޭހައިން ސްޓައިލް ކުރެވޭނެއެވެ. މާ ހަރުކަށި ސީއެސްޕީ ކޮންފިގްރޭޝަންތަކެއް ހުންނަ އޯގަނައިޒޭޝަންތަކަށް , އަޅުގަނޑުމެންގެ އެންބެޑެޑް އެސްވީޖީތަކުގެ ހުރިހާ އިންސްޓޭންސްތަކެއް (އެ ހުރިހާ އިންސްޓޭންސްތަކެއް ވެސް އެޕްލައި background-imageކުރެވޭނީ ) ލިޔެކިޔުންތައް ކޮށްފައި ވާތީ، ތިޔަބޭފުޅުންގެ އިޚްތިޔާރުތައް އިތުރަށް ފުރިހަމައަށް މުރާޖަޢާ ކުރެވޭނެއެވެ.

ބަންދު ބަޓަން (އެލާޓްތަކާއި މޮޑަލްތަކުގައި ބޭނުންކުރާ)
ކަސްޓަމް ޗެކްބޮކްސްތަކާއި ރޭޑިއޯ ބަޓަންތަކެވެ
ފޯމް ބަދަލުވެއެވެ
ފޯމް ވެލިޑޭޝަން އައިކޮންސް
ކަސްޓަމް ސެލެކްޓް މެނޫތައް
ކެރޮސެލް ކޮންޓްރޯލް ކުރެއެވެ
ނަވްބާރ ޓޮގްލް ބަޓަންސް

Based on community conversation , އަމިއްލަ ކޯޑްބޭސްގައި މިކަން ޙައްލުކުރުމަށް ބައެއް ގޮތްތަކުގެ ތެރޭގައި ޔޫ.އާރ.އެލްތައް ލޯކަލް ގޮތުން ހޯސްޓްކޮށްފައިވާ އެސެޓްތަކުން ބަދަލުކުރުމާއި، ތަސްވީރުތައް ނައްތާލުމާއި، އިންލައިން ތަސްވީރުތައް ބޭނުންކުރުމާއި (ހުރިހާ ކޮމްޕޯނެންޓްތަކެއްގައި ކުރެވޭނެ ކަމެއް ނޫން)، އަދި ސީއެސްޕީ ބަދަލުކުރުން ހިމެނެއެވެ. އަޅުގަނޑުމެންގެ ލަފާއަކީ، އަމިއްލައަށް ސަލާމަތީ ސިޔާސަތުތައް ފަރުވާތެރިކަމާއެކު މުރާޖަޢާކޮށް، ކުރިއަށް ދިއުމަށް އެންމެ ރަނގަޅު މަގެއް ނިންމުމަކީ، ބޭނުންވެއްޖެނަމަ.