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

ইউটিলিটি API হৈছে ইউটিলিটি শ্ৰেণীসমূহ সৃষ্টি কৰিবলৈ এটা Sass-ভিত্তিক সঁজুলি।

এই পৃষ্ঠাত

বুটষ্ট্ৰেপ সঁজুলিসমূহ আমাৰ সঁজুলি API ৰ সৈতে সৃষ্টি কৰা হয় আৰু Sass ৰ যোগেদি আমাৰ সঁজুলি শ্ৰেণীসমূহৰ অবিকল্পিত গোট পৰিবৰ্তন বা সম্প্ৰসাৰণ কৰিবলে ব্যৱহাৰ কৰিব পাৰি। আমাৰ ইউটিলিটি API বিভিন্ন বিকল্পৰ সৈতে শ্ৰেণীৰ পৰিয়াল সৃষ্টি কৰাৰ বাবে Sass মেপ আৰু ফাংচনসমূহৰ এটা শৃংখলাৰ ওপৰত ভিত্তি কৰি তৈয়াৰ কৰা হৈছে। যদি আপুনি Sass মেপৰ সৈতে অচিনাকি, আৰম্ভ কৰিবলৈ অফিচিয়েল Sass docs ত পঢ়ক।

$utilitiesমেপত আমাৰ সকলো উপযোগীতা আছে আৰু পিছত আপোনাৰ স্বনিৰ্বাচিত মেপৰ সৈতে একত্ৰিত কৰা হয় , $utilitiesযদি উপস্থিত থাকে। সঁজুলি মেপত সঁজুলি গোটসমূহৰ এটা চাবিযুক্ত তালিকা থাকে যি নিম্নলিখিত বিকল্পসমূহ গ্ৰহণ কৰে:

বিকল্প	প্ৰকাৰ	অবিকল্পিত মান	বিৱৰণ
`property`	প্ৰয়োজনীয়	–	বৈশিষ্ট্যৰ নাম, ই এটা ষ্ট্ৰিং বা ষ্ট্ৰিংসমূহৰ এটা এৰে হ'ব পাৰে (যেনে, অনুভূমিক পেডিংসমূহ বা মাৰ্জিনসমূহ)।
`values`	প্ৰয়োজনীয়	–	মানসমূহৰ তালিকা, বা এটা মেপ যদি আপুনি শ্ৰেণীৰ নাম মানৰ সৈতে একে হোৱাটো নিবিচাৰে। যদি `null`মেপ কী হিচাপে ব্যৱহাৰ কৰা হয়, ইয়াক কম্পাইল কৰা নহয়।
`class`	বৈকল্পিক	খালী	সৃষ্টি কৰা শ্ৰেণীৰ নাম। যদি প্ৰদান কৰা হোৱা নাই আৰু `property`ষ্ট্ৰিংসমূহৰ এটা এৰে হয়, এৰেৰ `class`প্ৰথম উপাদানলৈ অবিকল্পিত হ'ব `property`।
`css-var`	বৈকল্পিক	`false`	CSS নিয়মৰ পৰিবৰ্তে CSS চলকসমূহ সৃষ্টি কৰিবলে বুলিয়ান।
`local-vars`	বৈকল্পিক	খালী	CSS নিয়মসমূহৰ উপৰিও সৃষ্টি কৰিবলে স্থানীয় CSS চলকসমূহৰ মেপ।
`state`	বৈকল্পিক	খালী	সৃষ্টি কৰিবলগীয়া ছ্যুডো-শ্ৰেণী ভিন্নতাসমূহৰ তালিকা (যেনে, `:hover`বা `:focus`) ।
`responsive`	বৈকল্পিক	`false`	প্ৰতিক্ৰিয়াশীল শ্ৰেণীসমূহ সৃষ্টি কৰা উচিত নে নহয় তাক সূচাই বুলিয়ান।
`rfs`	বৈকল্পিক	`false`	RFS ৰ সৈতে তৰল পুনৰ স্কেলিং সামৰ্থবান কৰিবলে বুলিয়ান ।
`print`	বৈকল্পিক	`false`	প্ৰিন্ট শ্ৰেণীসমূহ সৃষ্টি কৰাৰ প্ৰয়োজন আছে নে নাই তাক সূচায় বুলিয়ান।
`rtl`	বৈকল্পিক	`true`	সঁজুলিক RTL ত ৰাখিব লাগে নে নাই তাক সূচাই বুলিয়ান।

