ব্যবধান

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

এই পৃষ্ঠায়

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

সংক্ষিপ্ত হ্যান্ড ক্লাস সহ একটি উপাদান বা তার পার্শ্বগুলির একটি উপসেটকে প্রতিক্রিয়াশীল-বান্ধব 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
ফাঁকা - এমন ক্লাসগুলির জন্য যেগুলি উপাদানটির 4টি পাশে marginবা একটি সেট করে৷padding

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

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

html

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

Support includes responsive options for all of Bootstrap’s grid breakpoints, as well as six sizes from the $spacers map (0–5). There is no .gap-auto utility class as it’s effectively the same as .gap-0.

Sass

Maps

Spacing utilities are declared via Sass map and then generated with our utilities API.

$spacer: 1rem;
$spacers: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);

Utilities API

Spacing utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities 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
    ),