স্পেচিং

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

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

চৰ্টহেণ্ড শ্ৰেণীসমূহৰ সৈতে এটা উপাদান বা ইয়াৰ কাষৰ এটা উপগোটলৈ প্ৰতিক্ৰিয়াশীল-বন্ধুত্বপূৰ্ণ 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>

ঋণাত্মক মাৰ্জিন

CSS ত, marginবৈশিষ্ট্যসমূহে ঋণাত্মক মানসমূহ ব্যৱহাৰ কৰিব পাৰে ( paddingনোৱাৰে)। 4.2 ৰ পৰা, আমি ওপৰত তালিকাভুক্ত প্ৰতিটো শূন্য নহোৱা পূৰ্ণসংখ্যা আকাৰৰ বাবে ঋণাত্মক মাৰ্জিন সঁজুলি যোগ কৰিছো (যেনে, 1, 2, 3, 4, 5). এই সঁজুলিসমূহ ব্ৰেকপইন্টসমূহৰ মাজেৰে গ্ৰীড স্তম্ভ নালাসমূহ কাষ্টমাইজ কৰাৰ বাবে আদৰ্শ।

বাক্যবিন্যাস অবিকল্পিত, ধনাত্মক মাৰ্জিন সঁজুলিসমূহৰ সৈতে প্ৰায় একে, কিন্তু nঅনুৰোধ কৰা আকাৰৰ আগত যোগ কৰি। ইয়াত এটা উদাহৰণ শ্ৰেণী আছে যিটো .mt-1:

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

mdইয়াত বুটষ্ট্ৰেপ গ্ৰীডক মধ্যম ( ) ব্ৰেকপইন্ট আৰু ওপৰত স্বনিৰ্বাচিত কৰাৰ এটা উদাহৰণ দিয়া হৈছে । আমি .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>