ޔުޓިލިޓީ އެޕީއައި އެވެ
ޔުޓިލިޓީ އެޕީއައި އަކީ ޔުޓިލިޓީ ކްލާސްތައް އުފެއްދުމަށް ސާސް އަށް ބިނާކޮށް އުފައްދާފައިވާ ޓޫލެކެވެ.
ބޫޓްސްޓްރެޕް ޔުޓިލިޓީސް އުފައްދާފައިވަނީ އަޅުގަނޑުމެންގެ ޔުޓިލިޓީ އެޕީއައި އިން ކަމަށާއި، ސާސް މެދުވެރިކޮށް އަޅުގަނޑުމެންގެ ޑިފޯލްޓް ސެޓްގެ ޔުޓިލިޓީ ކްލާސްތައް ބަދަލުކުރުމަށް ނުވަތަ ދިގުކުރުމަށް ބޭނުންކުރެވިދާނެ ކަމަށެވެ. އަޅުގަނޑުމެންގެ ޔުޓިލިޓީ އެޕީއައި ބިނާވެފައިވަނީ ތަފާތު އޮޕްޝަންތަކާއެކު ކްލާސްތަކުގެ އާއިލާތައް އުފެއްދުމަށްޓަކައި ސާސް މެޕްތަކާއި ފަންކްޝަންތަކުގެ ސިލްސިލާއެއްގެ މައްޗަށެވެ. ސާސް މެޕްތަކަށް އަހުލުވެރި ނުވާނަމަ، ސާސްގެ ރަސްމީ ޑޮކްސް އަށް ކިޔައިގެން ފަށަން ޖެހެ އެވެ.
މި $utilities
މެޕްގައި އަޅުގަނޑުމެންގެ ހުރިހާ ޔުޓިލިޓީސްއެއް ހިމެނޭއިރު، ފަހުން ތިޔަބޭފުޅުންގެ ކަސްޓަމް $utilities
މެޕާ އެއްކޮށްލާނީ، އެތަނުގައި ހުރިނަމައެވެ. ޔުޓިލިޓީ މެޕްގައި ތިރީގައިވާ ގޮތްތައް ބަލައިގަންނަ ޔުޓިލިޓީ ގްރޫޕްތަކުގެ ކީޑް ލިސްޓެއް ހިމެނެއެވެ.
ގޮތް | ވައްތަރު | ތަފްޞީލު |
---|---|---|
property |
ބޭނުންވާ | ޕްރޮޕަޓީގެ ނަން، މިއީ ސްޓްރިންގް ނުވަތަ ސްޓްރިންގްސްގެ އެރޭއަކަށް ވެދާނެ (އެބަހީ، ހޮރައިޒޮންޓަލް ޕެޑިންގސް ނުވަތަ މާރޖިންސް) އެވެ. |
values |
ބޭނުންވާ | އަގުތަކުގެ ލިސްޓް، ނުވަތަ ކްލާސް ނަމާއި އަގު އެއްގޮތްވާން ބޭނުން ނުވާނަމަ މެޕެއް. null މެޕް ކީގެ ގޮތުގައި ބޭނުންކުރާނަމަ، އެއީ ކޮމްޕައިލް ނުކުރެވޭނެ އެއްޗެކެވެ . |
class |
އިޚްތިޔާރީ | ޕްރޮޕަޓީއާ އެއްގޮތަކަށް ވާކަށް ބޭނުން ނުވާނަމަ ކްލާސް ނަމަށް ވެރިއޭބަލް. ކީ ނުލިބިއްޖެނަމަ class އަދި property ކީ އަކީ ސްޓްރިންގްސްގެ އެރޭއެއް ކަމުގައި ވާނަމަ، ކްލާސް ނަމަކީ property އެރޭގެ ފުރަތަމަ އެލިމެންޓަކަށް ވާނެއެވެ. |
state |
އިޚްތިޔާރީ | ޔުޓިލިޓީއަށް ޖެނެރޭޓް ކުރަން ބޭނުންވާ :hover ނުވަތަ ޖެނެރޭޓް ކުރަން ބޭނުންވާ ސޫޑޯ ކްލާސް ވައްތަރުތަކުގެ ލިސްޓް . :focus ޑިފޯލްޓް ވެލިއުއެއް ނެތެވެ. |
responsive |
އިޚްތިޔާރީ | ރެސްޕޮންސިވް ކްލާސްތައް ޖެނެރޭޓް ކުރަން ޖެހޭތޯ ދައްކާ ބޫލިއަން. false ބައި ޑިފޯލްޓް ކޮށް. |
rfs |
އިޚްތިޔާރީ | ފްލޫޑް ރީސްކޭލިންގ ކުރެވޭނެ ގޮތް ހެދުމަށް ބޫލިއަން. މިކަން ކުރެވޭ ގޮތް ހޯދުމަށް އާރުއެފްއެސް ޕޭޖަށް ބަލާލާށެވެ . false ބައި ޑިފޯލްޓް ކޮށް. |
print |
އިޚްތިޔާރީ | ޕްރިންޓް ކްލާސްތައް ޖެނެރޭޓް ކުރަން ޖެހޭތޯ ދައްކާ ބޫލިއަން. false ބައި ޑިފޯލްޓް ކޮށް. |
rtl |
އިޚްތިޔާރީ | ޔުޓިލިޓީ އާރުޓީއެލްގައި ބަހައްޓަންވީތޯ ދައްކުވައިދޭ ބޫލިއަން. true ބައި ޑިފޯލްޓް ކޮށް. |
އެޕީއައި އިން ކިޔައިދިނެވެ
$utilities
އަޅުގަނޑުމެންގެ _utilities.scss
ސްޓައިލްޝީޓްގެ ތެރޭގައިވާ ވެރިއޭބަލްއަށް ހުރިހާ ޔުޓިލިޓީ ވެރިއޭބަލްތަކެއް އިތުރުކުރެވެއެވެ . ޔުޓިލިޓީސްގެ ކޮންމެ ގްރޫޕެއް ވެސް ފެންނަނީ މިގޮތަށެވެ.
$utilities: (
"opacity": (
property: opacity,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
އެއީ ތިރީގައިވާ ކަންކަން އައުޓްޕުޓް ކުރާ އެއްޗެކެވެ.
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }
ކަސްޓަމް ކްލާސް ޕްރިފިކްސް
class
ކޮމްޕައިލް ކުރެވިފައިވާ ސީއެސްއެސްގައި ބޭނުންކުރާ ކްލާސް ޕްރިފިކްސް ބަދަލުކުރުމަށް އޮޕްޝަން ބޭނުންކުރާށެވެ :
$utilities: (
"opacity": (
property: opacity,
class: o,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
އައުޓްޕުޓް:
.o-0 { opacity: 0; }
.o-25 { opacity: .25; }
.o-50 { opacity: .5; }
.o-75 { opacity: .75; }
.o-100 { opacity: 1; }
ދައުލަތްތަކެވެ
state
ސޫޑޯ ކްލާސް ވައްތަރުތައް އުފެއްދުމަށް އިޚްތިޔާރު ބޭނުންކުރާށެވެ . މިސާލަކަށް ސޫޑޯ ކްލާސްތަކަކީ :hover
އަދި :focus
. ސްޓޭޓްތަކުގެ ލިސްޓެއް ފޯރުކޮށްދިނުމުން، އެ ސޫޑޯ ކްލާހަށް ކްލާސް ނަންތައް އުފައްދައެވެ. މިސާލަކަށް ހޯވަރގައި އޮޕަސިޓީ ބަދަލުކުރުމަށްޓަކައި އެޑް ކޮށްލުމުން state: hover
ކޮމްޕައިލް .opacity-hover:hover
ކޮށްފައިވާ ސީއެސްއެސް އަށް ލިބޭނެއެވެ.
އެތައް ސޫޑޯ ކްލާހެއް ބޭނުންވޭތޯ؟ ޖާގަ ވަކިކޮށްފައިވާ ޙާލަތްތަކުގެ ލިސްޓެއް ބޭނުންކުރުން: state: hover focus
.
$utilities: (
"opacity": (
property: opacity,
class: opacity,
state: hover,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
އައުޓްޕުޓް:
.opacity-0-hover:hover { opacity: 0 !important; }
.opacity-25-hover:hover { opacity: .25 !important; }
.opacity-50-hover:hover { opacity: .5 !important; }
.opacity-75-hover:hover { opacity: .75 !important; }
.opacity-100-hover:hover { opacity: 1 !important; }
ރެސްޕޮންސިވް ޔުޓިލިޓީސް
ހުރިހާ ބްރޭކްޕޮއިންޓްތަކެއް ހުރަސްކޮށް responsive
ރެސްޕޮންސިވް ޔުޓިލިޓީސް (އެބަހީ، ) އުފެއްދުމަށްޓަކައި ބޫލިއަން އިތުރުކުރުން ..opacity-md-25
$utilities: (
"opacity": (
property: opacity,
responsive: true,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
އައުޓްޕުޓް:
.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: .25 !important; }
.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }
.opacity-100 { opacity: 1 !important; }
@media (min-width: 576px) {
.opacity-sm-0 { opacity: 0 !important; }
.opacity-sm-25 { opacity: .25 !important; }
.opacity-sm-50 { opacity: .5 !important; }
.opacity-sm-75 { opacity: .75 !important; }
.opacity-sm-100 { opacity: 1 !important; }
}
@media (min-width: 768px) {
.opacity-md-0 { opacity: 0 !important; }
.opacity-md-25 { opacity: .25 !important; }
.opacity-md-50 { opacity: .5 !important; }
.opacity-md-75 { opacity: .75 !important; }
.opacity-md-100 { opacity: 1 !important; }
}
@media (min-width: 992px) {
.opacity-lg-0 { opacity: 0 !important; }
.opacity-lg-25 { opacity: .25 !important; }
.opacity-lg-50 { opacity: .5 !important; }
.opacity-lg-75 { opacity: .75 !important; }
.opacity-lg-100 { opacity: 1 !important; }
}
@media (min-width: 1200px) {
.opacity-xl-0 { opacity: 0 !important; }
.opacity-xl-25 { opacity: .25 !important; }
.opacity-xl-50 { opacity: .5 !important; }
.opacity-xl-75 { opacity: .75 !important; }
.opacity-xl-100 { opacity: 1 !important; }
}
@media (min-width: 1400px) {
.opacity-xxl-0 { opacity: 0 !important; }
.opacity-xxl-25 { opacity: .25 !important; }
.opacity-xxl-50 { opacity: .5 !important; }
.opacity-xxl-75 { opacity: .75 !important; }
.opacity-xxl-100 { opacity: 1 !important; }
}
ޔުޓިލިޓީސް ބަދަލުކުރުން
އެއް ކީ ބޭނުންކޮށްގެން މިހާރު ހުރި ޔުޓިލިޓީތައް އޯވަރރައިޑް ކުރުން. މިސާލަކަށް، އިތުރު ރެސްޕޮންސިވް އޯވަރފްލޯ ޔުޓިލިޓީ ކްލާސްތައް ބޭނުންނަމަ، މިކަން ކުރެވިދާނެއެވެ:
$utilities: (
"overflow": (
responsive: true,
property: overflow,
values: visible hidden scroll auto,
),
);
ޕްރިންޓް ޔުޓިލިޓީސް
print
އަދި މި އޮޕްޝަން އެނެބަލް ކުރުމުން ޕްރިންޓް ކުރުމަށް ޔުޓިލިޓީ ކްލާސްތައް ވެސް އުފެދޭނެ ކަމަށާއި، އެއީ ހަމައެކަނި @media print { ... }
މީޑިއާ ކިއުއަރީގެ ތެރޭގައި އެޕްލައި ކުރެވޭ ކްލާސްތަކެކެވެ.
$utilities: (
"opacity": (
property: opacity,
print: true,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
އައުޓްޕުޓް:
.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: .25 !important; }
.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }
.opacity-100 { opacity: 1 !important; }
@media print {
.opacity-print-0 { opacity: 0 !important; }
.opacity-print-25 { opacity: .25 !important; }
.opacity-print-50 { opacity: .5 !important; }
.opacity-print-75 { opacity: .75 !important; }
.opacity-print-100 { opacity: 1 !important; }
}
މުހިންމުކަން
އެޕީއައި އިން އުފައްދާ ހުރިހާ ޔުޓިލިޓީތަކެއްގައި ހިމެނެނީ !important
އެމީހުން ގަސްތުކުރާ ގޮތަށް ކޮމްޕޯނެންޓްތަކާއި މޮޑިފައިއަރ ކްލާސްތައް އޯވަރރައިޑް ކުރާކަން ޔަގީންކުރުމަށެވެ. މި ސެޓިންގ ގްލޯބަލްކޮށް ޓޮގްލް ކުރެވޭނީ $enable-important-utilities
ވެރިއޭބަލް (ޑިފޯލްޓް ކޮށްގެން true
) އިންނެވެ.
އެޕީއައި ބޭނުންކޮށްގެންނެވެ
މިހާރު ޔުޓިލިޓީސް އެޕީއައި މަސައްކަތްކުރާ ގޮތަށް އަހުލުވެރިވެފައިވާތީ، އަމިއްލައަށް ކަސްޓަމް ކްލާސްތައް އިތުރުކޮށް އަޅުގަނޑުމެންގެ ޑިފޯލްޓް ޔުޓިލިޓީސް ބަދަލުކުރާނެ ގޮތް ދަސްކޮށްލާށެވެ.
ޔުޓިލިޓީސް އިތުރުކުރުން
$utilities
އާ ޔުޓިލިޓީސް ޑިފޯލްޓް މެޕަށް އިތުރުކުރެވޭނީ އެއް map-merge
. _utilities.scss
އަޅުގަނޑުމެންނަށް ބޭނުންވާ ސާސް ފައިލްތައް އަދި ފުރަތަމަ އިމްޕޯޓް ކުރެވޭތޯ ޔަޤީންކޮށް ، ދެން map-merge
ތިޔަބޭފުޅުންގެ އިތުރު ޔުޓިލިޓީސް އިތުރު ކުރުމަށް ބޭނުން ކުރައްވާށެވެ. މިސާލަކަށް cursor
ތިން އަގެއް ހުންނަ ރެސްޕޮންސިވް ޔުޓިލިޓީއެއް އިތުރުކުރާނެ ގޮތެވެ.
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities,
(
"cursor": (
property: cursor,
class: cursor,
responsive: true,
values: auto pointer grab,
)
)
);
ޔުޓިލިޓީސް ބަދަލުކުރުން
އަދި ފަންކްޝަންތަކާއެކު ޑިފޯލްޓް $utilities
މެޕްގައި މިހާރު ހުރި ޔުޓިލިޓީސް ބަދަލުކުރުން . ތިރީގައިވާ މިސާލުގައި އަޅުގަނޑުމެން މި އިތުރު އަގެއް އިތުރުކުރަމުން މިދަނީ ޔުޓިލިޓީސްތަކަށެވެ. އިނިޝިއަލް އިން ފެށިގެން ބަދަލުކުރަން ބޭނުންވާ ޔުޓިލިޓީއެއް ކަނޑައަޅާށެވެ. އެތަނުން ޔުޓިލިޓީގެ އޮޕްޝަންތަކާއި ވެލިއުތަކަށް އެކްސެސްކޮށް ބަދަލުކުރުމަށްޓަކައި ނެސްޓްކޮށްފައިވާ މެޕް އާއި އެކު ގެނެވޭނެއެވެ.map-get
map-merge
width
map-merge
"width"
map-get
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities,
(
"width": map-merge(
map-get($utilities, "width"),
(
values: map-merge(
map-get(map-get($utilities, "width"), "values"),
(10: 10%),
),
),
),
)
);
ރެސްޕޮންސިވް އެނެބަލް ކުރުން
މިހާރު ޑިފޯލްޓްކޮށް ރެސްޕޮންސިވް ނުވާ ޔުޓިލިޓީތަކުގެ ސެޓަކަށް ރެސްޕޮންސިވް ކްލާސްތައް އެނެބަލް ކުރެވިދާނެއެވެ. މިސާލަކަށް border
ކްލާސްތައް ރައްދުދޭ ގޮތަށް ހެދުމަށްޓަކައި:
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities, (
"border": map-merge(
map-get($utilities, "border"),
( responsive: true ),
),
)
);
.border
މިއީ މިހާރު ކޮންމެ ބްރޭކްޕޮއިންޓެއްގެ އަދި .border-0
ކޮންމެ ބްރޭކްޕޮއިންޓަކަށް ރެސްޕޮންސިވް ވެރިއޭޝަންތައް އުފެދޭނެ ކަމެކެވެ. ތިބާ އުފައްދާ ސީއެސްއެސް ހުންނާނީ މިގޮތަށެވެ:
.border { ... }
.border-0 { ... }
@media (min-width: 576px) {
.border-sm { ... }
.border-sm-0 { ... }
}
@media (min-width: 768px) {
.border-md { ... }
.border-md-0 { ... }
}
@media (min-width: 992px) {
.border-lg { ... }
.border-lg-0 { ... }
}
@media (min-width: 1200px) {
.border-xl { ... }
.border-xl-0 { ... }
}
@media (min-width: 1400px) {
.border-xxl { ... }
.border-xxl-0 { ... }
}
ޔުޓިލިޓީތަކަށް ނަން ބަދަލުކުރުން
ގެއްލިފައިވާ v4 ޔުޓިލިޓީސް، ނުވަތަ އެހެން ނަން ދިނުމުގެ ކޮންވެންޝަނަކަށް ހޭނިފައިވޭތޯ؟ ޔުޓިލިޓީސް އެޕީއައި ބޭނުންކޮށްގެން class
ދީފައިވާ ޔުޓިލިޓީއެއްގެ ނަތީޖާ އޯވަރރައިޑް ކުރެވިދާނެ-މިސާލަކަށް، .ms-*
ޔުޓިލިޓީސްގެ ނަން މުސްކުޅިއަށް ބަދަލުކުރުން .ml-*
:
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities, (
"margin-start": map-merge(
map-get($utilities, "margin-start"),
( class: ml ),
),
)
);
ޔުޓިލިޓީސް ނައްތާލުން
ގްރޫޕް ކީ އަށް ސެޓްކޮށްގެން ޑިފޯލްޓް ޔުޓިލިޓީތަކުގެ ތެރެއިން އެއްވެސް ޔުޓިލިޓީއެއް ނައްތާލާށެވެ null
. މިސާލަކަށް އަޅުގަނޑުމެންގެ ހުރިހާ width
ޔުޓިލިޓީއެއް ނައްތާލުމަށްޓަކައި، އެއް އުފައްދައި، އެތެރެއަށް $utilities
map-merge
އިތުރުކުރުން "width": null
.
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities,
(
"width": null
)
);
އާރުޓީއެލްގައި ހުންނަ ޔުޓިލިޓީ ނައްތާލުން
ބައެއް އެޖް ކޭސްތަކުން އާރްޓީއެލް ސްޓައިލިންގ އަށް އުނދަގޫ ވެއެވެ , ފަދައިން ޢަރަބި ބަހުން ލައިން ބްރޭކް ވުން. މިގޮތުން ޔުޓިލިޓީސް އާރުޓީއެލް އައުޓްޕުޓުން ޑްރޮޕް ކުރެވޭނީ rtl
އޮޕްޝަން އަށް ސެޓްކޮށްގެން false
:
$utilities: (
"word-wrap": (
property: word-wrap word-break,
class: text,
values: (break: break-word),
rtl: false
),
);
އައުޓްޕުޓް:
/* rtl:begin:remove */
.text-break {
word-wrap: break-word !important;
word-break: break-word !important;
}
/* rtl:end:remove */
މިއީ އާރްޓީއެލްގައި އެއްވެސް އެއްޗެއް އައުޓްޕުޓް ނުކުރާ ކަމެއް، އާރްޓީއެލްސީއެސްއެސް ކޮންޓްރޯލް remove
ޑިރެކްޓިވް ގެ ސަބަބުން .