ব্যবধান

বুটস্ট্র্যাপ একটি উপাদানের চেহারা পরিবর্তন করতে শর্টহ্যান্ড প্রতিক্রিয়াশীল মার্জিন, প্যাডিং এবং গ্যাপ ইউটিলিটি ক্লাসের বিস্তৃত পরিসর অন্তর্ভুক্ত করে।

এই পৃষ্ঠায়

মার্জিন এবং প্যাডিং

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

CSS গ্রিড লেআউট মডিউল ব্যবহার করছেন? গ্যাপ ইউটিলিটি ব্যবহার করার কথা বিবেচনা করুন ।

স্বরলিপি

স্পেসিং ইউটিলিটিগুলি যা সমস্ত ব্রেকপয়েন্টের জন্য প্রযোজ্য, থেকে xsথেকে xxl, তাদের মধ্যে কোনও ব্রেকপয়েন্ট সংক্ষেপণ নেই। কারণ এই ক্লাসগুলি থেকে min-width: 0এবং উপরে প্রয়োগ করা হয়, এবং এইভাবে একটি মিডিয়া ক্যোয়ারী দ্বারা আবদ্ধ হয় না। অবশিষ্ট ব্রেকপয়েন্ট, তবে, একটি ব্রেকপয়েন্ট সংক্ষেপণ অন্তর্ভুক্ত করে।

, , , , এবং এর জন্য ফরম্যাট {property}{sides}-{size}ব্যবহার করে ক্লাসের নামকরণ করা হয়েছে ।xs{property}{sides}-{breakpoint}-{size}smmdlgxlxxl

যেখানে সম্পত্তি একটি:

m- ক্লাস যে সেট জন্যmargin
p- ক্লাস যে সেট জন্যpadding

যেখানে একটি পক্ষ হল:

t- ক্লাস যে সেট margin-topবা জন্যpadding-top
b- ক্লাস যে সেট margin-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
ফাঁকা - এমন ক্লাসের জন্য যা একটি marginবা paddingউপাদানের 4 পাশে সেট করে

যেখানে আকার এর মধ্যে একটি:

0- এমন ক্লাসের জন্য যা এটিকে বাদ দিয়ে marginবা 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- অটোতে সেট করা ক্লাসের জন্য

(আপনি $spacersSass ম্যাপ ভেরিয়েবলে এন্ট্রি যোগ করে আরও মাপ যোগ করতে পারেন।)

উদাহরণ

এখানে এই শ্রেণীর কিছু প্রতিনিধি উদাহরণ আছে:

.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পাত্রের শিশু)। গ্যাপ ইউটিলিটিগুলি ডিফল্টরূপে প্রতিক্রিয়াশীল, এবং $spacersSass মানচিত্রের উপর ভিত্তি করে আমাদের ইউটিলিটি API-এর মাধ্যমে তৈরি করা হয়।

গ্রিড আইটেম 1

গ্রিড আইটেম 2

গ্রিড আইটেম 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>

সমর্থনে সমস্ত বুটস্ট্র্যাপের গ্রিড ব্রেকপয়েন্টের জন্য প্রতিক্রিয়াশীল বিকল্পগুলি, সেইসাথে $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
    ),