স্পেচিং

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

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

সংকেত

সকলো ব্ৰেকপইন্টৰ বাবে প্ৰযোজ্য স্পেচিং সঁজুলিসমূহৰ, ৰ পৰা 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 মেপৰ ওপৰত ভিত্তি কৰি।

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

ইউটিলিটিজ এপিআই

স্পেচিং ইউটিলিটিসমূহ আমাৰ ইউটিলিটিসমূহ 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
    ),
    // Gap utility
    "gap": (
      responsive: true,
      property: gap,
      class: gap,
      values: $spacers
    ),