ꯌꯨꯇꯤꯂꯤꯇꯤ ꯑꯦ.ꯄꯤ.ꯑꯥꯏ
ꯌꯨꯇꯤꯂꯤꯇꯤ ꯑꯦ.ꯄꯤ.ꯑꯥꯏ.ꯅꯥ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯁꯦꯃꯒꯠꯅꯕꯥ ꯁꯥꯁꯇꯥ ꯌꯨꯝꯐꯝ ꯑꯣꯏꯕꯥ ꯈꯨꯠꯂꯥꯌ ꯑꯃꯅꯤ꯫
ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯑꯁꯤ ꯑꯩꯈꯣꯌꯒꯤ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯑꯦ.ꯄꯤ.ꯑꯥꯏ.ꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯁꯦꯃꯒꯠꯄꯅꯤ ꯑꯃꯁꯨꯡ ꯃꯁꯤ ꯁꯥꯁꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯤ ꯗꯤꯐꯣꯜꯇ ꯁꯦꯠ ꯑꯁꯤ ꯃꯣꯗꯤꯐꯥꯏ ꯇꯧꯅꯕꯥ ꯅꯠꯠꯔꯒꯥ ꯁꯥꯡꯗꯣꯛꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯒꯅꯤ꯫ ꯑꯩꯈꯣꯌꯒꯤ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯑꯦ.ꯄꯤ.ꯑꯥꯏ.ꯅꯥ ꯇꯣꯉꯥꯟ ꯇꯣꯉꯥꯅꯕꯥ ꯑꯣꯄꯁꯅꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯤ ꯏꯃꯨꯡꯁꯤꯡ ꯁꯦꯃꯒꯠꯅꯕꯥ ꯁꯥꯁ ꯃꯦꯞ ꯑꯃꯁꯨꯡ ꯐꯉ꯭ꯀꯁꯅꯁꯤꯡꯒꯤ ꯁꯤꯔꯤꯖ ꯑꯃꯗꯥ ꯌꯨꯝꯐꯝ ꯑꯣꯏꯕꯅꯤ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯁꯥꯁ ꯃꯦꯄꯁꯤꯡ ꯈꯪꯗ꯭ꯔꯕꯗꯤ, ꯍꯧꯗꯣꯛꯅꯕꯒꯤꯗꯃꯛ ꯑꯣꯐꯤꯁꯤꯑꯦꯜ ꯁꯥꯁ ꯗꯣꯀꯁꯤꯡꯗꯥ ꯄꯥꯕꯤꯌꯨ꯫
ꯃꯦꯞ ꯑꯗꯨꯗꯥ $utilities
ꯑꯩꯈꯣꯌꯒꯤ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯄꯨꯝꯅꯃꯛ ꯌꯥꯑꯣꯏ ꯑꯃꯁꯨꯡ ꯃꯇꯨꯡꯗꯥ ꯅꯍꯥꯛꯀꯤ ꯀꯁ꯭ꯇꯝ $utilities
ꯃꯦꯞ ꯑꯗꯨꯒꯥ ꯃꯔꯤ ꯂꯩꯅꯩ, ꯀꯔꯤꯒꯨꯝꯕꯥ ꯂꯩꯔꯕꯗꯤ꯫ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯃꯦꯞ ꯑꯗꯨꯗꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯑꯣꯄꯁꯅꯁꯤꯡ ꯑꯁꯤ ꯌꯥꯕꯥ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯒ꯭ꯔꯨꯄꯁꯤꯡꯒꯤ ꯀꯤ ꯇꯧꯔꯕꯥ ꯂꯤꯁ꯭ꯠ ꯑꯃꯥ ꯌꯥꯎꯏ:
ꯑꯄꯥꯝꯕ ꯈꯟꯅꯕ | ꯃꯈꯜ | ꯋꯥꯔꯣꯜ |
---|---|---|
property |
ꯃꯊꯧ ꯇꯥꯕ | ꯄ꯭ꯔꯣꯄꯔꯇꯤꯒꯤ ꯃꯃꯤꯡ, ꯃꯁꯤ ꯁ꯭ꯠꯔꯤꯡ ꯑꯃꯥ ꯅꯠꯠꯔꯒꯥ ꯁ꯭ꯠꯔꯤꯡꯁꯤꯡꯒꯤ ꯑꯦꯔꯦ ꯑꯃꯥ ꯑꯣꯏꯕꯥ ꯌꯥꯏ (ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯄꯦꯗꯤꯡ ꯅꯠꯠꯔꯒꯥ ꯃꯥꯔꯖꯤꯟ)꯫ |
values |
ꯃꯊꯧ ꯇꯥꯕ | ꯚꯦꯜꯌꯨꯁꯤꯡꯒꯤ ꯂꯤꯁ꯭ꯠ, ꯅꯠꯠꯔꯒꯥ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯀ꯭ꯂꯥꯁꯀꯤ ꯃꯃꯤꯡ ꯑꯗꯨ ꯚꯦꯜꯌꯨ ꯑꯗꯨꯒꯥ ꯃꯥꯟꯅꯅꯥ ꯂꯩꯕꯥ ꯄꯥꯝꯂꯕꯗꯤ ꯃꯦꯞ ꯑꯃꯥ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ null ꯃꯦꯞ ꯀꯤ ꯑꯣꯏꯅꯥ ꯁꯤꯖꯤꯟꯅꯔꯕꯗꯤ, ꯃꯁꯤ ꯀꯝꯄꯥꯏꯜ ꯇꯧꯗꯦ꯫ |
class |
ꯈꯟꯕ ꯌꯥꯕ | ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯄ꯭ꯔꯣꯄꯔꯇꯤ ꯑꯗꯨꯒꯥ ꯃꯥꯟꯅꯕꯥ ꯑꯣꯏꯍꯅꯕꯥ ꯄꯥꯃꯗ꯭ꯔꯕꯗꯤ ꯀ꯭ꯂꯥꯁꯀꯤ ꯃꯃꯤꯡꯒꯤꯗꯃꯛ ꯚꯦꯔꯤꯑꯦꯕꯜ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯀꯤ ꯑꯗꯨ ꯄꯤꯗ꯭ꯔꯕꯗꯤ class ꯑꯃꯁꯨꯡ property ꯀꯤ ꯑꯁꯤ ꯁ꯭ꯠꯔꯤꯡꯁꯤꯡꯒꯤ ꯑꯦꯔꯦ ꯑꯃꯅꯤ, ꯀ꯭ꯂꯥꯁꯀꯤ ꯃꯃꯤꯡ ꯑꯁꯤ property ꯑꯦꯔꯦ ꯑꯗꯨꯒꯤ ꯑꯍꯥꯅꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯣꯏꯒꯅꯤ꯫ |
state |
ꯈꯟꯕ ꯌꯥꯕ | ꯌꯨꯇꯤꯂꯤꯇꯤꯒꯤꯗꯃꯛꯇꯥ ꯖꯦꯅꯦꯔꯦꯠ ꯇꯧꯒꯗꯕꯥ :hover ꯅꯠꯠꯔꯒꯥ ꯖꯦꯅꯦꯔꯦꯠ ꯇꯧꯒꯗꯕꯥ ꯄ꯭ꯁꯨꯗꯣ-ꯀ꯭ꯂꯥꯁ ꯚꯦꯔꯤꯑꯦꯟꯇꯁꯤꯡꯒꯤ ꯂꯤꯁ꯭ꯠ꯫ :focus ꯗꯤꯐꯣꯜꯇ ꯚꯦꯜꯌꯨ ꯑꯃꯠꯇꯥ ꯂꯩꯇꯦ꯫ |
responsive |
ꯈꯟꯕ ꯌꯥꯕ | ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯁꯦꯃꯒꯠꯄꯥ ꯃꯊꯧ ꯇꯥꯔꯕꯗꯤ ꯇꯥꯀꯄꯥ ꯕꯨꯂꯦꯇꯤꯟ꯫ false ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ ꯄꯤꯕꯥ꯫ |
rfs |
ꯈꯟꯕ ꯌꯥꯕ | ꯐ꯭ꯂꯨꯏꯗ ꯔꯤꯁ꯭ꯀꯦꯂꯤꯡ ꯇꯧꯕꯥ ꯉꯃꯍꯟꯅꯕꯥ ꯕꯨꯂꯦꯇꯤꯟ꯫ ꯃꯁꯤꯅꯥ ꯀꯔꯝꯅꯥ ꯊꯕꯛ ꯇꯧꯕꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯈꯪꯅꯕꯒꯤꯗꯃꯛ ꯑꯥꯔ.ꯑꯦꯐ.ꯑꯦꯁ.ꯀꯤ ꯄꯦꯖꯗꯥ ꯌꯦꯡꯕꯤꯌꯨ꯫ false ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ ꯄꯤꯕꯥ꯫ |
print |
ꯈꯟꯕ ꯌꯥꯕ | ꯄ꯭ꯔꯤꯟꯇ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯁꯦꯃꯒꯠꯄꯥ ꯃꯊꯧ ꯇꯥꯔꯕꯗꯤ ꯇꯥꯀꯄꯥ ꯕꯨꯂꯦꯇꯤꯟ꯫ false ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ ꯄꯤꯕꯥ꯫ |
rtl |
ꯈꯟꯕ ꯌꯥꯕ | ꯌꯨꯇꯤꯂꯤꯇꯤ ꯑꯁꯤ 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
ꯀꯝꯄꯥꯏꯜ ꯇꯧꯔꯕꯥ CSSꯗꯥ ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯥ ꯀ꯭ꯂꯥꯁ ꯄ꯭ꯔꯤꯐꯤꯛꯁ ꯑꯗꯨ ꯍꯣꯡꯗꯣꯛꯅꯕꯥ ꯑꯣꯄꯁꯟ ꯑꯗꯨ ꯁꯤꯖꯤꯟꯅꯧ :
$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
ꯅꯍꯥꯛꯀꯤ ꯀꯝꯄꯥꯏꯜ ꯇꯧꯔꯕꯥ CSS ꯑꯗꯨꯗꯥ ꯐꯪꯒꯅꯤ꯫
ꯃꯁꯤꯡ ꯌꯥꯝꯂꯕꯥ ꯄ꯭ꯁꯨꯗꯣ-ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯃꯊꯧ ꯇꯥꯕꯔꯥ? ꯁ꯭ꯄꯦꯁ-ꯁꯦꯄꯥꯔꯦꯠ ꯇꯧꯔꯕꯥ ꯔꯥꯖ꯭ꯌꯁꯤꯡꯒꯤ ꯂꯤꯁ꯭ꯠ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯧ: 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
ꯅꯍꯥꯛꯅꯥ ꯁꯦꯝꯕꯥ CSS ꯑꯁꯤ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯁꯤꯒꯨꯝꯅꯥ ꯑꯣꯏꯒꯅꯤ:
.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 ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯃꯥꯡꯈꯤꯕꯥ, ꯅꯠꯠꯔꯒꯥ ꯑꯇꯣꯞꯄꯥ ꯅꯦꯃꯤꯡ ꯀꯅꯚꯦꯟꯁꯟ ꯑꯃꯗꯥ ꯁꯤꯖꯤꯟꯅꯈꯤꯕꯥ? ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯤ API ꯑꯁꯤ ꯑꯄꯤꯕꯥ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯑꯃꯒꯤ ꯔꯤꯖꯜꯇ ꯑꯗꯨ ꯑꯣꯚꯔꯔꯥꯏꯗ ꯇꯧꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯏ 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
ꯗꯥꯏꯔꯦꯛꯇꯣꯔꯤ .