ইউটিলিটি API

ইউটিলিটি এপিআই হল একটি Sass-ভিত্তিক টুল যা ইউটিলিটি ক্লাস তৈরি করতে পারে।

এই পৃষ্ঠায়

বুটস্ট্র্যাপ ইউটিলিটিগুলি আমাদের ইউটিলিটি API দিয়ে তৈরি করা হয় এবং Sass এর মাধ্যমে আমাদের ইউটিলিটি ক্লাসের ডিফল্ট সেট পরিবর্তন বা প্রসারিত করতে ব্যবহার করা যেতে পারে। আমাদের ইউটিলিটি API বিভিন্ন বিকল্প সহ ক্লাসের পরিবার তৈরি করার জন্য Sass মানচিত্র এবং ফাংশনের একটি সিরিজের উপর ভিত্তি করে। আপনি যদি Sass মানচিত্রের সাথে অপরিচিত হন তবে শুরু করতে অফিসিয়াল Sass ডক্স পড়ুন ।

মানচিত্রে আমাদের সমস্ত ইউটিলিটি রয়েছে এবং পরে আপনার কাস্টম মানচিত্রের $utilitiesসাথে একত্রিত করা হয় , যদি উপস্থিত থাকে। $utilitiesইউটিলিটি ম্যাপে ইউটিলিটি গ্রুপগুলির একটি মূল তালিকা রয়েছে যা নিম্নলিখিত বিকল্পগুলি গ্রহণ করে:

অপশন	টাইপ	ডিফল্ট মান	বর্ণনা
`property`	প্রয়োজন	-	সম্পত্তির নাম, এটি একটি স্ট্রিং বা স্ট্রিংগুলির একটি অ্যারে হতে পারে (যেমন, অনুভূমিক প্যাডিং বা মার্জিন)।
`values`	প্রয়োজন	-	মানের তালিকা, অথবা একটি মানচিত্র যদি আপনি না চান যে ক্লাসের নামটি মানের মতই হোক। `null`মানচিত্র কী হিসাবে ব্যবহার করা হলে `class`, ক্লাসের নামের আগে লেখা হয় না।
`class`	ঐচ্ছিক	শূন্য	উৎপন্ন শ্রেণীর নাম। যদি প্রদান না করা হয় এবং `property`স্ট্রিংগুলির একটি অ্যারে হয়, `class`তাহলে অ্যারের প্রথম উপাদানে ডিফল্ট হবে `property`। যদি প্রদান না করা হয় এবং `property`একটি স্ট্রিং হয়, কীগুলি নামের `values`জন্য ব্যবহার করা হয় ।`class`
`css-var`	ঐচ্ছিক	`false`	CSS নিয়মের পরিবর্তে CSS ভেরিয়েবল তৈরি করতে বুলিয়ান।
`css-variable-name`	ঐচ্ছিক	শূন্য	নিয়ম সেটের ভিতরে 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,
)

positionএকটি Sass ভেরিয়েবল হিসাবে যা আমাদের ইউটিলিটিগুলির মতো তালিকা বা মানচিত্র সেট করে :

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

যদি , প্রতিটি কীগুলির class: nullজন্য ক্লাস তৈরি করে :values

$utilities: (
  "visibility": (
    property: visibility,
    class: null,
    values: (
      visible: visible,
      invisible: hidden,
    )
  )
);

আউটপুট:

.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }

CSS পরিবর্তনশীল ইউটিলিটি

css-varবুলিয়ান বিকল্পটি সেট করুন এবং API স্বাভাবিক নিয়মের trueপরিবর্তে প্রদত্ত নির্বাচকের জন্য স্থানীয় CSS ভেরিয়েবল তৈরি করবে । property: valueএকটি ঐচ্ছিক যোগ করুনcss-variable-nameক্লাসের নামের চেয়ে আলাদা CSS ভেরিয়েবল নাম সেট করতে

আমাদের .text-opacity-*ইউটিলিটি বিবেচনা করুন. যদি আমরা css-variable-nameবিকল্প যোগ করি, আমরা একটি কাস্টম আউটপুট পাব।

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

