ইউটিলিটি 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
নিয়ন্ত্রণ নির্দেশকে ধন্যবাদ ।