अंतर दवरप

बूटस्ट्रॅपांत घटकाचें स्वरूप बदलपाखातीर आशुलिपी प्रतिसाद दिवपी मार्जिन आनी पॅडिंग उपयुक्तताय वर्गांची विस्तृत श्रेणी आसपावीत केल्या.

कशें काम करता

आशुलिपी वर्ग आशिल्ल्या घटकाक वा ताच्या बाजूच्या उपसमुहाक प्रतिसाद-अनुकूल marginवा मोलां नेमून दिवचीं. paddingवैयक्तीक गुणधर्म, सगळे गुणधर्म, आनी उबे आनी आडवे गुणधर्मांक आदार समाविष्ट करता. वर्ग मुलभूत Sass नकाशा पासून तयार केल्यात जो .25remते 3rem.

संकेतन करप

सगळ्या ब्रेकपॉइंटांक लागू जावपी स्पेसिंग उपयुक्तताय, ते पासून xs, xlतातूंत ब्रेकपॉइंट संक्षेप ना. कारण ते वर्ग पासून min-width: 0आनी वयर लागू जातात, आनी अशे तरेन माध्यम क्वेरीन बंधनकारक नात. उरिल्ल्या ब्रेकपॉइंटांत मात ब्रेकपॉइंट संक्षेपाचो आस्पाव जाता.

वर्गांक , , , आनी {property}{sides}-{size}खातीर xsआनी {property}{sides}-{breakpoint}-{size}खातीर स्वरूप वापरून नांव दितात .smmdlgxl

जंय मालमत्ता एक आसता: १.

• m- सेट करपी वर्गां खातीरmargin
• p- सेट करपी वर्गां खातीरpadding

जंय बाजू एक आसता: १.

• tmargin-top- वा सेट करपी वर्गांखातीरpadding-top
• bmargin-bottom- वा सेट करपी वर्गांखातीरpadding-bottom
• lmargin-left- वा सेट करपी वर्गांखातीरpadding-left
• rmargin-right- वा सेट करपी वर्गांखातीरpadding-right
• x- दोनूय सेट करपी वर्गां खातीर *-leftआनी*-right
• y- दोनूय सेट करपी वर्गां खातीर *-topआनी*-bottom
• blank - घटकाच्या सगळ्या 4 वटांनी एक marginवा सेट करपी वर्गांखातीरpadding

जंय आकार एक आसा:

• 0- marginवा paddingतें सेट करून काडून उडोवपी वर्गां खातीर0
• 1margin- (मुळाव्यान) वा paddingto सेट करपी वर्गांखातीर$spacer * .25
• 2margin- (मुळाव्यान) वा paddingto सेट करपी वर्गांखातीर$spacer * .5
• 3margin- (मुळाव्यान) वा paddingto सेट करपी वर्गांखातीर$spacer
• 4margin- (मुळाव्यान) वा paddingto सेट करपी वर्गांखातीर$spacer * 1.5
• 5margin- (मुळाव्यान) वा paddingto सेट करपी वर्गांखातीर$spacer * 3
• auto- marginto auto सेट करपी वर्गां खातीर

$spacers( Sass नकाशा चक्रांत नोंदी जोडून तुमी चड आकार जोडूंक शकतात .)

उदाहरणां

ह्या वर्गांचीं कांय प्रतिनिधीक उदाहरणां हांगा दिल्यांत:

.mt-0 {
  margin-top: 0 !important;
}

.ml-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करूंक शकना). 4.2 प्रमाणें, आमी वयर दिल्ल्या दर एका बिगर शून्य पूर्णांक आकाराखातीर नकारात्मक मार्जिन उपयुक्तताय जोडल्यात (देखीक, 1, 2, 3, 4, 5). ब्रेकपॉइंटांतल्यान ग्रिड स्तंभ गटर सानुकूल करपाक ह्यो उपयुक्तताय आदर्श आसात.

वाक्यरचना जवळजवळ मुलभूत, सकारात्मक मार्जिन उपयुक्तताय सारकीच आसा, पूण nविनंती केल्ल्या आकारा पयलीं जोडून. हांगा एक उदाहरण वर्ग आसा जो उरफाटो आसा .mt-1:

.mt-n1 {
  margin-top: -0.25rem !important;
}

mdमध्यम ( ) ब्रेकपॉइंट आनी वयर Bootstrap ग्रिड पसंतीचे करपाचें एक उदाहरण हांगा दिला . आमी .colपॅडींग वाडयलां .px-md-5आनी मागीर .mx-md-n5पालकाचेर तें विथ प्रतिकार केलां .row.

<div class="row mx-md-n5">
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
</div>