ব্যাজ

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

এই পৃষ্ঠায়

উদাহরণ

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

শিরোনাম

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

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

বোতাম

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

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

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

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

অবস্থানরত

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

<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আরও জেনেরিক সূচকের জন্য গণনা ছাড়াই আরও কয়েকটি ইউটিলিটি দিয়ে ক্লাসটি প্রতিস্থাপন করতে পারেন।

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

পটভূমি রং

ব্যাজের চেহারা দ্রুত পরিবর্তন করতে আমাদের ব্যাকগ্রাউন্ড ইউটিলিটি ক্লাস ব্যবহার করুন। অনুগ্রহ করে মনে রাখবেন যে Bootstrap এর ডিফল্ট ব্যবহার করার সময় , সঠিক স্টাইলিংয়ের জন্য .bg-lightআপনার সম্ভবত একটি পাঠ্য রঙের ইউটিলিটির প্রয়োজন হবে । .text-darkএর কারণ হল ব্যাকগ্রাউন্ড ইউটিলিটিগুলি ছাড়া কিছুই সেট করে না background-color।

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

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

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

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

পিল ব্যাজ

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

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

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

সস

ভেরিয়েবল

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