ވަރުގަދަ، ފުޅާކުރެވޭ، އަދި ފީޗާ ޕެކްޑް ފްރަންޓެންޑް ޓޫލްކިޓެކެވެ. ސާސް އިން ބިލްޑްކޮށް ކަސްޓަމައިޒްކޮށް، ޕްރީބިލްޓް ގްރިޑް ސިސްޓަމާއި ކޮމްޕޯނެންޓްތައް ބޭނުންކޮށް، ވަރުގަދަ ޖާވާސްކްރިޕްޓް ޕްލަގިންސްތަކާއެކު ޕްރޮޖެކްޓްތައް ދިރުވައި އާލާކުރުން.
މިވަގުތު 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 އަށް ވުރެ ގިނަ ގްލައިފް ހިމެނޭ އޮޕަން ސޯސް އެސްވީޖީ އައިކޮން ލައިބްރަރީއެއް ކަމަށާއި، ކޮންމެ ރިލީޒްއެއްގައި ވެސް އިތުރު ގްލައިފްތަކެއް އިތުރުކޮށްފައި ހުންނަ ކަމަށެވެ. އެއީ ޚުދު ބޫޓްސްޓްރެޕް ބޭނުންކުރިޔަސް ނުކުރިޔަސް ކޮންމެ ޕްރޮޖެކްޓެއްގައި ވެސް މަސައްކަތް ކުރުމަށް ފަރުމާކޮށްފައިވާ އެއްޗެހިތަކެކެވެ. އެއީ އެސްވީޖީ ނުވަތަ އައިކޮން ފޮންޓްގެ ގޮތުގައި ބޭނުންކުރުން- މިދެ އިޚްތިޔާރުން ވެސް ވެކްޓަރ ސްކޭލިންގ އާއި ސީއެސްއެސް މެދުވެރިކޮށް ފަސޭހައިން ކަސްޓަމައިޒް ކުރެވޭނެއެވެ.
ރަސްމީ ބޫޓްސްޓްރެޕް ތީމްސް މާކެޓްޕްލޭސް އިން ޕްރީމިއަމް ތީމްތަކާއެކު ބޫޓްސްޓްރެޕް ދެން އޮތް ލެވެލްއަށް ގެންދާށެވެ . ތީމްތައް ބިލްޑްކޮށްފައިވަނީ ބޫޓްސްޓްރެޕްގައި އެމީހުންގެ އަމިއްލަ އެކްސްޓެންޑް ފްރޭމްވޯކްތަކެއްގެ ގޮތުގައި، އާ ކޮމްޕޯނެންޓްތަކާއި ޕްލަގިންސްތަކާއި، ޑޮކިއުމަންޓޭޝަންތަކާއި، ވަރުގަދަ ބިލްޑް ޓޫލްތަކުން މުއްސަނދިވެގެންނެވެ.
