ސީއެސްއެސް ވެރިއޭބަލްސް، ރެސްޕޮންސިވް އޮފްކެންވަސް، އާ ޔުޓިލިޓީސް، އަދި އެތައް ކަމެއް!

ބޫޓްސްޓްރެޕް އިން އަވަސް، ޖަވާބުދާރީވާ ސައިޓްތައް ބިނާކުރުން

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

npm i [email protected]

ޑޮކްސް ކިޔާށެވެ

މިވަގުތު v5.2.1 · ޑައުންލޯޑް · v4.6.x ޑޮކްސް · ހުރިހާ ރިލީޒްތަކެއް

ބޭނުން ގޮތަކަށް ފަށާށެވެ

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

އިންސްޓޯލްމަންޓް ޑޮކްސް ކިޔާށެވެ

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

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

npm install [email protected]

gem install bootstrap -v 5.2.1

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

ސީޑީއެން މެދުވެރިކޮށް ހިމަނާށެވެ

ހަމައެކަނި ބޫޓްސްޓްރެޕްގެ ކޮމްޕައިލް ކުރެވިފައިވާ ސީއެސްއެސް ނުވަތަ ޖޭއެސް ހިމަނަން ބޭނުންވާ ވަގުތުތަކުގައި، jsDelivr ބޭނުންކުރެވިދާނެއެވެ . See it in action with our simple quick start , ނުވަތަ ތިބާގެ ދެން އޮތް ޕްރޮޖެކްޓް ޖަމްޕްސްޓާޓް ކުރުމަށް މިސާލުތައް ބްރައުޒް ކުރާށެވެ . އަދި ޕޮޕަރ އާއި އަޅުގަނޑުމެންގެ ޖޭއެސް ވަކިވަކިން ހިމަނަން ވެސް އިޚްތިޔާރު ކުރެވޭނެއެވެ .

<!-- CSS only -->
<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">

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>

އަޅުގަނޑުމެންގެ ގެޓިންގ ސްޓާރޓްޑް ގައިޑްސް ކިޔައިބަލާށެވެ

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

ވެބްޕެކް އެވެ

ޕާރުސަލް

ވައިޓޭ އެވެ

ސާސް އާއި އެކު ހުރިހާ ކަމެއް ކަސްޓަމައިޒް ކޮށްލާށެވެ

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

ކަސްޓަމައިޒް ކުރުމާ ބެހޭ އިތުރު މައުލޫމާތު ހޯއްދަވާށެވެ

ބޫޓްސްޓްރެޕްގެ ހުރިހާ ސާސް އެއް ހިމަނާށެވެ

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

// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";

// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";

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

ބޭނުންވާ އެއްޗެއް ހިމަނާށެވެ

ބޫޓްސްޓްރެޕް ކަސްޓަމައިޒް ކުރުމަށް އެންމެ ފަސޭހަ ގޮތް- ހަމައެކަނި ބޭނުންވާ ސީއެސްއެސް ހިމަނާށެވެ.

// Functions first
@import "../node_modules/bootstrap/scss/functions";

// Variable overrides second
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";

// Required Bootstrap imports
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// Optional components
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/helpers";
@import "../node_modules/bootstrap/scss/utilities/api";

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

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

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

ސީއެސްއެސް ވެރިއޭބަލްތަކާ ބެހޭ އިތުރު މައުލޫމާތު ހޯއްދަވާށެވެ

ސީއެސްއެސް ވެރިއޭބަލްސް ބޭނުންކޮށްގެން

އަޅުގަނޑުމެންގެ ގްލޯބަލް :rootވެރިއޭބަލްތަކުގެ ތެރެއިން އެއްވެސް ވެރިއޭބަލްއެއް ބޭނުންކޮށްގެން އާ ސްޓައިލްތައް ލިޔެލާށެވެ. ސީއެސްއެސް ވެރިއޭބަލްތަކުގައި var(--bs-variableName)ސިންޓެކްސް ބޭނުންކުރާއިރު، ޗިލްޑްރަންސް އެލިމެންޓްތަކުން ވާރުތަކުރެވިދާނެއެވެ.

.component {
  color: var(--bs-gray-800);
  background-color: var(--bs-gray-100);
  border: 1px solid var(--bs-gray-200);
  border-radius: .25rem;
}

.component-header {
  color: var(--bs-purple);
}