API ব্যাখ্যা কৰা হৈছে

$utilitiesআমাৰ _utilities.scssষ্টাইলশ্বীটৰ ভিতৰত থকা ভেৰিয়েবলটোত সকলো ইউটিলিটি ভেৰিয়েবল যোগ কৰা হয় । সঁজুলিসমূহৰ প্ৰতিটো গোট এনেকুৱা কিবা এটা দেখা যায়:

$utilities: (
  "opacity": (
    property: opacity,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

যিয়ে নিম্নলিখিত আউটপুট কৰে:

.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }

সম্পত্তি

প্ৰয়োজনীয় propertyচাবি যিকোনো সঁজুলিৰ বাবে সংহতি কৰিব লাগিব, আৰু ইয়াত এটা বৈধ CSS বৈশিষ্ট্য থাকিব লাগিব । এই বৈশিষ্ট্য সৃষ্টি কৰা সঁজুলিৰ নিয়মগোটত ব্যৱহাৰ কৰা হয়। যেতিয়া classকি' বাদ দিয়া হয়, ই অবিকল্পিত শ্ৰেণী নাম হিচাপেও কাম কৰে। text-decorationউপযোগিতাটো বিবেচনা কৰক :

$utilities: (
  "text-decoration": (
    property: text-decoration,
    values: none underline line-through
  )
);

আউটপুট:

.text-decoration-none { text-decoration: none !important; }
.text-decoration-underline { text-decoration: underline !important; }
.text-decoration-line-through { text-decoration: line-through !important; }

মূল্যবোধসমূহ

সৃষ্টি কৰা শ্ৰেণীৰ নাম আৰু নিয়মসমূহত valuesধাৰ্য্য কৰাসমূহৰ বাবে কোনবোৰ মান ব্যৱহাৰ কৰিব লাগে ধাৰ্য্য কৰিবলে চাবি ব্যৱহাৰ কৰক । propertyএটা তালিকা বা মেপ হ'ব পাৰে (ইউটিলিটিসমূহত বা এটা Sass চলকত ছেট কৰা হৈছে)।

তালিকা হিচাপে, text-decorationসঁজুলিসমূহৰ সৈতে যেনে :

values: none underline line-through

মানচিত্ৰ হিচাপে, opacityউপযোগীতাৰ সৈতে যেনে :

values: (
  0: 0,
  25: .25,
  50: .5,
  75: .75,
  100: 1,
)

তালিকা বা মেপ নিৰ্ধাৰণ কৰা এটা Sass চলক হিচাপে, আমাৰ positionসঁজুলিসমূহৰ দৰে :

values: $position-values

শ্ৰেণী

classকম্পাইল কৰা CSS ত ব্যৱহৃত শ্ৰেণী উপসৰ্গ সলনি কৰিবলে বিকল্প ব্যৱহাৰ কৰক। উদাহৰণস্বৰূপে, ৰ পৰা লৈ সলনি .opacity-*কৰিবলৈ .o-*:

$utilities: (
  "opacity": (
    property: opacity,
    class: o,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

আউটপুট:

.o-0 { opacity: 0 !important; }
.o-25 { opacity: .25 !important; }
.o-50 { opacity: .5 !important; }
.o-75 { opacity: .75 !important; }
.o-100 { opacity: 1 !important; }

CSS চলক সঁজুলিসমূহ

css-varবুলিয়ান বিকল্পক নিৰ্ধাৰণ কৰক আৰু API এ সাধাৰণ নিয়মসমূহৰ trueপৰিবৰ্তে প্ৰদত্ত নিৰ্বাচকৰ বাবে স্থানীয় CSS চলকসমূহ সৃষ্টি কৰিব । property: valueআমাৰ .text-opacity-*উপযোগীতাসমূহ বিবেচনা কৰক:

$utilities: (
  "text-opacity": (
    css-var: true,
    class: text-opacity,
    values: (
      25: .25,
      50: .5,
      75: .75,
      100: 1
    )
  ),
);

আউটপুট:

.text-opacity-25 { --bs-text-opacity: .25; }
.text-opacity-50 { --bs-text-opacity: .5; }
.text-opacity-75 { --bs-text-opacity: .75; }
.text-opacity-100 { --bs-text-opacity: 1; }

স্থানীয় CSS চলকসমূহ

এটা Sass মেপ ধাৰ্য্য কৰিবলে বিকল্প ব্যৱহাৰ কৰক local-varsযি সঁজুলি শ্ৰেণীৰ নিয়মগোটৰ ভিতৰত স্থানীয় CSS চলকসমূহ সৃষ্টি কৰিব। অনুগ্ৰহ কৰি মন কৰক যে সৃষ্টি কৰা CSS নিয়মসমূহত সেই স্থানীয় CSS চলকসমূহ গ্ৰহণ কৰিবলে অতিৰিক্ত কামৰ প্ৰয়োজন হব পাৰে। উদাহৰণস্বৰূপে, আমাৰ .bg-*উপযোগীতাসমূহ বিবেচনা কৰক:

$utilities: (
  "background-color": (
    property: background-color,
    class: bg,
    local-vars: (
      "bg-opacity": 1
    ),
    values: map-merge(
      $utilities-bg-colors,
      (
        "transparent": transparent
      )
    )
  )
);

আউটপুট:

.bg-primary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
}

ৰাজ্যসমূহ

ছ্যুডো-শ্ৰেণী ভিন্নতা সৃষ্টি কৰিবলে stateবিকল্প ব্যৱহাৰ কৰক। উদাহৰণ ছ্যুডো-ক্লাছসমূহ হ'ল :hoverআৰু :focus. যেতিয়া অৱস্থাসমূহৰ এটা তালিকা প্ৰদান কৰা হয়, সেই ছদ্ম-শ্ৰেণীৰ বাবে শ্ৰেণীনাম সৃষ্টি কৰা হয়। উদাহৰণস্বৰূপ, হোভাৰত অস্পষ্টতা সলনি কৰিবলে, যোগ কৰক state: hoverআৰু আপুনি .opacity-hover:hoverআপোনাৰ কমপাইল কৰা CSS ত পাব।

একাধিক ছ্যুডো-ক্লাছৰ প্ৰয়োজন? অৱস্থাসমূহৰ এটা স্থান-বিভাজিত তালিকা ব্যৱহাৰ কৰক: state: hover focus.

$utilities: (
  "opacity": (
    property: opacity,
    class: opacity,
    state: hover,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

আউটপুট:

.opacity-0-hover:hover { opacity: 0 !important; }
.opacity-25-hover:hover { opacity: .25 !important; }
.opacity-50-hover:hover { opacity: .5 !important; }
.opacity-75-hover:hover { opacity: .75 !important; }
.opacity-100-hover:hover { opacity: 1 !important; }

প্ৰতিক্ৰিয়াশীল

সকলো ব্ৰেকপইন্টতresponsive প্ৰতিক্ৰিয়াশীল সঁজুলিসমূহ সৃষ্টি কৰিবলে বুলিয়ান যোগ কৰক (যেনে, .opacity-md-25) ।

$utilities: (
  "opacity": (
    property: opacity,
    responsive: true,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

আউটপুট:

.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: .25 !important; }
.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }
.opacity-100 { opacity: 1 !important; }

@media (min-width: 576px) {
  .opacity-sm-0 { opacity: 0 !important; }
  .opacity-sm-25 { opacity: .25 !important; }
  .opacity-sm-50 { opacity: .5 !important; }
  .opacity-sm-75 { opacity: .75 !important; }
  .opacity-sm-100 { opacity: 1 !important; }
}

@media (min-width: 768px) {
  .opacity-md-0 { opacity: 0 !important; }
  .opacity-md-25 { opacity: .25 !important; }
  .opacity-md-50 { opacity: .5 !important; }
  .opacity-md-75 { opacity: .75 !important; }
  .opacity-md-100 { opacity: 1 !important; }
}

@media (min-width: 992px) {
  .opacity-lg-0 { opacity: 0 !important; }
  .opacity-lg-25 { opacity: .25 !important; }
  .opacity-lg-50 { opacity: .5 !important; }
  .opacity-lg-75 { opacity: .75 !important; }
  .opacity-lg-100 { opacity: 1 !important; }
}

@media (min-width: 1200px) {
  .opacity-xl-0 { opacity: 0 !important; }
  .opacity-xl-25 { opacity: .25 !important; }
  .opacity-xl-50 { opacity: .5 !important; }
  .opacity-xl-75 { opacity: .75 !important; }
  .opacity-xl-100 { opacity: 1 !important; }
}

@media (min-width: 1400px) {
  .opacity-xxl-0 { opacity: 0 !important; }
  .opacity-xxl-25 { opacity: .25 !important; }
  .opacity-xxl-50 { opacity: .5 !important; }
  .opacity-xxl-75 { opacity: .75 !important; }
  .opacity-xxl-100 { opacity: 1 !important; }
}

প্ৰিন্ট কৰক

printবিকল্প সামৰ্থবান কৰিলে প্ৰিন্টৰ বাবে সঁজুলি শ্ৰেণীসমূহো সৃষ্টি হ'ব , যি কেৱল @media print { ... }মাধ্যম প্ৰশ্নৰ ভিতৰত প্ৰয়োগ কৰা হয়।

$utilities: (
  "opacity": (
    property: opacity,
    print: true,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

আউটপুট:

.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: .25 !important; }
.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }
.opacity-100 { opacity: 1 !important; }

@media print {
  .opacity-print-0 { opacity: 0 !important; }
  .opacity-print-25 { opacity: .25 !important; }
  .opacity-print-50 { opacity: .5 !important; }
  .opacity-print-75 { opacity: .75 !important; }
  .opacity-print-100 { opacity: 1 !important; }
}

গুৰুত্ব

API দ্বাৰা সৃষ্টি কৰা সকলো সঁজুলিয়ে অন্তৰ্ভুক্ত !importantকৰে যাতে সিহঁতে উদ্দেশ্য কৰা ধৰণে উপাদানসমূহ আৰু পৰিবৰ্তক শ্ৰেণীসমূহ অভাৰৰাইড কৰে সুনিশ্চিত কৰিবলে। আপুনি এই সংহতি গোলকীয়ভাৱে $enable-important-utilitiesচলকটোৰ সৈতে টগল কৰিব পাৰে (অবিকল্পিতভাৱে true) ।

API ব্যৱহাৰ কৰি

এতিয়া যেতিয়া আপুনি সঁজুলিসমূহ API কেনেকৈ কাম কৰে তাৰ সৈতে পৰিচিত, আপোনাৰ নিজৰ স্বনিৰ্বাচিত শ্ৰেণীসমূহ কেনেকৈ যোগ কৰিব লাগে আৰু আমাৰ অবিকল্পিত সঁজুলিসমূহ পৰিবৰ্তন কৰিব লাগে শিকিব।

সঁজুলিসমূহ অভাৰৰাইড কৰক

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

$utilities: (
  "overflow": (
    responsive: true,
    property: overflow,
    values: visible hidden scroll auto,
  ),
);

উপযোগীতাসমূহ যোগ কৰক

$utilitiesনতুন সঁজুলিসমূহক অবিকল্পিত মেপত যোগ কৰিব পাৰি এটা map-merge. আমাৰ প্ৰয়োজনীয় Sass নথিপত্ৰসমূহ নিশ্চিত কৰক আৰু _utilities.scssপ্ৰথমে আমদানি কৰা হৈছে, তাৰ পিছত map-mergeআপোনাৰ অতিৰিক্ত সঁজুলিসমূহ যোগ কৰিবলৈ ব্যৱহাৰ কৰক। উদাহৰণস্বৰূপে, ইয়াত cursorতিনিটা মানৰ সৈতে এটা প্ৰতিক্ৰিয়াশীল সঁজুলি কেনেকৈ যোগ কৰিব পাৰি তাক দেখুওৱা হৈছে।

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "cursor": (
      property: cursor,
      class: cursor,
      responsive: true,
      values: auto pointer grab,
    )
  )
);

সঁজুলিসমূহ পৰিবৰ্তন কৰক

অবিকল্পিত $utilitiesমেপত থকা সঁজুলিসমূহ map-getআৰু map-mergeফলনসমূহৰ সৈতে পৰিবৰ্তন কৰক। তলৰ উদাহৰণত, আমি widthসঁজুলিসমূহত এটা অতিৰিক্ত মান যোগ কৰিছো। এটা আৰম্ভণিৰে আৰম্ভ কৰক map-mergeআৰু তাৰ পিছত আপুনি কোনটো সঁজুলি পৰিবৰ্তন কৰিব বিচাৰে ধাৰ্য্য কৰক। তাৰ পৰা, সঁজুলিৰ বিকল্পসমূহ আৰু মানসমূহ অভিগম আৰু পৰিবৰ্তন কৰিবলে নেষ্টেড "width"মেপটো আনিব।map-get

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "width": map-merge(
      map-get($utilities, "width"),
      (
        values: map-merge(
          map-get(map-get($utilities, "width"), "values"),
          (10: 10%),
        ),
      ),
    ),
  )
);

