স্কিপ করে মূল কন্টেন্ট এ যাও ডক্স নেভিগেশন এড়িয়ে যান
in English

ইউটিলিটি API

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

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

মানচিত্রে আমাদের সমস্ত ইউটিলিটি রয়েছে এবং পরে আপনার কাস্টম মানচিত্রের $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,
)

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

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

গুরুত্ব

এপিআই দ্বারা উত্পন্ন সমস্ত ইউটিলিটিগুলির মধ্যে রয়েছে !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 ইউটিলিটি, বা অন্য নামকরণ কনভেনশনে অভ্যস্ত? ইউটিলিটি এপিআই 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ইউটিলিটিগুলি সরাতে, একটি তৈরি $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 */

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