અંતર
બુટસ્ટ્રેપમાં તત્વના દેખાવને સંશોધિત કરવા માટે શોર્ટહેન્ડ રિસ્પોન્સિવ માર્જિન, પેડિંગ અને ગેપ યુટિલિટી ક્લાસની વિશાળ શ્રેણીનો સમાવેશ થાય છે.
માર્જિન અને ગાદી
શોર્ટહેન્ડ વર્ગો સાથે એક ઘટક અથવા તેની બાજુઓના સબસેટને પ્રતિભાવ-મૈત્રીપૂર્ણ 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
- (પ્રારંભ) વર્ગો માટે કે જે LTRmargin-left
અથવા RTL માં સેટ કરે છેpadding-left
margin-right
padding-right
e
- (અંત) વર્ગો માટે કે જે LTRmargin-right
અથવા RTL માં સેટ કરે છેpadding-right
margin-left
padding-left
x
- વર્ગો માટે કે જે બંને*-left
અને સેટ કરે છે*-right
y
- વર્ગો માટે કે જે બંને*-top
અને સેટ કરે છે*-bottom
- ખાલી - વર્ગો માટે કે જે તત્વની બધી 4 બાજુઓ પર
margin
અથવા સેટ કરે છેpadding
જ્યાં કદ આમાંથી એક છે:
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
),