প্ৰতিক্ৰিয়াশীল সক্ষম কৰক

আপুনি এটা বৰ্ত্তমানৰ সঁজুলিসমূহৰ গোটৰ বাবে প্ৰতিক্ৰিয়াশীল শ্ৰেণীসমূহ সামৰ্থবান কৰিব পাৰে যি বৰ্তমানে অবিকল্পিতভাৱে সঁহাৰিজনক নহয়। উদাহৰণস্বৰূপে, borderশ্ৰেণীসমূহক সঁহাৰিজনক কৰিবলৈ:

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities, (
    "border": map-merge(
      map-get($utilities, "border"),
      ( responsive: true ),
    ),
  )
);

ই এতিয়া প্ৰতিটো ব্ৰেকপইণ্টৰ .borderআৰু তাৰ বাবে প্ৰতিক্ৰিয়াশীল তাৰতম্য সৃষ্টি কৰিব। .border-0আপোনাৰ সৃষ্টি কৰা CSS এনেকুৱা হ'ব:

.border { ... }
.border-0 { ... }

@media (min-width: 576px) {
  .border-sm { ... }
  .border-sm-0 { ... }
}

@media (min-width: 768px) {
  .border-md { ... }
  .border-md-0 { ... }
}

@media (min-width: 992px) {
  .border-lg { ... }
  .border-lg-0 { ... }
}

