ব্যবধান
বুটস্ট্র্যাপ একটি উপাদানের চেহারা পরিবর্তন করতে শর্টহ্যান্ড প্রতিক্রিয়াশীল মার্জিন, প্যাডিং এবং গ্যাপ ইউটিলিটি ক্লাসের বিস্তৃত পরিসর অন্তর্ভুক্ত করে।
মার্জিন এবং প্যাডিং
সংক্ষিপ্ত হ্যান্ড ক্লাস সহ একটি উপাদান বা তার পার্শ্বগুলির একটি উপসেটকে প্রতিক্রিয়াশীল-বান্ধব margin
বা মান বরাদ্দ করুন। padding
স্বতন্ত্র বৈশিষ্ট্য, সমস্ত বৈশিষ্ট্য এবং উল্লম্ব এবং অনুভূমিক বৈশিষ্ট্যগুলির জন্য সমর্থন অন্তর্ভুক্ত করে৷ ক্লাসগুলি একটি ডিফল্ট Sass মানচিত্র থেকে শুরু .25rem
করে 3rem
.
CSS গ্রিড লেআউট মডিউল ব্যবহার করছেন? গ্যাপ ইউটিলিটি ব্যবহার করার কথা বিবেচনা করুন ।
স্বরলিপি
স্পেসিং ইউটিলিটিগুলি যা সমস্ত ব্রেকপয়েন্টের জন্য প্রযোজ্য, থেকে xs
থেকে xxl
, তাদের মধ্যে কোনও ব্রেকপয়েন্ট সংক্ষেপণ নেই। কারণ এই ক্লাসগুলি থেকে min-width: 0
এবং উপরে প্রয়োগ করা হয়, এবং এইভাবে একটি মিডিয়া ক্যোয়ারী দ্বারা আবদ্ধ হয় না। অবশিষ্ট ব্রেকপয়েন্ট, তবে, একটি ব্রেকপয়েন্ট সংক্ষেপণ অন্তর্ভুক্ত করে।
, , , , এবং এর জন্য ফরম্যাট {property}{sides}-{size}
ব্যবহার করে ক্লাসের নামকরণ করা হয়েছে ।xs
{property}{sides}-{breakpoint}-{size}
sm
md
lg
xl
xxl
যেখানে সম্পত্তি একটি:
m
- ক্লাস যে সেট জন্যmargin
p
- ক্লাস যে সেট জন্যpadding
যেখানে একটি পক্ষ হল:
t
- ক্লাস যে সেটmargin-top
বা জন্যpadding-top
b
- ক্লাস যে সেটmargin-bottom
বা জন্যpadding-bottom
s
- (শুরু) ক্লাসের জন্য যেগুলি সেট করা হয়েছেmargin-left
বাpadding-left
LTR,margin-right
বাpadding-right
RTL-এ৷e
- (শেষ) ক্লাসের জন্য যা সেট করা হয়েছেmargin-right
বাpadding-right
LTR,margin-left
বাpadding-left
RTL-এx
- যে ক্লাসের জন্য*-left
এবং উভয় সেট করে*-right
y
- যে ক্লাসের জন্য*-top
এবং উভয় সেট করে*-bottom
- ফাঁকা - এমন ক্লাসের জন্য যা একটি
margin
বাpadding
উপাদানের 4 পাশে সেট করে
যেখানে আকার এর মধ্যে একটি:
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;
}
.ms-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
পারে না)। এই নেতিবাচক মার্জিনগুলি ডিফল্টরূপে অক্ষম করা হয় , কিন্তু সেটিং করে Sass এ সক্ষম করা যেতে পারে $enable-negative-margins: true
৷
সিনট্যাক্স প্রায় ডিফল্ট, ধনাত্মক মার্জিন ইউটিলিটিগুলির মতোই, তবে n
অনুরোধকৃত আকারের আগে যোগ করার সাথে। এখানে একটি উদাহরণ ক্লাস যা এর বিপরীত .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
ফাঁক
ব্যবহার করার সময় , আপনি প্যারেন্ট গ্রিড কন্টেইনারে ইউটিলিটি display: grid
ব্যবহার করতে পারেন । gap
এটি পৃথক গ্রিড আইটেমগুলিতে মার্জিন ইউটিলিটিগুলি যুক্ত করার জন্য সংরক্ষণ করতে পারে (একটি display: grid
পাত্রের শিশু)। গ্যাপ ইউটিলিটিগুলি ডিফল্টরূপে প্রতিক্রিয়াশীল, এবং $spacers
Sass মানচিত্রের উপর ভিত্তি করে আমাদের ইউটিলিটি API-এর মাধ্যমে তৈরি করা হয়।
<div class="d-grid gap-3">
<div class="p-2 bg-light border">Grid item 1</div>
<div class="p-2 bg-light border">Grid item 2</div>
<div class="p-2 bg-light border">Grid item 3</div>
</div>
সমর্থনে সমস্ত বুটস্ট্র্যাপের গ্রিড ব্রেকপয়েন্টের জন্য প্রতিক্রিয়াশীল বিকল্পগুলি, সেইসাথে $spacers
মানচিত্র ( 0
– 5
) থেকে ছয়টি আকার অন্তর্ভুক্ত রয়েছে। কোন .gap-auto
ইউটিলিটি ক্লাস নেই কারণ এটি কার্যকরভাবে এর মতো .gap-0
।
সস
মানচিত্র
স্পেসিং ইউটিলিটিগুলি Sass মানচিত্রের মাধ্যমে ঘোষণা করা হয় এবং তারপরে আমাদের ইউটিলিটি API এর সাথে তৈরি করা হয়।
$spacer: 1rem;
$spacers: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);
$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null);
ইউটিলিটি API
স্পেসিং ইউটিলিটিগুলি আমাদের ইউটিলিটি API-এ ঘোষণা করা হয়েছে scss/_utilities.scss
। ইউটিলিটি API কীভাবে ব্যবহার করবেন তা শিখুন।
"margin": (
responsive: true,
property: margin,
class: m,
values: map-merge($spacers, (auto: auto))
),
"margin-x": (
responsive: true,
property: margin-right margin-left,
class: mx,
values: map-merge($spacers, (auto: auto))
),
"margin-y": (
responsive: true,
property: margin-top margin-bottom,
class: my,
values: map-merge($spacers, (auto: auto))
),
"margin-top": (
responsive: true,
property: margin-top,
class: mt,
values: map-merge($spacers, (auto: auto))
),
"margin-end": (
responsive: true,
property: margin-right,
class: me,
values: map-merge($spacers, (auto: auto))
),
"margin-bottom": (
responsive: true,
property: margin-bottom,
class: mb,
values: map-merge($spacers, (auto: auto))
),
"margin-start": (
responsive: true,
property: margin-left,
class: ms,
values: map-merge($spacers, (auto: auto))
),
// Negative margin utilities
"negative-margin": (
responsive: true,
property: margin,
class: m,
values: $negative-spacers
),
"negative-margin-x": (
responsive: true,
property: margin-right margin-left,
class: mx,
values: $negative-spacers
),
"negative-margin-y": (
responsive: true,
property: margin-top margin-bottom,
class: my,
values: $negative-spacers
),
"negative-margin-top": (
responsive: true,
property: margin-top,
class: mt,
values: $negative-spacers
),
"negative-margin-end": (
responsive: true,
property: margin-right,
class: me,
values: $negative-spacers
),
"negative-margin-bottom": (
responsive: true,
property: margin-bottom,
class: mb,
values: $negative-spacers
),
"negative-margin-start": (
responsive: true,
property: margin-left,
class: ms,
values: $negative-spacers
),
// Padding utilities
"padding": (
responsive: true,
property: padding,
class: p,
values: $spacers
),
"padding-x": (
responsive: true,
property: padding-right padding-left,
class: px,
values: $spacers
),
"padding-y": (
responsive: true,
property: padding-top padding-bottom,
class: py,
values: $spacers
),
"padding-top": (
responsive: true,
property: padding-top,
class: pt,
values: $spacers
),
"padding-end": (
responsive: true,
property: padding-right,
class: pe,
values: $spacers
),
"padding-bottom": (
responsive: true,
property: padding-bottom,
class: pb,
values: $spacers
),
"padding-start": (
responsive: true,
property: padding-left,
class: ps,
values: $spacers
),