ব্যাজ

ব্যাজগুলির জন্য ডকুমেন্টেশন এবং উদাহরণ, আমাদের ছোট গণনা এবং লেবেলিং উপাদান।

এই পৃষ্ঠায়

উদাহরণ

emআপেক্ষিক ফন্ট সাইজিং এবং ইউনিট ব্যবহার করে তাৎক্ষণিক মূল উপাদানের আকারের সাথে মেলে ব্যাজ স্কেল । v5 অনুসারে, ব্যাজগুলিতে আর লিঙ্কগুলির জন্য ফোকাস বা হোভার শৈলী নেই৷

শিরোনাম

উদাহরণ শিরোনামনতুন

html

<h1>Example heading <span class="badge bg-secondary">New</span></h1>
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
<h3>Example heading <span class="badge bg-secondary">New</span></h3>
<h4>Example heading <span class="badge bg-secondary">New</span></h4>
<h5>Example heading <span class="badge bg-secondary">New</span></h5>
<h6>Example heading <span class="badge bg-secondary">New</span></h6>

বোতাম

কাউন্টার প্রদানের জন্য ব্যাজগুলি লিঙ্ক বা বোতামের অংশ হিসাবে ব্যবহার করা যেতে পারে।

html

<button type="button" class="btn btn-primary">
  Notifications <span class="badge text-bg-secondary">4</span>
</button>

মনে রাখবেন যে সেগুলি কীভাবে ব্যবহার করা হয় তার উপর নির্ভর করে, ব্যাজগুলি স্ক্রিন রিডার এবং অনুরূপ সহায়ক প্রযুক্তির ব্যবহারকারীদের জন্য বিভ্রান্তিকর হতে পারে৷ যদিও ব্যাজগুলির স্টাইলিং তাদের উদ্দেশ্য হিসাবে একটি চাক্ষুষ সংকেত প্রদান করে, এই ব্যবহারকারীদের কেবল ব্যাজের বিষয়বস্তু সহ উপস্থাপন করা হবে। নির্দিষ্ট পরিস্থিতির উপর নির্ভর করে, এই ব্যাজগুলি বাক্য, লিঙ্ক বা বোতামের শেষে এলোমেলো অতিরিক্ত শব্দ বা সংখ্যার মতো মনে হতে পারে।

প্রসঙ্গটি পরিষ্কার না হওয়া পর্যন্ত ("বিজ্ঞপ্তি" উদাহরণের মতো, যেখানে বোঝা যায় যে "4" হল বিজ্ঞপ্তির সংখ্যা), অতিরিক্ত পাঠ্যের একটি দৃশ্যমান লুকানো অংশের সাথে অতিরিক্ত প্রসঙ্গ অন্তর্ভুক্ত করার কথা বিবেচনা করুন।

অবস্থানরত

একটি পরিবর্তন করতে ইউটিলিটিগুলি ব্যবহার করুন .badgeএবং এটি একটি লিঙ্ক বা বোতামের কোণে স্থাপন করুন৷

html

<button type="button" class="btn btn-primary position-relative">
  Inbox
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    99+
    <span class="visually-hidden">unread messages</span>
  </span>
</button>

আপনি .badgeআরও জেনেরিক সূচকের জন্য গণনা ছাড়াই আরও কয়েকটি ইউটিলিটি দিয়ে ক্লাসটি প্রতিস্থাপন করতে পারেন।

html

<button type="button" class="btn btn-primary position-relative">
  Profile
  <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
    <span class="visually-hidden">New alerts</span>
  </span>
</button>

পটভূমি রং

v5.2.0 এ যোগ করা হয়েছে

আমাদের সাহায্যকারীদেরbackground-color সাথে বিপরীত অগ্রভাগের colorসাথে একটি সেট করুন । আগে স্টাইলিংয়ের জন্য আপনার পছন্দ এবং ইউটিলিটিগুলিকে ম্যানুয়ালি জোড়া লাগানো প্রয়োজন ছিল , যা আপনি চাইলে ব্যবহার করতে পারেন।.text-bg-{color}.text-{color}.bg-{color}

প্রাথমিক মাধ্যমিক সফলতা বিপদ সতর্কতা তথ্য আলো অন্ধকার

html

<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-secondary">Secondary</span>
<span class="badge text-bg-success">Success</span>
<span class="badge text-bg-danger">Danger</span>
<span class="badge text-bg-warning">Warning</span>
<span class="badge text-bg-info">Info</span>
<span class="badge text-bg-light">Light</span>
<span class="badge text-bg-dark">Dark</span>

সহায়ক প্রযুক্তির অর্থ বোঝানো

অর্থ যোগ করার জন্য রঙ ব্যবহার করা শুধুমাত্র একটি ভিজ্যুয়াল ইঙ্গিত দেয়, যা সহায়ক প্রযুক্তির ব্যবহারকারীদের - যেমন স্ক্রিন রিডারদের কাছে জানানো হবে না। নিশ্চিত করুন যে রঙ দ্বারা নির্দেশিত তথ্য হয় বিষয়বস্তু থেকে স্পষ্ট হয় (যেমন দৃশ্যমান পাঠ্য), অথবা বিকল্প উপায়ে অন্তর্ভুক্ত করা হয়েছে, যেমন .visually-hiddenক্লাসের সাথে লুকানো অতিরিক্ত পাঠ্য।

পিল ব্যাজ

.rounded-pillব্যাজগুলিকে একটি বড় দিয়ে আরও গোলাকার করতে ইউটিলিটি ক্লাস ব্যবহার করুন border-radius।

প্রাথমিক মাধ্যমিক সফলতা বিপদ সতর্কতা তথ্য আলো অন্ধকার

html

<span class="badge rounded-pill text-bg-primary">Primary</span>
<span class="badge rounded-pill text-bg-secondary">Secondary</span>
<span class="badge rounded-pill text-bg-success">Success</span>
<span class="badge rounded-pill text-bg-danger">Danger</span>
<span class="badge rounded-pill text-bg-warning">Warning</span>
<span class="badge rounded-pill text-bg-info">Info</span>
<span class="badge rounded-pill text-bg-light">Light</span>
<span class="badge rounded-pill text-bg-dark">Dark</span>

সিএসএস

ভেরিয়েবল

v5.2.0 এ যোগ করা হয়েছে

বুটস্ট্র্যাপের বিকশিত CSS ভেরিয়েবল পদ্ধতির অংশ হিসাবে, ব্যাজগুলি এখন .badgeউন্নত রিয়েল-টাইম কাস্টমাইজেশনের জন্য স্থানীয় CSS ভেরিয়েবল ব্যবহার করে। CSS ভেরিয়েবলের মান Sass এর মাধ্যমে সেট করা হয়, তাই Sass কাস্টমাইজেশন এখনও সমর্থিত।

  --#{$prefix}badge-padding-x: #{$badge-padding-x};
  --#{$prefix}badge-padding-y: #{$badge-padding-y};
  @include rfs($badge-font-size, --#{$prefix}badge-font-size);
  --#{$prefix}badge-font-weight: #{$badge-font-weight};
  --#{$prefix}badge-color: #{$badge-color};
  --#{$prefix}badge-border-radius: #{$badge-border-radius};

Sass ভেরিয়েবল

$badge-font-size:                   .75em;
$badge-font-weight:                 $font-weight-bold;
$badge-color:                       $white;
$badge-padding-y:                   .35em;
$badge-padding-x:                   .65em;
$badge-border-radius:               $border-radius;