अंतर दवरप
बूटस्ट्रॅपांत घटकाचें स्वरूप बदलपाखातीर आशुलिपी प्रतिसाद दिवपी मार्जिन, पॅडींग, आनी गॅप उपयुक्तताय वर्गांची विस्तृत श्रेणी आसपावीत केल्या.
मार्जिन आनी पॅडींग
आशुलिपी वर्ग आशिल्ल्या घटकाक वा ताच्या बाजूच्या उपसमुहाक प्रतिसाद-अनुकूल margin
वा मोलां नेमून दिवचीं. padding
वैयक्तीक गुणधर्म, सगळे गुणधर्म, आनी उबे आनी आडवे गुणधर्मांक आदार समाविष्ट करता. वर्ग मुलभूत Sass नकाशा पासून तयार केल्यात जो .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
- blank - घटकाच्या सगळ्या 4 वटांन��� एक
margin
वा सेट करपी वर्गांखातीरpadding
जंय आकार एक आसा:
0
-margin
वाpadding
तें सेट करून काडून उडोवपी वर्गां खातीर0
1
margin
- (मुळाव्यान) वाpadding
to सेट करपी वर्गांखातीर$spacer * .25
2
margin
- (मुळाव्यान) वाpadding
to सेट करपी वर्गांखातीर$spacer * .5
3
margin
- (मुळाव्यान) वाpadding
to सेट करपी वर्गांखातीर$spacer
4
margin
- (मुळाव्यान) वाpadding
to सेट करपी वर्गांखातीर$spacer * 1.5
5
margin
- (मुळाव्यान) वाpadding
to सेट करपी वर्गांखातीर$spacer * 3
auto
-margin
to auto सेट करपी वर्गां खातीर
$spacers
( Sass नकाशा चक्रांत नोंदी जोडून तुमी चड आकार जोडूंक शकतात .)
उदाहरणां
ह्या वर्गांचीं कांय प्रतिनिधीक उदाहरणां हांगा दिल्यांत:
.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
गॅप उपयुक्तताय पूर्वनिर्धारीतपणान प्रतिसाद दितात, आनी आमच्या उपयुक्तताय API वरवीं तयार करतात, $spacers
Sass नकाशाचेर आदारीत.
<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>
आदारांत Bootstrap च्या सगळ्या ग्रिड ब्रेकपॉइंटां खातीर प्रतिसाद दिवपी पर्याय आसपावीत आसात, तशेंच $spacers
नकाशा वयल्यान स आकार ( 0
– 5
). उपयुक्तताय वर्ग ना .gap-auto
कारण तो प्रभावीपणान .gap-0
.
सास
नकाशे तयार करतात
अंतर उपयुक्तताय Sass नकाशा वरवीं जाहीर करतात आनी मागीर आमच्या उपयुक्तताय 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 मदीं 2019 वर्सा जाहीर केल्यात scss/_utilities.scss
. उपयुक्तताय एपीआय कसो वापरचो तें शिकात.
"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
),