স্পেচিং
বুটষ্ট্ৰেপে এটা উপাদানৰ ৰূপ পৰিবৰ্তন কৰিবলে চৰ্টহেণ্ড প্ৰতিক্ৰিয়াশীল মাৰ্জিন, পেডিং, আৰু ফাঁক সঁজুলি শ্ৰেণীসমূহৰ এটা বিস্তৃত পৰিসীমা অন্তৰ্ভুক্ত কৰে।
মাৰ্জিন আৰু পেডিং
চৰ্টহেণ্ড শ্ৰেণীসমূহৰ সৈতে এটা উপাদান বা ইয়াৰ কাষৰ এটা উপগোটলৈ প্ৰতিক্ৰিয়াশীল-বন্ধুত্বপূৰ্ণ margin
বা মানসমূহ নিযুক্ত কৰক। padding
ব্যক্তিগত বৈশিষ্ট্যসমূহ, সকলো বৈশিষ্ট্যসমূহ, আৰু উলম্ব আৰু অনুভূমিক বৈশিষ্ট্যসমূহৰ বাবে সমৰ্থন অন্তৰ্ভুক্ত কৰে। শ্ৰেণীসমূহ এটা অবিকল্পিত Sass মেপৰ পৰা নিৰ্মাণ কৰা হয় যি ৰ .25rem
পৰা 3rem
.
CSS গ্ৰীড পৰিকল্পনা মডিউল ব্যৱহাৰ কৰি আছেনে? gap সঁজুলি ব্যৱহাৰ কৰাৰ কথা চিন্তা কৰক ।
সংকেত
সকলো ব্ৰেকপইন্টৰ বাবে প্ৰযোজ্য স্পেচিং সঁজুলিসমূহৰ, ৰ পৰা xs
লৈকে xxl
, সিহতত কোনো ব্ৰেকপইন্ট সংক্ষিপ্তকৰণ নাই। কাৰণ সেই শ্ৰেণীসমূহ পৰা min-width: 0
আৰু ওপৰলৈ প্ৰয়োগ কৰা হয়, আৰু সেয়েহে এটা মাধ্যম প্ৰশ্নৰ দ্বাৰা বান্ধ খাই নাথাকে। বাকী ব্ৰেকপইণ্টবোৰত অৱশ্যে ব্ৰেকপইণ্টৰ সংক্ষিপ্তকৰণ অন্তৰ্ভুক্ত কৰা হৈছে।
শ্ৰেণীসমূহৰ নামকৰণ কৰা হয় , , , , আৰু ৰ {property}{sides}-{size}
বাবে xs
আৰু {property}{sides}-{breakpoint}-{size}
ৰ বাবে বিন্যাস ব্যৱহাৰ কৰি ।sm
md
lg
xl
xxl
য'ত সম্পত্তিৰ ভিতৰত এটা:
m
- ছেট কৰা শ্ৰেণীসমূহৰ বাবেmargin
p
- ছেট কৰা শ্ৰেণীসমূহৰ বাবেpadding
য'ত sides এটা আছে:
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
blank - উপাদানৰ এটা বা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;
}
অনুভূমিক কেন্দ্ৰীকৰণ
অতিৰিক্তভাৱে, Bootstrap এ .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
ই ব্যক্তিগত গ্ৰীড বস্তুসমূহত (এটা পাত্ৰৰ সন্তান) মাৰ্জিন সঁজুলিসমূহ যোগ কৰিবলগীয়া হোৱাৰ পৰা ৰাহি কৰিব পাৰে । গেপ সঁজুলিসমূহ অবিকল্পিতভাৱে প্ৰতিক্ৰিয়াশীল, আৰু আমাৰ সঁজুলিসমূহ API ৰ যোগেদি সৃষ্টি কৰা হয়, $spacers
Sass মেপৰ ওপৰত ভিত্তি কৰি।
<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>
সমৰ্থনে Bootstrap ৰ সকলো গ্ৰীড ব্ৰেকপইন্টৰ বাবে প্ৰতিক্ৰিয়াশীল বিকল্পসমূহ অন্তৰ্ভুক্ত কৰে, লগতে $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 ত ঘোষণা কৰা হৈছে 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
),