ޔުޓިލިޓީ އެޕީއައި އެވެ
ޔުޓިލިޓީ އެޕީއައި އަކީ ޔުޓިލިޓީ ކްލާސްތައް އުފެއްދުމަށް ސާސް އަށް ބިނާކޮށް އުފައްދާފައިވާ ޓޫލެކެވެ.
ބޫޓްސްޓްރެޕް ޔުޓިލިޓީސް އުފައްދާފައިވަނީ އަޅުގަނޑުމެންގެ ޔުޓިލިޓީ އެޕީއައި އާއި އެކު ކަމަށާއި، ސާސް މެދުވެރިކޮށް އަޅުގަނޑުމެންގެ ޑިފޯލްޓް ސެޓްގެ ޔުޓިލިޓީ ކްލާސްތައް ބަދަލުކުރުމަށް ނުވަތަ ދިގުކުރުމަށް ބޭނުންކުރެވިދާނެ ކަމަށެވެ. އަޅުގަނޑުމެންގެ ޔުޓިލިޓީ އެޕީއައި ބިނާވެފައިވަނީ ތަފާތު އޮޕްޝަންތަކާއެކު ކްލާސްތަކުގެ އާއިލާތައް އުފެއްދުމަށްޓަކައި ސާސް މެޕްތަކާއި ފަންކްޝަންތަކުގެ ސިލްސިލާއެއްގެ މައްޗަށެވެ. ސާސް މެޕްތަކަށް އަހުލުވެރި ނުވާނަމަ، ސާސްގެ ރަސްމީ ޑޮކްސް އަށް ކިޔައިގެން ފަށަން ޖެހެ އެވެ.
މި $utilities
މެޕްގައި އަޅުގަނޑުމެންގެ ހުރިހާ ޔުޓިލިޓީސްއެއް ހިމެނޭއިރު، ފަހުން ތިޔަބޭފުޅުންގެ ކަސްޓަމް $utilities
މެޕާ އެއްކޮށްލާނީ، އެތަނުގައި ހުރިނަމައެވެ. ޔުޓިލިޓީ މެޕްގައި ތިރީގައިވާ ގޮތްތައް ބަލައިގަންނަ ޔުޓިލިޓީ ގްރޫޕްތަކުގެ ކީޑް ލިސްޓެއް ހިމެނެއެވެ.
ގޮތް | ވައްތަރު | ޑިފޯލްޓް ވެލިއު | ތަފްޞީލު |
---|---|---|---|
property |
ބޭނުންވާ | – | ޕްރޮޕަޓީގެ ނަން، މިއީ ސްޓްރިންގް ނުވަތަ ސްޓްރިންގްސްގެ އެރޭއަކަށް ވެދާނެ (އެބަހީ، ހޮރައިޒޮންޓަލް ޕެޑިންގސް ނުވަތަ މާރޖިންސް) އެވެ. |
values |
ބޭނުންވާ | – | އަގުތަކުގެ ލިސްޓް، ނުވަތަ ކްލާސް ނަމާއި އަގު އެއްގޮތްވާން ބޭނުން ނުވާނަމަ މެޕެއް. null މެޕް ކީގެ ގޮތުގައި ބޭނުންކުރާނަމަ، އެއީ ކޮމްޕައިލް ނުކުރެވޭނެ އެއްޗެކެވެ . |
class |
އިޚްތިޔާރީ | null އެވެ | ޖެނެރޭޓް ކުރެވޭ ކްލާހުގެ ނަން. ފޯރުކޮށްދީފައި ނުވާނަމަ އަދި property ސްޓްރިންގްތަކުގެ އެރޭއެއްނަމަ، އެރޭގެ class ފުރަތަމަ އެލިމެންޓަށް ޑިފޯލްޓް ވާނެއެވެ property . |
css-var |
އިޚްތިޔާރީ | false |
ސީއެސްއެސް އުސޫލުތަކުގެ ބަދަލުގައި ސީއެސްއެސް ވެރިއޭބަލްތައް އުފެއްދުމަށް ބޫލިއަން. |
local-vars |
އިޚްތިޔާރީ | null އެވެ | ސީއެސްއެސް އުސޫލުތަކުގެ އިތުރުން ޖެނެރޭޓް ކުރަންޖެހޭ ލޯކަލް ސީއެސްއެސް ވެރިއޭބަލްތަކުގެ މެޕް. |
state |
އިޚްތިޔާރީ | null އެވެ | އުފައްދަން ބޭނުންވާ ސޫޑޯ ކްލާސް ވައްތަރުތަކުގެ ލިސްޓް (އެބަހީ، :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; }
މުދާ
ކޮންމެ ޔުޓިލިޓީއަކަށް ބޭނުންވާ property
ކީ ސެޓް ކުރަން ޖެހޭއިރު، އޭގައި ސައްހަ ސީއެސްއެސް ޕްރޮޕަޓީއެއް ހިމެނިފައި އޮންނަން ޖެހެއެވެ. މި ޕްރޮޕަޓީ ބޭނުންކުރަނީ ޖެނެރޭޓް ކުރެވިފައިވާ ޔުޓިލިޓީގެ ރޫލްސެޓްގައެވެ. ކީ class
ދޫކޮށްލުމުން، ޑިފޯލްޓް ކްލާސް ނަމުގެ ގޮތުގައި ވެސް ޚިދުމަތް ކުރެއެވެ. text-decoration
ޔުޓިލިޓީއަށް ވިސްނާލަމާ ހިނގާށެވެ :
$utilities: (
"text-decoration": (
property: text-decoration,
values: none underline line-through
)
);
އައުޓްޕުޓް:
.text-decoration-none { text-decoration: none !important; }
.text-decoration-underline { text-decoration: underline !important; }
.text-decoration-line-through { text-decoration: line-through !important; }
އަގުތައް
ޖެނެރޭޓް ކުރެވޭ ކްލާސް ނަންތަކާއި އުސޫލުތަކުގައި ކަނޑައެޅިފައިވާ އެއްޗަކަށް ބޭނުންކުރަންޖެހޭނީ values
ކޮން އަގުތަކެއްކަން ކަނޑައެޅުމަށް ކީ ބޭނުންކުރާށެވެ . property
ލިސްޓެއް ނުވަތަ މެޕަކަށް ވެދާނެ (ޔުޓިލިޓީސްގައި ނުވަތަ ސާސް ވެރިއޭބަލްއެއްގައި ސެޓްކޮށްފައި) ވެދާނެ އެވެ.
ލިސްޓެއްގެ ގޮތުގައި، text-decoration
ޔުޓިލިޓީސް އާއި އެކު ފަދައިން :
values: none underline line-through
މެޕެއްގެ ގޮތުގައި، opacity
ޔުޓިލިޓީސް އާއި އެކު ފަދައިން :
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
position
އަޅުގަނޑުމެންގެ ޔުޓިލިޓީސްގައިވާ ފަދައިން، ލިސްޓް ނުވަތަ މެޕް ސެޓްކުރާ ސާސް ވެރިއޭބަލްއެއްގެ ގޮތުގައި :
values: $position-values
ކްލާސް
class
ކޮމްޕައިލް ކުރެވިފައިވާ ސީއެސްއެސްގައި ބޭނުންކުރާ ކްލާސް ޕްރިފިކްސް ބަދަލުކުރުމަށް އޮޕްޝަން ބޭނުންކުރާށެވެ . މިސާލަކަށް އިން އަށް ބަދަލު .opacity-*
ކުރުމަށް .o-*
:
$utilities: (
"opacity": (
property: opacity,
class: o,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
އައުޓްޕުޓް:
.o-0 { opacity: 0 !important; }
.o-25 { opacity: .25 !important; }
.o-50 { opacity: .5 !important; }
.o-75 { opacity: .75 !important; }
.o-100 { opacity: 1 !important; }
ސީއެސްއެސް ވެރިއޭބަލް ޔުޓިލިޓީސް
css-var
ބޫލިއަން އޮޕްޝަން އަށް ސެޓްކޮށްލުމުން އެޕީއައި އިން އާންމު އުސޫލުތަކުގެ true
ބަދަލުގައި ދީފައިވާ ސެލެކްޓަރަށް ލޯކަލް ސީއެސްއެސް ވެރިއޭބަލްތައް އުފައްދާނެއެވެ . އަޅުގަނޑުމެންގެ ޔުޓިލިޓީސް property: value
އަށް ވިސްނާލަމާ ހިނގާށެވެ :.text-opacity-*
$utilities: (
"text-opacity": (
css-var: true,
class: text-opacity,
values: (
25: .25,
50: .5,
75: .75,
100: 1
)
),
);
އައުޓްޕުޓް:
.text-opacity-25 { --bs-text-opacity: .25; }
.text-opacity-50 { --bs-text-opacity: .5; }
.text-opacity-75 { --bs-text-opacity: .75; }
.text-opacity-100 { --bs-text-opacity: 1; }
ލޯކަލް ސީއެސްއެސް ވެރިއޭބަލްސް
local-vars
ޔުޓިލިޓީ ކްލާސްގެ ރޫލްސެޓްގެ ތެރޭގައި ލޯކަލް ސީއެސްއެސް ވެރިއޭބަލްތައް އުފައްދާނެ ސާސް މެޕެއް ކަނޑައެޅުމަށް އިޚްތިޔާރު ބޭނުންކުރާށެވެ . ޖެނެރޭޓް ކުރެވޭ ސީއެސްއެސް އުސޫލުތަކުގައި އެ ލޯކަލް ސީއެސްއެސް ވެރިއޭބަލްތައް ކޮންސިއުމް ކުރުމަށް އިތުރު މަސައްކަތްތަކެއް ކުރަން ޖެހިދާނެކަން ފާހަގަކުރަމެވެ. މިސާލަކަށް އަޅުގަނޑުމެންގެ .bg-*
ޔުޓިލިޓީސް އަށް ބަލާލާށެވެ:
$utilities: (
"background-color": (
property: background-color,
class: bg,
local-vars: (
"bg-opacity": 1
),
values: map-merge(
$utilities-bg-colors,
(
"transparent": transparent
)
)
)
);
އައުޓްޕުޓް:
.bg-primary {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
}
ދައުލަތްތަކެވެ
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; }
}
ޕްރިންޓް ކުރާށެވެ
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: (
"overflow": (
responsive: true,
property: overflow,
values: visible hidden scroll auto,
),
);
ޔުޓިލިޓީސް އިތުރުކުރުން
$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
ޑިރެކްޓިވް ގެ ސަބަބުން .