ব্যবধান

বুটস্ট্র্যাপ একটি উপাদানের চেহারা পরিবর্তন করতে শর্টহ্যান্ড প্রতিক্রিয়াশীল মার্জিন এবং প্যাডিং ইউটিলিটি ক্লাসের বিস্তৃত পরিসর অন্তর্ভুক্ত করে।

কিভাবে এটা কাজ করে

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

স্বরলিপি

স্পেসিং ইউটিলিটিগুলি যা সমস্ত ব্রেকপয়েন্টের জন্য প্রযোজ্য, থেকে xsথেকে xl, তাদের মধ্যে কোনও ব্রেকপয়েন্ট সংক্ষেপণ নেই। এর কারণ হল এই ক্লাসগুলি থেকে min-width: 0এবং উপরে প্রয়োগ করা হয় এবং এইভাবে মিডিয়া ক্যোয়ারী দ্বারা আবদ্ধ হয় না। অবশিষ্ট ব্রেকপয়েন্ট, তবে, একটি ব্রেকপয়েন্ট সংক্ষেপণ অন্তর্ভুক্ত করে।

, , , এবং এর জন্য ফরম্যাট {property}{sides}-{size}ব্যবহার করে ক্লাসের নামকরণ করা হয়েছে ।xs{property}{sides}-{breakpoint}-{size}smmdlgxl

যেখানে সম্পত্তি একটি:

• m- সেট করা ক্লাসের জন্যmargin
• p- সেট করা ক্লাসের জন্যpadding

যেখানে একটি পক্ষ হল:

• t- ক্লাস যে সেট margin-topবা জন্যpadding-top
• b- ক্লাস যে সেট margin-bottomবা জন্যpadding-bottom
• l- ক্লাস যে সেট margin-leftবা জন্যpadding-left
• r- ক্লাস যে সেট margin-rightবা জন্যpadding-right
• x- যে ক্লাসের জন্য *-leftএবং উভয় সেট করে*-right
• y- যে ক্লাসের জন্য *-topএবং উভয় সেট করে*-bottom
• ফাঁকা - এমন ক্লাসগুলির জন্য যেগুলি উপাদানটির 4টি পাশে marginবা একটি সেট করে৷padding

যেখানে আকার এর মধ্যে একটি:

• 0- এমন ক্লাসের জন্য যা এটিকে বাদ দিয়ে marginবা 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- অটোতে সেট করা ক্লাসের জন্য

(আপনি $spacersSass ম্যাপ ভেরিয়েবলে এন্ট্রি যোগ করে আরও মাপ যোগ করতে পারেন।)

উদাহরণ

এখানে এই শ্রেণীর কিছু প্রতিনিধি উদাহরণ আছে:

.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) ব্রেকপয়েন্ট এবং উপরে কাস্টমাইজ করার উদাহরণ দেওয়া হল। .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>