স্পেচিং

বুটষ্ট্ৰেপে এটা উপাদানৰ ৰূপ পৰিবৰ্তন কৰিবলে চৰ্টহেণ্ড প্ৰতিক্ৰিয়াশীল মাৰ্জিন আৰু পেডিং সঁজুলি শ্ৰেণীসমূহৰ এটা বিস্তৃত পৰিসীমা অন্তৰ্ভুক্ত কৰে।

কেনেকৈ কাম কৰে

চৰ্টহেণ্ড শ্ৰেণীসমূহৰ সৈতে এটা উপাদান বা ইয়াৰ কাষৰ এটা উপগোটলৈ প্ৰতিক্ৰিয়াশীল-বন্ধুত্বপূৰ্ণ marginবা মানসমূহ নিযুক্ত কৰক। paddingব্যক্তিগত বৈশিষ্ট্যসমূহ, সকলো বৈশিষ্ট্যসমূহ, আৰু উলম্ব আৰু অনুভূমিক বৈশিষ্ট্যসমূহৰ বাবে সমৰ্থন অন্তৰ্ভুক্ত কৰে। শ্ৰেণীসমূহ এটা অবিকল্পিত Sass মেপৰ পৰা নিৰ্মাণ কৰা হয় যি ৰ .25remপৰা 3rem.

সংকেত

সকলো ব্ৰেকপইন্টৰ বাবে প্ৰযোজ্য স্পেচিং সঁজুলিসমূহৰ, ৰ পৰা xsলৈকে xl, সিহতত কোনো ব্ৰেকপইন্ট সংক্ষিপ্তকৰণ নাই। কাৰণ সেই শ্ৰেণীসমূহ পৰা min-width: 0আৰু ওপৰলৈ প্ৰয়োগ কৰা হয়, আৰু সেয়েহে এটা মাধ্যম প্ৰশ্নৰ দ্বাৰা বান্ধ খাই নাথাকে। বাকী ব্ৰেকপইণ্টবোৰত অৱশ্যে ব্ৰেকপইণ্টৰ সংক্ষিপ্তকৰণ অন্তৰ্ভুক্ত কৰা হৈছে।

শ্ৰেণীসমূহৰ নামকৰণ কৰা হয় , , , আৰু ৰ {property}{sides}-{size}বাবে xsআৰু {property}{sides}-{breakpoint}-{size}ৰ বাবে বিন্যাস ব্যৱহাৰ কৰি ।smmdlgxl

য'ত সম্পত্তিৰ ভিতৰত এটা:

• m- ছেট কৰা শ্ৰেণীসমূহৰ বাবেmargin
• p- ছেট কৰা শ্ৰেণীসমূহৰ বাবেpadding

য'ত sides এটা আছে:

• tmargin-top- বা ছেট কৰা শ্ৰেণীসমূহৰ বাবেpadding-top
• bmargin-bottom- বা ছেট কৰা শ্ৰেণীসমূহৰ বাবেpadding-bottom
• lmargin-left- বা ছেট কৰা শ্ৰেণীসমূহৰ বাবেpadding-left
• rmargin-right- বা ছেট কৰা শ্ৰেণীসমূহৰ বাবেpadding-right
• x*-left- আৰু দুয়োটা নিৰ্ধাৰণ কৰা শ্ৰেণীৰ বাবে*-right
• y*-top- আৰু দুয়োটা নিৰ্ধাৰণ কৰা শ্ৰেণীৰ বাবে*-bottom
• marginblank - উপাদানৰ এটা বা paddingসকলো 4 ফালে সংহতি কৰা শ্ৰেণীসমূহৰ বাবে

য'ত আকাৰ এটা:

• 0margin- শ্ৰেণীসমূহৰ বাবে যিয়ে বা paddingইয়াক স্থাপন কৰি ইয়াক আঁতৰাই পেলায়0
• 1- (অবিকল্পিতভাৱে) শ্ৰেণীসমূহৰ বাবে যি marginবা paddingto সংহতি কৰে$spacer * .25
• 2- (অবিকল্পিতভাৱে) শ্ৰেণীসমূহৰ বাবে যি marginবা paddingto সংহতি কৰে$spacer * .5
• 3- (অবিকল্পিতভাৱে) শ্ৰেণীসমূহৰ বাবে যি marginবা paddingto সংহতি কৰে$spacer
• 4- (অবিকল্পিতভাৱে) শ্ৰেণীসমূহৰ বাবে যি marginবা paddingto সংহতি কৰে$spacer * 1.5
• 5- (অবিকল্পিতভাৱে) শ্ৰেণীসমূহৰ বাবে যি marginবা paddingto সংহতি কৰে$spacer * 3
• automargin- স্বয়ংক্ৰিয়ভাৱে ছেট কৰা শ্ৰেণীসমূহৰ বাবে

$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;
}

অনুভূমিক কেন্দ্ৰীকৰণ

অতিৰিক্তভাৱে, Bootstrap এ .mx-autoস্থিৰ-প্ৰস্থ ব্লক স্তৰৰ বিষয়বস্তু অনুভূমিকভাৱে কেন্দ্ৰীকৰণৰ বাবে এটা শ্ৰেণীও অন্তৰ্ভুক্ত কৰে—অৰ্থাৎ, থকা বিষয়বস্তু display: blockআৰু এটা widthসংহতি—অনুভূমিক প্ৰান্তসমূহ লে সংহতি কৰি auto।

<div class="mx-auto" style="width: 200px;">
  Centered element
</div>