გადადით მთავარ შინაარსზე დოკუმენტების ნავიგაციაზე გადასვლა
in English

სამკერდე ნიშნები

დოკუმენტაცია და მაგალითები სამკერდე ნიშნებისთვის, ჩვენი მცირე რაოდენობის და ეტიკეტირების კომპონენტისთვის.

მაგალითები

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

პოზიციონირებული

გამოიყენეთ უტილიტები a-ს შესაცვლელად .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;