ކޮންޓެއިނަރުތައް

އެމީހުން މަސައްކަތްކުރާ ގޮތް

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

ބޫޓްސްޓްރެޕް އަށް ތަފާތު ތިން ކޮންޓެއިނަރެއް ލިބެ އެވެ:

• .containermax-width, ކޮންމެ ރެސްޕޮންސިވް ބްރޭކްޕޮއިންޓެއްގައި ވެސް ސެޓް ކުރާ އެއްޗެކެވެ
• .container-{breakpoint}، އެއީ width: 100%ކަނޑައެޅިފައިވާ ބްރޭކްޕޮއިންޓާ ހަމައަށް
• .container-fluid, އެއީ width: 100%ހުރިހާ ބްރޭކްޕޮއިންޓެއްގައި ވެސް އޮންނަ އެއްޗެކެވެ

ތިރީގައިވާ ތާވަލުން ފެންނަނީ ކޮންމެ ކޮންޓެއިނަރެއް max-widthއަސްލު ކޮންޓެއިނަރާއި އަޅާކިޔާ .containerގޮތާއި .container-fluidކޮންމެ ބްރޭކްޕޮއިންޓެއް ހުރަސްކޮށް ދައްކާ ގޮތެވެ.

އެކަންކަން ޢަމަލީ ގޮތުން ފެނި އަޅުގަނޑުމެންގެ ގްރިޑް މިސާލުގައި އެތަކެތި އަޅާކިޔުން .

ޑިފޯލްޓް ކޮންޓެއިނަރ

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

<div class="container">
  <!-- Content here -->
</div>

ރެސްޕޮންސިވް ކޮންޓެއިނަރުތައް

ރެސްޕޮންސިވް ކޮންޓެއިނަރސް އިން ކަނޑައެޅިފައިވާ ބްރޭކްޕޮއިންޓަށް ވާސިލްވާންދެން %100 ފުޅާ ކްލާހެއް ކަނޑައެޅުމުގެ ފުރުސަތު ލިބިގެންދާއިރު، އޭގެ ފަހުން އަޅުގަނޑުމެން max-widthމަތީގައިވާ ކޮންމެ ބްރޭކްޕޮއިންޓަކަށް s ޖަހަމެވެ. މިސާލަކަށް، ބްރޭކްޕޮއިންޓަށް ވާސިލްވާންދެން .container-smފެށުމަށް %100 ފުޅާވެފައި ، އެތަނުގައި , , , އަދި smއިން ސްކޭލް އަޕް ވާނެއެވެ .mdlgxlxxl

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>

ފްލޫޑް ކޮންޓެއިނަރުތައް

.container-fluidވިއުޕޯޓްގެ މުޅި ފުޅާމިނުގައި ފުޅާކޮށްފައިވާ ފުލް ވިޑްތް ކޮންޓެއިނަރަކަށް ބޭނުން ކުރާށެވެ .

<div class="container-fluid">
  ...
</div>

ސާސް އެވެ

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

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

ސާސް ކަސްޓަމައިޒް ކުރުމުގެ އިތުރުން އަޅުގަނޑުމެންގެ ސާސް މިކްސިން އިން އަމިއްލައަށް ކޮންޓެއިނަރުތައް ވެސް އުފެއްދިދާނެ އެވެ.

// Source mixin
@mixin make-container($padding-x: $container-padding-x) {
  width: 100%;
  padding-right: $padding-x;
  padding-left: $padding-x;
  margin-right: auto;
  margin-left: auto;
}

// Usage
.custom-container {
  @include make-container();
}

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