ব্যাজ
ব্যাজগুলির জন্য ডকুমেন্টেশন এবং উদাহরণ, আমাদের ছোট গণনা এবং লেবেলিং উপাদান।
emআপেক্ষিক ফন্ট সাইজিং এবং ইউনিট ব্যবহার করে তাৎক্ষণিক মূল উপাদানের আকারের সাথে মেলে ব্যাজ স্কেল ।
<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>কাউন্টার প্রদানের জন্য ব্যাজগুলি লিঙ্ক বা বোতামের অংশ হিসাবে ব্যবহার করা যেতে পারে।
<button type="button" class="btn btn-primary">
Notifications <span class="badge badge-light">4</span>
</button>মনে রাখবেন যে সেগুলি কীভাবে ব্যবহার করা হয় তার উপর নির্ভর করে, ব্যাজগুলি স্ক্রিন রিডার এবং অনুরূপ সহায়ক প্রযুক্তির ব্যবহারকারীদের জন্য বিভ্রান্তিকর হতে পারে৷ যদিও ব্যাজগুলির স্টাইলিং তাদের উদ্দেশ্য হিসাবে একটি ভিজ্যুয়াল কিউ প্রদান করে, এই ব্যবহারকারীদের কেবল ব্যাজের বিষয়বস্তু সহ উপস্থাপন করা হবে। নির্দিষ্ট পরিস্থিতির উপর নির্ভর করে, এই ব্যাজগুলি বাক্য, লিঙ্ক বা বোতামের শেষে এলোমেলো অতিরিক্ত শব্দ বা সংখ্যার মতো মনে হতে পারে।
প্রসঙ্গটি পরিষ্কার না হওয়া পর্যন্ত ("বিজ্ঞপ্তি" উদাহরণের মতো, যেখানে বোঝা যায় যে "4" হল বিজ্ঞপ্তির সংখ্যা), অতিরিক্ত পাঠ্যের একটি দৃশ্যমান লুকানো অংশের সাথে অতিরিক্ত প্রসঙ্গ অন্তর্ভুক্ত করার কথা বিবেচনা করুন।
<button type="button" class="btn btn-primary">
Profile <span class="badge badge-light">9</span>
<span class="sr-only">unread messages</span>
</button>একটি ব্যাজের চেহারা পরিবর্তন করতে নীচের উল্লিখিত সংশোধক শ্রেণীগুলির মধ্যে যেকোনো একটি যোগ করুন।
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>সহায়ক প্রযুক্তির অর্থ বোঝানো
অর্থ যোগ করার জন্য রঙ ব্যবহার করা শুধুমাত্র একটি ভিজ্যুয়াল ইঙ্গিত দেয়, যা সহায়ক প্রযুক্তির ব্যবহারকারীদের - যেমন স্ক্রিন রিডারদের কাছে জানানো হবে না। নিশ্চিত করুন যে রঙ দ্বারা নির্দেশিত তথ্য হয় বিষয়বস্তু থেকে স্পষ্ট হয় (যেমন দৃশ্যমান পাঠ্য), অথবা বিকল্প উপায়ে অন্তর্ভুক্ত করা হয়েছে, যেমন .sr-onlyক্লাসের সাথে লুকানো অতিরিক্ত পাঠ্য।
.badge-pillব্যাজগুলিকে আরও গোলাকার করতে মডিফায়ার ক্লাস ব্যবহার করুন (বড় border-radiusএবং অতিরিক্ত অনুভূমিক সহ padding)। আপনি v3 থেকে ব্যাজ মিস করলে দরকারী।
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>একটি উপাদানে প্রাসঙ্গিক .badge-*ক্লাস ব্যবহার করে দ্রুত হভার এবং ফোকাস স্টেট সহ অ্যাকশনযোগ্য ব্যাজ প্রদান করে।<a>
<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-light">Light</a>
<a href="#" class="badge badge-dark">Dark</a>