ކޮންޓެއިނަރުތައް
ކޮންޓެއިނަރަކީ ދީފައިވާ ޑިވައިސްއެއް ނުވަތަ ވިއުޕޯޓެއްގެ ތެރޭގައި ތިބާގެ ކޮންޓެންޓް ހިމެނޭ، ޕެޑްކޮށް، އެލައިން ކުރާ ބޫޓްސްޓްރެޕްގެ އަސާސީ ބިލްޑިންގ ބްލޮކެކެވެ.
އެމީހުން މަސައްކަތްކުރާ ގޮތް
ކޮންޓެއިނަރަކީ ބޫޓްސްޓްރެޕްގައި ހިމެނޭ އެންމެ އަސާސީ ލޭއައުޓް އެލިމެންޓް ކަމަށާއި އަޅުގަނޑުމެންގެ ޑިފޯލްޓް ގްރިޑް ސިސްޓަމް ބޭނުންކުރާއިރު ބޭނުންވާ އެއްޗެކެވެ . ކޮންޓެއިނަރުތައް ބޭނުންކުރަނީ އެތަކެތީގެ ތެރޭގައި ހުންނަ ކޮންޓެންޓް ހިފެހެއްޓުމަށާއި، ޕެޑްކުރުމަށާއި، (ބައެއް ފަހަރު) ސެންޓަރ ކުރުމަށެވެ. ކޮންޓެއިނަރުތައް ނެސްޓް ކުރެވޭއިރު ، ގިނަ ލޭއައުޓްތަކުގައި ނެސްޓް ކޮންޓެއިނަރެއް ބޭނުން ނުވާނެއެވެ.
ބޫޓްސްޓްރެޕް އަށް ތަފާތު ތިން ކޮންޓެއިނަރެއް ލިބެ އެވެ:
.container
max-width
, ކޮންމެ ރެސްޕޮންސިވް ބްރޭކްޕޮއިންޓެއްގައި ވެސް ސެޓް ކުރާ އެއްޗެކެވެ.container-fluid
, އެއީwidth: 100%
ހުރިހާ ބްރޭކްޕޮއިންޓެއްގައި ވެސް އޮންނަ އެއްޗެކެވެ.container-{breakpoint}
، އެއީwidth: 100%
ކަނޑައެޅިފައިވާ ބްރޭކްޕޮއިންޓާ ހަމައަށް
ތިރީގައިވާ ތާވަލުން ފެންނަނީ ކޮންމެ ކޮންޓެއިނަރެއް max-width
އަސްލު ކޮންޓެއިނަރާއި އަޅާކިޔާ .container
ގޮތާއި .container-fluid
ކޮންމެ ބްރޭކްޕޮއިންޓެއް ހުރަސްކޮށް ދައްކާ ގޮތެވެ.
އެކަންކަން ޢަމަލީ ގޮތުން ފެނި އަޅުގަނޑުމެންގެ ގްރިޑް މިސާލުގައި އެތަކެތި އަޅާކިޔުން .
އިތުރަށް ކުޑަ <576px |
ކުޑަ ≥576px އެވެ |
މީޑިއަމް ≥768px އެވެ |
ބޮޑު ≥992px އެވެ |
އެކްސް-ލާޖް ≥1200px |
XX- ބޮޑު ≥1400px |
|
---|---|---|---|---|---|---|
.container |
100% | 540ޕީއެކްސް އެވެ | 720ޕީއެކްސް އެވެ | 960ޕީއެކްސް އެވެ | 1140ޕީއެކްސް އެވެ | 1320ޕީއެކްސް އެވެ |
.container-sm |
100% | 540ޕީއެކްސް އެވެ | 720ޕީއެކްސް އެވެ | 960ޕީއެކްސް އެވެ | 1140ޕީއެކްސް އެވެ | 1320ޕީއެކްސް އެވެ |
.container-md |
100% | 100% | 720ޕީއެކްސް އެވެ | 960ޕީއެކްސް އެވެ | 1140ޕީއެކްސް އެވެ | 1320ޕީއެކްސް އެވެ |
.container-lg |
100% | 100% | 100% | 960ޕީއެކްސް އެވެ | 1140ޕީއެކްސް އެވެ | 1320ޕީއެކްސް އެވެ |
.container-xl |
100% | 100% | 100% | 100% | 1140ޕީއެކްސް އެވެ | 1320ޕީއެކްސް އެވެ |
.container-xxl |
100% | 100% | 100% | 100% | 100% | 1320ޕީއެކްސް އެވެ |
.container-fluid |
100% | 100% | 100% | 100% | 100% | 100% |
ޑިފޯލްޓް ކޮންޓެއިނަރ
އަޅުގަނޑުމެންގެ ޑިފޯލްޓް .container
ކްލާހަކީ ރެސްޕޮންސިވް، ފިކްސްޑް ވިޑްތް ކޮންޓެއިނަރެއް، މާނައަކީ max-width
ކޮންމެ ބްރޭކްޕޮއިންޓެއްގައި އޭގެ ބަދަލުތަކެވެ.
<div class="container">
<!-- Content here -->
</div>
ރެސްޕޮންސިވް ކޮންޓެއިނަރުތައް
ރެސްޕޮންސިވް ކޮންޓެއިނަރސް އިން ކަނޑައެޅިފައިވާ ބްރޭކްޕޮއިންޓަށް ވާސިލްވާންދެން %100 ފުޅާ ކްލާހެއް ކަނޑައެޅުމުގެ ފުރުސަތު ލިބިގެންދާއިރު، އޭގެ ފަހުން އަޅުގަނޑުމެން max-width
މަތީގައިވާ ކޮންމެ ބްރޭކްޕޮއިންޓަކަށް s ޖަހަމެވެ. މިސާލަކަށް، ބްރޭކްޕޮއިންޓަށް ވާސިލްވާންދެން .container-sm
ފެށުމަށް %100 ފުޅާވެފައި ، އެތަނުގައި , , , އަދި sm
އިން ސްކޭލް އަޕް ވާނެއެވެ .md
lg
xl
xxl
<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();
}
އަޅުގަނޑުމެންގެ ސާސް މެޕްތަކާއި ވެރިއޭބަލްތައް ބަދަލުކުރާނެ ގޮތުގެ އިތުރު މަޢުލޫމާތާއި މިސާލުތަކަށް، ގްރިޑް ޑޮކިއުމަންޓޭޝަންގެ ސާސް ބަޔަށް ރިއާޔަތް ކުރައްވާށެވެ .