અંતર

બુટસ્ટ્રેપમાં તત્વના દેખાવને સંશોધિત કરવા માટે શોર્ટહેન્ડ રિસ્પોન્સિવ માર્જિન, પેડિંગ અને ગેપ યુટિલિટી ક્લાસની વિશાળ શ્રેણીનો સમાવેશ થાય છે.

આ પૃષ્ઠ પર

માર્જિન અને ગાદી

શોર્ટહેન્ડ વર્ગો સાથે એક ઘટક અથવા તેની બાજુઓના સબસેટને પ્રતિભાવ-મૈત્રીપૂર્ણ marginઅથવા મૂલ્યો સોંપો. paddingવ્યક્તિગત ગુણધર્મો, તમામ ગુણધર્મો અને વર્ટિકલ અને હોરીઝોન્ટલ પ્રોપર્ટીઝ માટે સપોર્ટનો સમાવેશ થાય છે. થી લઈને ડિફોલ્ટ સાસ નકશામાંથી વર્ગો બનાવવામાં આવે .25remછે 3rem.

CSS ગ્રીડ લેઆઉટ મોડ્યુલનો ઉપયોગ કરી રહ્યા છો? તેના બદલે ગેપ યુટિલિટીનો ઉપયોગ કરવાનું વિચારો .

નોટેશન

સ્પેસિંગ યુટિલિટી કે જે તમામ બ્રેકપોઈન્ટ પર લાગુ થાય છે, થી xs, xxlતેમાં કોઈ બ્રેકપોઈન્ટ સંક્ષિપ્ત નથી. આ એટલા માટે છે કારણ કે તે વર્ગો min-width: 0ઉપરથી અને ઉપરથી લાગુ કરવામાં આવે છે, અને આમ મીડિયા ક્વેરી દ્વારા બંધાયેલા નથી. જો કે, બાકીના બ્રેકપોઇન્ટ્સમાં બ્રેકપોઇન્ટ સંક્ષિપ્તનો સમાવેશ થાય છે.

વર્ગોને , , , , અને {property}{sides}-{size}માટે ફોર્મેટનો ઉપયોગ કરીને નામ આપવામાં આવ્યું છે .xs{property}{sides}-{breakpoint}-{size}smmdlgxlxxl

જ્યાં મિલકત આમાંથી એક છે:

m- સેટ કરેલા વર્ગો માટેmargin
p- સેટ કરેલા વર્ગો માટેpadding

જ્યાં બાજુઓમાંથી એક છે:

t- સેટ margin-topકે વર્ગો માટેpadding-top
b- સેટ margin-bottomકે વર્ગો માટેpadding-bottom
s- (પ્રારંભ) વર્ગો માટે કે જે LTR margin-leftઅથવા RTL માં સેટ કરે છેpadding-leftmargin-rightpadding-right
e- (અંત) વર્ગો માટે કે જે LTR margin-rightઅથવા RTL માં સેટ કરે છેpadding-rightmargin-leftpadding-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
automargin- ઓટો પર સેટ કરતા વર્ગો માટે

$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 દ્વારા જનરેટ થાય છે .

ગ્રીડ આઇટમ 1

ગ્રીડ આઇટમ 2

ગ્રીડ આઇટમ 3

html

<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,
);

ઉપયોગિતાઓ 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
    ),
    // Gap utility
    "gap": (
      responsive: true,
      property: gap,
      class: gap,
      values: $spacers
    ),