अंतर दवरप

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

कशें काम करता

आशुलिपी वर्ग आशिल्ल्या घटकाक वा ताच्या बाजूच्या उपसमुहाक प्रतिसाद-अनुकूल 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>