@media (min-width: 1200px) {
  .border-xl { ... }
  .border-xl-0 { ... }
}

@media (min-width: 1400px) {
  .border-xxl { ... }
  .border-xxl-0 { ... }
}

সঁজুলিসমূহৰ নাম সলনি কৰক

v4 সঁজুলিসমূহ অনুপস্থিত, বা অন্য নামকৰণ নিয়মৰ সৈতে অভ্যস্ত? সঁজুলিসমূহ API ব্যৱহাৰ কৰিব পাৰি classএটা প্ৰদত্ত সঁজুলিৰ ফলাফল অভাৰৰাইড কৰিবলে—উদাহৰণস্বৰূপ, .ms-*সঁজুলিসমূহক পুৰণিলৈ পুনৰনামকৰণ কৰিবলে .ml-*:

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities, (
    "margin-start": map-merge(
      map-get($utilities, "margin-start"),
      ( class: ml ),
    ),
  )
);

উপযোগীতাসমূহ আঁতৰাওক

গোট চাবি সংহতি কৰি যিকোনো অবিকল্পিত সঁজুলি আঁতৰাওক null। উদাহৰণস্বৰূপে, আমাৰ সকলো widthইউটিলিটি আঁতৰাবলৈ, a সৃষ্টি $utilities map-mergeকৰক আৰু ভিতৰত যোগ কৰক "width": null।

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "width": null
  )
);

RTL ত সঁজুলি আঁতৰাওক

কিছুমান এজ কেছে RTL ষ্টাইলিং কঠিন কৰি তোলে , যেনে আৰবীত লাইন ব্ৰেক। এইদৰে সঁজুলিসমূহক RTL আউটপুটৰ পৰা বাদ দিব পাৰি rtlবিকল্পটো false:

$utilities: (
  "word-wrap": (
    property: word-wrap word-break,
    class: text,
    values: (break: break-word),
    rtl: false
  ),
);

আউটপুট:

/* rtl:begin:remove */
.text-break {
  word-wrap: break-word !important;
  word-break: break-word !important;
}
/* rtl:end:remove */

ই RTL ত একো আউটপুট নকৰে, RTLCSS removeনিয়ন্ত্ৰণ নিৰ্দেশনাৰ বাবে ধন্যবাদ ।