ಅಂತರ
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಒಂದು ಅಂಶದ ನೋಟವನ್ನು ಮಾರ್ಪಡಿಸಲು ವ್ಯಾಪಕ ಶ್ರೇಣಿಯ ಶಾರ್ಟ್ಹ್ಯಾಂಡ್ ರೆಸ್ಪಾನ್ಸಿವ್ ಮಾರ್ಜಿನ್, ಪ್ಯಾಡಿಂಗ್ ಮತ್ತು ಗ್ಯಾಪ್ ಯುಟಿಲಿಟಿ ತರಗತಿಗಳನ್ನು ಒಳಗೊಂಡಿದೆ.
ಅಂಚು ಮತ್ತು ಪ್ಯಾಡಿಂಗ್
ಒಂದು ಅಂಶ ಅಥವಾ ಅದರ ಬದಿಗಳ ಉಪವಿಭಾಗಕ್ಕೆ ಸಂಕ್ಷಿಪ್ತ ವರ್ಗಗಳೊಂದಿಗೆ ಸ್ಪಂದಿಸುವ-ಸ್ನೇಹಿ margin
ಅಥವಾ ಮೌಲ್ಯಗಳನ್ನು ನಿಯೋಜಿಸಿ. padding
ವೈಯಕ್ತಿಕ ಗುಣಲಕ್ಷಣಗಳು, ಎಲ್ಲಾ ಗುಣಲಕ್ಷಣಗಳು ಮತ್ತು ಲಂಬ ಮತ್ತು ಅಡ್ಡ ಗುಣಲಕ್ಷಣಗಳಿಗೆ ಬೆಂಬಲವನ್ನು ಒಳಗೊಂಡಿದೆ. .25rem
ನಿಂದ ಹಿಡಿದು ಡೀಫಾಲ್ಟ್ ಸಾಸ್ ನಕ್ಷೆಯಿಂದ ತರಗತಿಗಳನ್ನು ನಿರ್ಮಿಸಲಾಗಿದೆ 3rem
.
CSS ಗ್ರಿಡ್ ಲೇಔಟ್ ಮಾಡ್ಯೂಲ್ ಅನ್ನು ಬಳಸುತ್ತಿರುವಿರಾ? ಅಂತರ ಉಪಯುಕ್ತತೆಯನ್ನು ಬಳಸುವುದನ್ನು ಪರಿಗಣಿಸಿ .
ಸಂಕೇತ
ಎಲ್ಲಾ ಬ್ರೇಕ್ಪಾಯಿಂಟ್ಗಳಿಗೆ ಅನ್ವಯಿಸುವ ಅಂತರ ಉಪಯುಕ್ತತೆಗಳು, ನಿಂದ xs
ವರೆಗೆ xxl
, ಅವುಗಳಲ್ಲಿ ಯಾವುದೇ ಬ್ರೇಕ್ಪಾಯಿಂಟ್ ಸಂಕ್ಷೇಪಣವಿಲ್ಲ. ಏಕೆಂದರೆ ಆ ವರ್ಗಗಳನ್ನು min-width: 0
ಮೇಲಕ್ಕೆ ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ಹೀಗಾಗಿ ಮಾಧ್ಯಮದ ಪ್ರಶ್ನೆಗೆ ಬದ್ಧವಾಗಿಲ್ಲ. ಆದಾಗ್ಯೂ, ಉಳಿದ ಬ್ರೇಕ್ಪಾಯಿಂಟ್ಗಳು ಬ್ರೇಕ್ಪಾಯಿಂಟ್ ಸಂಕ್ಷೇಪಣವನ್ನು ಒಳಗೊಂಡಿರುತ್ತವೆ.
, , , ಮತ್ತು {property}{sides}-{size}
ಗಾಗಿ xs
ಮತ್ತು ಫಾರ್ಮ್ಯಾಟ್ ಅನ್ನು ಬಳಸಿಕೊಂಡು ತರಗತಿಗಳನ್ನು ಹೆಸರಿಸಲಾಗಿದೆ .{property}{sides}-{breakpoint}-{size}
sm
md
lg
xl
xxl
ಆಸ್ತಿ ಇವುಗಳಲ್ಲಿ ಒಂದಾಗಿದೆ:
m
- ನಿಗದಿಪಡಿಸಿದ ತರಗತಿಗಳಿಗೆmargin
p
- ನಿಗದಿಪಡಿಸಿದ ತರಗತಿಗಳಿಗೆpadding
ಕಡೆಗಳಲ್ಲಿ ಒಂದು :
t
- ಹೊಂದಿಸುವ ತರಗತಿಗಳಿಗೆmargin-top
ಅಥವಾpadding-top
b
- ಹೊಂದಿಸುವ ತರಗತಿಗಳಿಗೆmargin-bottom
ಅಥವಾpadding-bottom
s
- (ಪ್ರಾರಂಭ) ಹೊಂದಿಸುವmargin-left
ಅಥವಾpadding-left
LTR ನಲ್ಲಿmargin-right
ಅಥವಾpadding-right
RTL ನಲ್ಲಿ ತರಗತಿಗಳಿಗೆe
- (ಅಂತ್ಯ) ಹೊಂದಿಸುವmargin-right
ಅಥವಾpadding-right
LTR ನಲ್ಲಿmargin-left
ಅಥವಾpadding-left
RTL ನಲ್ಲಿ ತರಗತಿಗಳಿಗೆx
- ಎರಡನ್ನೂ ಹೊಂದಿಸುವ ತರಗತಿಗಳಿಗೆ*-left
ಮತ್ತು*-right
y
- ಎರಡನ್ನೂ ಹೊಂದಿಸುವ ತರಗತಿಗಳಿಗೆ*-top
ಮತ್ತು*-bottom
margin
ಖಾಲಿ - ಒಂದು ಅಥವಾpadding
ಅಂಶದ ಎಲ್ಲಾ 4 ಬದಿಗಳಲ್ಲಿ ಹೊಂದಿಸುವ ತರಗತಿಗಳಿಗೆ
ಅಲ್ಲಿ ಗಾತ್ರವು ಒಂದು:
0
- ತೆಗೆದುಹಾಕುವ ತರಗತಿಗಳಿಗೆmargin
ಅಥವಾpadding
ಅದನ್ನು ಹೊಂದಿಸುವ ಮೂಲಕ0
1
margin
- (ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ) ಅಥವಾpadding
ಗೆ ಹೊಂದಿಸುವ ತರಗತಿಗಳಿಗೆ$spacer * .25
2
margin
- (ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ) ಅಥವಾpadding
ಗೆ ಹೊಂದಿಸುವ ತರಗತಿಗಳಿಗೆ$spacer * .5
3
margin
- (ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ) ಅಥವಾpadding
ಗೆ ಹೊಂದಿಸುವ ತರಗತಿಗಳಿಗೆ$spacer
4
margin
- (ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ) ಅಥವಾpadding
ಗೆ ಹೊಂದಿಸುವ ತರಗತಿಗಳಿಗೆ$spacer * 1.5
5
margin
- (ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ) ಅಥವಾpadding
ಗೆ ಹೊಂದಿಸುವ ತರಗತಿಗಳಿಗೆ$spacer * 3
auto
margin
- ಸ್ವಯಂ ಹೊಂದಿಸುವ ತರಗತಿಗಳಿಗೆ
$spacers
( ಸಾಸ್ ಮ್ಯಾಪ್ ವೇರಿಯೇಬಲ್ಗೆ ನಮೂದುಗಳನ್ನು ಸೇರಿಸುವ ಮೂಲಕ ನೀವು ಹೆಚ್ಚಿನ ಗಾತ್ರಗಳನ್ನು ಸೇರಿಸಬಹುದು .)
ಉದಾಹರಣೆಗಳು
ಈ ವರ್ಗಗಳ ಕೆಲವು ಪ್ರತಿನಿಧಿ ಉದಾಹರಣೆಗಳು ಇಲ್ಲಿವೆ:
.mt-0 {
margin-top: 0 !important;
}
.ms-1 {
margin-left: ($spacer * .25) !important;
}
.px-2 {
padding-left: ($spacer * .5) !important;
padding-right: ($spacer * .5) !important;
}
.p-3 {
padding: $spacer !important;
}
ಸಮತಲ ಕೇಂದ್ರೀಕರಣ
ಹೆಚ್ಚುವರಿಯಾಗಿ, ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ .mx-auto
ಸ್ಥಿರ-ಅಗಲ ಬ್ಲಾಕ್ ಮಟ್ಟದ ವಿಷಯವನ್ನು ಸಮತಲವಾಗಿ ಕೇಂದ್ರೀಕರಿಸಲು ಒಂದು ವರ್ಗವನ್ನು ಒಳಗೊಂಡಿದೆ-ಅಂದರೆ, ಹೊಂದಿರುವ ವಿಷಯ display: block
ಮತ್ತು width
ಸೆಟ್-ಗೆ ಸಮತಲ ಅಂಚುಗಳನ್ನು ಹೊಂದಿಸುವ ಮೂಲಕ auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
ಋಣಾತ್ಮಕ ಅಂಚು
CSS ನಲ್ಲಿ, margin
ಗುಣಲಕ್ಷಣಗಳು ಋಣಾತ್ಮಕ ಮೌಲ್ಯಗಳನ್ನು ಬಳಸಿಕೊಳ್ಳಬಹುದು ( padding
ಸಾಧ್ಯವಿಲ್ಲ). ಈ ಋಣಾತ್ಮಕ ಅಂಚುಗಳನ್ನು ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲಾಗಿದೆ , ಆದರೆ ಹೊಂದಿಸುವ ಮೂಲಕ Sass ನಲ್ಲಿ ಸಕ್ರಿಯಗೊಳಿಸಬಹುದು $enable-negative-margins: true
.
ಸಿಂಟ್ಯಾಕ್ಸ್ ಡೀಫಾಲ್ಟ್, ಧನಾತ್ಮಕ ಅಂಚು ಉಪಯುಕ್ತತೆಗಳಂತೆಯೇ ಇರುತ್ತದೆ, ಆದರೆ n
ವಿನಂತಿಸಿದ ಗಾತ್ರದ ಮೊದಲು ಸೇರ್ಪಡೆಯೊಂದಿಗೆ. ಇದಕ್ಕೆ ವಿರುದ್ಧವಾದ ವರ್ಗದ ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
ಅಂತರ
ಬಳಸುವಾಗ , ನೀವು ಮೂಲ ಗ್ರಿಡ್ ಕಂಟೇನರ್ನಲ್ಲಿ ಉಪಯುಕ್ತತೆಗಳನ್ನು display: grid
ಬಳಸಬಹುದು . ಇದು ಪ್ರತ್ಯೇಕ ಗ್ರಿಡ್ ಐಟಂಗಳಿಗೆ ( ಕಂಟೇನರ್ನ gap
ಮಕ್ಕಳು) ಮಾರ್ಜಿನ್ ಉಪಯುಕ್ತತೆಗಳನ್ನು ಸೇರಿಸುವುದನ್ನು ಉಳಿಸಬಹುದು . display: grid
ಗ್ಯಾಪ್ ಉಪಯುಕ್ತತೆಗಳು ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ ಸ್ಪಂದಿಸುತ್ತವೆ ಮತ್ತು $spacers
ಸಾಸ್ ನಕ್ಷೆಯ ಆಧಾರದ ಮೇಲೆ ನಮ್ಮ ಉಪಯುಕ್ತತೆಗಳ API ಮೂಲಕ ರಚಿಸಲ್ಪಡುತ್ತವೆ.
<div class="d-grid gap-3">
<div class="p-2 bg-light border">Grid item 1</div>
<div class="p-2 bg-light border">Grid item 2</div>
<div class="p-2 bg-light border">Grid item 3</div>
</div>
ಬೆಂಬಲವು ಎಲ್ಲಾ ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ ಗ್ರಿಡ್ ಬ್ರೇಕ್ಪಾಯಿಂಟ್ಗಳಿಗೆ ಸ್ಪಂದಿಸುವ ಆಯ್ಕೆಗಳನ್ನು ಒಳಗೊಂಡಿದೆ, ಹಾಗೆಯೇ $spacers
ನಕ್ಷೆಯಿಂದ ಆರು ಗಾತ್ರಗಳು ( 0
- 5
). .gap-auto
ಇದು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಒಂದೇ ಆಗಿರುವುದರಿಂದ ಯಾವುದೇ ಉಪಯುಕ್ತತೆಯ ವರ್ಗವಿಲ್ಲ .gap-0
.
ಸಾಸ್
ನಕ್ಷೆಗಳು
ಅಂತರದ ಉಪಯುಕ್ತತೆಗಳನ್ನು ಸಾಸ್ ನಕ್ಷೆಯ ಮೂಲಕ ಘೋಷಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ನಂತರ ನಮ್ಮ ಉಪಯುಕ್ತತೆಗಳ API ನೊಂದಿಗೆ ರಚಿಸಲಾಗುತ್ತದೆ.
$spacer: 1rem;
$spacers: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);
$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null);
ಉಪಯುಕ್ತತೆಗಳ API
ಅಂತರದ ಉಪಯುಕ್ತತೆಗಳನ್ನು ನಮ್ಮ ಉಪಯುಕ್ತತೆಗಳ API ನಲ್ಲಿ ಘೋಷಿಸಲಾಗಿದೆ scss/_utilities.scss
. ಉಪಯುಕ್ತತೆಗಳ API ಅನ್ನು ಹೇಗೆ ಬಳಸುವುದು ಎಂದು ತಿಳಿಯಿರಿ.
"margin": (
responsive: true,
property: margin,
class: m,
values: map-merge($spacers, (auto: auto))
),
"margin-x": (
responsive: true,
property: margin-right margin-left,
class: mx,
values: map-merge($spacers, (auto: auto))
),
"margin-y": (
responsive: true,
property: margin-top margin-bottom,
class: my,
values: map-merge($spacers, (auto: auto))
),
"margin-top": (
responsive: true,
property: margin-top,
class: mt,
values: map-merge($spacers, (auto: auto))
),
"margin-end": (
responsive: true,
property: margin-right,
class: me,
values: map-merge($spacers, (auto: auto))
),
"margin-bottom": (
responsive: true,
property: margin-bottom,
class: mb,
values: map-merge($spacers, (auto: auto))
),
"margin-start": (
responsive: true,
property: margin-left,
class: ms,
values: map-merge($spacers, (auto: auto))
),
// Negative margin utilities
"negative-margin": (
responsive: true,
property: margin,
class: m,
values: $negative-spacers
),
"negative-margin-x": (
responsive: true,
property: margin-right margin-left,
class: mx,
values: $negative-spacers
),
"negative-margin-y": (
responsive: true,
property: margin-top margin-bottom,
class: my,
values: $negative-spacers
),
"negative-margin-top": (
responsive: true,
property: margin-top,
class: mt,
values: $negative-spacers
),
"negative-margin-end": (
responsive: true,
property: margin-right,
class: me,
values: $negative-spacers
),
"negative-margin-bottom": (
responsive: true,
property: margin-bottom,
class: mb,
values: $negative-spacers
),
"negative-margin-start": (
responsive: true,
property: margin-left,
class: ms,
values: $negative-spacers
),
// Padding utilities
"padding": (
responsive: true,
property: padding,
class: p,
values: $spacers
),
"padding-x": (
responsive: true,
property: padding-right padding-left,
class: px,
values: $spacers
),
"padding-y": (
responsive: true,
property: padding-top padding-bottom,
class: py,
values: $spacers
),
"padding-top": (
responsive: true,
property: padding-top,
class: pt,
values: $spacers
),
"padding-end": (
responsive: true,
property: padding-right,
class: pe,
values: $spacers
),
"padding-bottom": (
responsive: true,
property: padding-bottom,
class: pb,
values: $spacers
),
"padding-start": (
responsive: true,
property: padding-left,
class: ps,
values: $spacers
),