ސީއެސްއެސް ވެރިއޭބަލްސް މެދުވެރިކޮށް ކަސްޓަމައިޒް ކުރުން

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

body {
  --bs-body-font-family: var(--bs-font-monospace);
  --bs-body-line-height: 1.4;
  --bs-body-bg: var(--bs-gray-100);
}

.table {
  --bs-table-color: var(--bs-gray-600);
  --bs-table-bg: var(--bs-gray-100);
  --bs-table-border-color: transparent;
}

ކޮމްޕޮނެންޓްސް، ޔުޓިލިޓީ އެޕީއައި އާއި ބައްދަލުކުރުން

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

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

އަވަހަށް ކޮމްޕޯނެންޓްތައް ކަސްޓަމައިޒް ކޮށްލާށެވެ

// Create and extend utilities with the Utility API

@import "bootstrap/scss/bootstrap";

$utilities: map-merge(
  $utilities,
  (
    "cursor": (
      property: cursor,
      class: cursor,
      responsive: true,
      values: auto pointer grab,
    )
  )
);

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

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

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

ޑޭޓާ އެޓްރިބިއުޓް އެޕީއައި

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

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Dropdown item</a></li>
    <li><a class="dropdown-item" href="#">Dropdown item</a></li>
    <li><a class="dropdown-item" href="#">Dropdown item</a></li>
  </ul>
</div>

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

ޕްލަގިންސްގެ ފުރިހަމަ ސެޓެއް

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

ބޫޓްސްޓްރެޕް އައިކޮންސް އިން ޕާސަނަލައިޒް ކޮށްލާށެވެ

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

ބޫޓްސްޓްރެޕް އައިކޮންސް ހޯދާށެވެ

ރަސްމީ ބޫޓްސްޓްރެޕް ތީމްސް އާއި އެކު އެއީ ތިމާގެ އެއްޗަކަށް ހަދާށެވެ

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

ބޫޓްސްޓްރެޕް ތީމްސް ބްރައުޒް ކުރާށެވެ

ބޫޓްސްޓްރެޕް އިން އަވަސް، ޖަވާބުދާރީވާ ސައިޓްތައް ބިނާކުރުން

ބޭނުން ގޮތަކަށް ފަށާށެވެ

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

ސީޑީއެން މެދުވެރިކޮށް ހިމަނާށެވެ

އަޅުގަނޑުމެންގެ ގެޓިންގ ސްޓާރޓްޑް ގައިޑްސް ކިޔައިބަލާށެވެ

ސާސް އާއި އެކު ހުރިހާ ކަމެއް ކަސްޓަމައިޒް ކޮށްލާށެވެ

ބޫޓްސްޓްރެޕްގެ ހުރިހާ ސާސް އެއް ހިމަނާށެވެ

ބޭނުންވާ އެއްޗެއް ހިމަނާށެވެ

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

ސީއެސްއެސް ވެރިއޭބަލްސް ބޭނުންކޮށްގެން

ސީއެސްއެސް ވެރިއޭބަލްސް މެދުވެރިކޮށް ކަސްޓަމައިޒް ކުރުން

ކޮމްޕޮނެންޓްސް، ޔުޓިލިޓީ އެޕީއައި އާއި ބައްދަލުކުރުން

އަވަހަށް ކޮމްޕޯނެންޓްތައް ކަސްޓަމައިޒް ކޮށްލާށެވެ

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

ޑޭޓާ އެޓްރިބިއުޓް އެޕީއައި

ޕްލަގިންސްގެ ފުރިހަމަ ސެޓެއް

އެލަރޓް

ގޮށް

ކެރޮސެލް އެވެ

ހޭނެތިގެން ވެއްޓުން

ޑްރޮޕްޑައުން

މޮޑަލް އެވެ

އޮފްކެންވަސް އެވެ

ޕޮޕޯވަރ އެވެ

ސްކްރޯލްސްޕީ އެވެ

ޓެބް

ޓޯސްޓް

ޓޫލްޓިޕް އެވެ

ބޫޓްސްޓްރެޕް އައިކޮންސް އިން ޕާސަނަލައިޒް ކޮށްލާށެވެ

ރަސްމީ ބޫޓްސްޓްރެޕް ތީމްސް އާއި އެކު އެއީ ތިމާގެ އެއްޗަކަށް ހަދާށެވެ