ব্যবধান
বুটস্ট্র্যাপ একটি উপাদানের চেহারা পরিবর্তন করতে শর্টহ্যান্ড প্রতিক্রিয়াশীল মার্জিন এবং প্যাডিং ইউটিলিটি ক্লাসের বিস্তৃত পরিসর অন্তর্ভুক্ত করে।
কিভাবে এটা কাজ করে
সংক্ষিপ্ত হ্যান্ড ক্লাস সহ একটি উপাদান বা তার পার্শ্বগুলির একটি উপসেটকে প্রতিক্রিয়াশীল-বান্ধব 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>
নেতিবাচক মার্জিন
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>