বেজ
বেজৰ বাবে নথিপত্ৰ আৰু উদাহৰণ, আমাৰ সৰু গণনা আৰু লেবেলিং উপাদান।
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>মন কৰিব যে ইয়াক কেনেকৈ ব্যৱহাৰ কৰা হয় তাৰ ওপৰত নিৰ্ভৰ কৰি, বেজসমূহ স্ক্ৰীণ ৰিডাৰ আৰু অনুৰূপ সহায়ক প্ৰযুক্তিৰ ব্যৱহাৰকাৰীসকলৰ বাবে বিভ্ৰান্তিকৰ হ'ব পাৰে। বেজৰ ষ্টাইলিঙে ইয়াৰ উদ্দেশ্যৰ বিষয়ে এটা দৃশ্যমান ইংগিত প্ৰদান কৰিলেও, এই ব্যৱহাৰকাৰীসকলক কেৱল বেজৰ বিষয়বস্তু উপস্থাপন কৰা হ’ব। নিৰ্দিষ্ট পৰিস্থিতিৰ ওপৰত নিৰ্ভৰ কৰি, এই বেজবোৰ বাক্য, লিংক বা বুটামৰ শেষত থকা যাদৃচ্ছিক অতিৰিক্ত শব্দ বা সংখ্যাৰ দৰে যেন লাগিব পাৰে।
যদিহে প্ৰসংগ স্পষ্ট নহয় (“অধিসূচনা” উদাহৰণৰ দৰে, য’ত বুজা যায় যে “৪” হৈছে জাননীৰ সংখ্যা), তেন্তে দৃশ্যগতভাৱে লুকুৱাই ৰখা অতিৰিক্ত লিখনীৰ সৈতে অতিৰিক্ত প্ৰসংগ অন্তৰ্ভুক্ত কৰাৰ কথা চিন্তা কৰক।
<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>