স্পেচিং

বুটষ্ট্ৰেপে এটা উপাদানৰ ৰূপ পৰিবৰ্তন কৰিবলে চৰ্টহেণ্ড প্ৰতিক্ৰিয়াশীল মাৰ্জিন, পেডিং, আৰু ফাঁক সঁজুলি শ্ৰেণীসমূহৰ এটা বিস্তৃত পৰিসীমা অন্তৰ্ভুক্ত কৰে।

এই পৃষ্ঠাত

মাৰ্জিন আৰু পেডিং

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

CSS গ্ৰীড পৰিকল্পনা মডিউল ব্যৱহাৰ কৰি আছেনে? gap সঁজুলি ব্যৱহাৰ কৰাৰ কথা চিন্তা কৰক ।

সংকেত

সকলো ব্ৰেকপইন্টৰ বাবে প্ৰযোজ্য স্পেচিং সঁজুলিসমূহৰ, ৰ পৰা xsলৈকে xxl, সিহতত কোনো ব্ৰেকপইন্ট সংক্ষিপ্তকৰণ নাই। কাৰণ সেই শ্ৰেণীসমূহ পৰা min-width: 0আৰু ওপৰলৈ প্ৰয়োগ কৰা হয়, আৰু সেয়েহে এটা মাধ্যম প্ৰশ্নৰ দ্বাৰা বান্ধ খাই নাথাকে। বাকী ব্ৰেকপইণ্টবোৰত অৱশ্যে ব্ৰেকপইণ্টৰ সংক্ষিপ্তকৰণ অন্তৰ্ভুক্ত কৰা হৈছে।

শ্ৰেণীসমূহৰ নামকৰণ কৰা হয় , , , , আৰু ৰ {property}{sides}-{size}বাবে xsআৰু {property}{sides}-{breakpoint}-{size}ৰ বাবে বিন্যাস ব্যৱহাৰ কৰি ।smmdlgxlxxl

য'ত সম্পত্তিৰ ভিতৰত এটা:

m- ছেট কৰা শ্ৰেণীসমূহৰ বাবেmargin
p- ছেট কৰা শ্ৰেণীসমূহৰ বাবেpadding

য'ত sides এটা আছে:

tmargin-top- বা ছেট কৰা শ্ৰেণীসমূহৰ বাবেpadding-top
bmargin-bottom- বা ছেট কৰা শ্ৰেণীসমূহৰ বাবেpadding-bottom
s- (আৰম্ভ) শ্ৰেণীসমূহৰ বাবে যি সংহতি কৰে margin-leftবা padding-leftLTR ত, margin-rightবা padding-rightRTL ত
e- (সমাপ্ত) শ্ৰেণীসমূহৰ বাবে যি সংহতি কৰে margin-rightবা padding-rightLTR ত, margin-leftবা padding-leftRTL ত
x*-left- আৰু দুয়োটা নিৰ্ধাৰণ কৰা শ্ৰেণীৰ বাবে*-right
y*-top- আৰু দুয়োটা নিৰ্ধাৰণ কৰা শ্ৰেণীৰ বাবে*-bottom
marginblank - উপাদানৰ এটা বা paddingসকলো 4 ফালে সংহতি কৰা শ্ৰেণীসমূহৰ বাবে

য'ত আকাৰ এটা:

0margin- শ্ৰেণীসমূহৰ বাবে যিয়ে বা 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- স্বয়ংক্ৰিয়ভাৱে ছেট কৰা শ্ৰেণীসমূহৰ বাবে

$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 ৰ যোগেদি সৃষ্টি কৰা হয়, $spacersSass মেপৰ ওপৰত ভিত্তি কৰি।

গ্ৰীড বস্তু 1

গ্ৰীড বস্তু ২

গ্ৰীড বস্তু 3

<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
    ),