სამკერდე ნიშნები
დოკუმენტაცია და მაგალითები სამკერდე ნიშნებისთვის, ჩვენი მცირე რაოდენობის და ეტიკეტირების კომპონენტისთვის.
ბეიჯების მასშტაბირება ხდება უშუალოდ მშობელი ელემენტის ზომაზე შესაბამისი შრიფტის ზომისა და 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>