ব্যবধান
বুটস্ট্র্যাপ একটি উপাদানের চেহারা পরিবর্তন করতে শর্টহ্যান্ড প্রতিক্রিয়াশীল মার্জিন এবং প্যাডিং ইউটিলিটি ক্লাসের বিস্তৃত পরিসর অন্তর্ভুক্ত করে।
শর্টহ্যান্ড ক্লাস সহ একটি উপাদান বা তার পক্ষের একটি উপসেটকে প্রতিক্রিয়াশীল-বান্ধব margin
বা মানগুলি বরাদ্দ করুন। padding
স্বতন্ত্র বৈশিষ্ট্য, সমস্ত বৈশিষ্ট্য এবং উল্লম্ব এবং অনুভূমিক বৈশিষ্ট্যগুলির জন্য সমর্থন অন্তর্ভুক্ত করে। ক্লাসগুলি একটি ডিফল্ট Sass মানচিত্র থেকে সীমার মধ্যে তৈরি করা .25rem
হয় 3rem
।
স্পেসিং ইউটিলিটিগুলি যা সমস্ত ব্রেকপয়েন্টের জন্য প্রযোজ্য, থেকে xs
থেকে xl
, তাদের মধ্যে কোনও ব্রেকপয়েন্ট সংক্ষেপণ নেই। এর কারণ হল এই ক্লাসগুলি থেকে min-width: 0
এবং উপরে প্রয়োগ করা হয় এবং এইভাবে মিডিয়া ক্যোয়ারী দ্বারা আবদ্ধ হয় না। অবশিষ্ট ব্রেকপয়েন্ট, তবে, একটি ব্রেকপয়েন্ট সংক্ষেপণ অন্তর্ভুক্ত করে।
, , , এবং এর জন্য ফরম্যাট {property}{sides}-{size}
ব্যবহার করে ক্লাসের নামকরণ করা হয়েছে ।xs
{property}{sides}-{breakpoint}-{size}
sm
md
lg
xl
যেখানে সম্পত্তি একটি:
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
বাpadding
to সেট করে$spacer * .25
2
- (ডিফল্টরূপে) ক্লাসের জন্য যাmargin
বাpadding
to সেট করে$spacer * .5
3
- (ডিফল্টরূপে) ক্লাসের জন্য যাmargin
বাpadding
to সেট করে$spacer
4
- (ডিফল্টরূপে) ক্লাসের জন্য যাmargin
বাpadding
to সেট করে$spacer * 1.5
5
- (ডিফল্টরূপে) ক্লাসের জন্য যাmargin
বাpadding
to সেট করে$spacer * 3
auto
margin
- অটোতে সেট করা ক্লাসের জন্য
(আপনি $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>