আউটপুট:

.text-opacity-25 { --bs-text-alpha: .25; }
.text-opacity-50 { --bs-text-alpha: .5; }
.text-opacity-75 { --bs-text-alpha: .75; }
.text-opacity-100 { --bs-text-alpha: 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; }
}

গুরুত্ব

এপিআই দ্বারা উত্পন্ন সমস্ত ইউটিলিটিগুলির মধ্যে রয়েছে !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/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

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

@import "bootstrap/scss/utilities/api";

ইউটিলিটিগুলি পরিবর্তন করুন

$utilitiesডিফল্ট মানচিত্রে বিদ্যমান ইউটিলিটিগুলি map-getএবং map-mergeফাংশনগুলির সাথে পরিবর্তন করুন। নীচের উদাহরণে, আমরা widthইউটিলিটিগুলিতে একটি অতিরিক্ত মান যোগ করছি। একটি প্রাথমিক দিয়ে শুরু করুন map-mergeএবং তারপরে আপনি কোন ইউটিলিটি পরিবর্তন করতে চান তা নির্দিষ্ট করুন৷ সেখান থেকে, ইউটিলিটির বিকল্প এবং মানগুলি অ্যাক্সেস এবং সংশোধন করতে নেস্টেড "width"মানচিত্রটি আনুন।map-get

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@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%),
        ),
      ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

প্রতিক্রিয়াশীল সক্ষম করুন

আপনি বিদ্যমান ইউটিলিটিগুলির একটি সেটের জন্য প্রতিক্রিয়াশীল ক্লাসগুলি সক্ষম করতে পারেন যা বর্তমানে ডিফল্টরূপে প্রতিক্রিয়াশীল নয়। উদাহরণস্বরূপ, borderক্লাসগুলিকে প্রতিক্রিয়াশীল করতে:

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

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

@import "bootstrap/scss/utilities/api";

এটি এখন প্রতিটি ব্রেকপয়েন্ট .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 ইউটিলিটি, নাকি অন্য নামকরণের নিয়মে অভ্যস্ত? ইউটিলিটি এপিআই classএকটি প্রদত্ত ইউটিলিটির ফলাফলকে ওভাররাইড করতে ব্যবহার করা যেতে পারে-উদাহরণস্বরূপ, .ms-*ইউটিলিটিগুলিকে পুরানো নামকরণ করতে .ml-*:

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

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

@import "bootstrap/scss/utilities/api";

ইউটিলিটিগুলি সরান

map-remove()Sass ফাংশন দিয়ে যেকোনো ডিফল্ট ইউটিলিটি সরান ।

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

// Remove multiple utilities with a comma-separated list
$utilities: map-remove($utilities, "width", "float");

@import "bootstrap/scss/utilities/api";

map-merge()আপনি Sass ফাংশন ব্যবহার করতে nullপারেন এবং ইউটিলিটি অপসারণ করতে গ্রুপ কী সেট করতে পারেন।

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

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

@import "bootstrap/scss/utilities/api";

যোগ করুন, অপসারণ করুন, সংশোধন করুন

map-merge()আপনি Sass ফাংশন দিয়ে একসাথে অনেকগুলি ইউটিলিটি যোগ, অপসারণ এবং সংশোধন করতে পারেন । আপনি কীভাবে আগের উদাহরণগুলিকে একটি বড় মানচিত্রে একত্রিত করতে পারেন তা এখানে।

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

$utilities: map-merge(
  $utilities,
  (
    // Remove the `width` utility
    "width": null,

    // Make an existing utility responsive
    "border": map-merge(
      map-get($utilities, "border"),
      ( responsive: true ),
    ),

    // Add new utilities
    "cursor": (
      property: cursor,
      class: cursor,
      responsive: true,
      values: auto pointer grab,
    )
  )
);

@import "bootstrap/scss/utilities/api";

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

এটি আরটিএল-এ কিছু আউটপুট করে না, RTLCSS removeনিয়ন্ত্রণ নির্দেশকে ধন্যবাদ ।