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

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

ამ გვერდზე

მაგალითები

ბეიჯების მასშტაბირება ხდება უშუალოდ მშობელი ელემენტის ზომაზე შესაბამისი შრიფტის ზომისა და emერთეულების გამოყენებით. V5-ის მდგომარეობით, ბეჯებს აღარ აქვთ ფოკუსირება ან გადაადგილების სტილი ბმულებისთვის.

სათაურები

მაგალითი სათაურიახალი

html

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

ღილაკები

სამკერდე ნიშნები შეიძლება გამოყენებულ იქნას, როგორც ბმულების ან ღილაკების ნაწილი მრიცხველის უზრუნველსაყოფად.

html

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

გაითვალისწინეთ, რომ იმისდა მიხედვით, თუ როგორ გამოიყენება ისინი, სამკერდე ნიშნები შეიძლება დამაბნეველი იყოს ეკრანის წამკითხველებისა და მსგავსი დამხმარე ტექნოლოგიების მომხმარებლებისთვის. მიუხედავად იმისა, რომ ბეჯების სტილი იძლევა ვიზუალურ მინიშნებას მათი დანიშნულების შესახებ, ამ მომხმარებლებს უბრალოდ წარედგინება ბეჯის შინაარსი. კონკრეტული სიტუაციიდან გამომდინარე, ეს სამკერდე ნიშნები შეიძლება ჩანდეს, როგორც შემთხვევითი დამატებითი სიტყვები ან რიცხვები წინადადების, ბმულის ან ღილაკის ბოლოს.

თუ კონტექსტი არ არის ნათელი (როგორც „შეტყობინებების“ მაგალითში, სადაც გასაგებია, რომ „4“ არის შეტყობინებების რაოდენობა), განიხილეთ დამატებითი კონტექსტის ჩართვა ვიზუალურად დამალული დამატებითი ტექსტით.

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

გამოიყენეთ უტილიტები a-ს შესაცვლელად .badgeდა ბმულის ან ღილაკის კუთხეში განლაგებისთვის.

html

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

html

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

ფონის ფერები

დამატებულია v5.2.0-ში

დააყენეთ background-colorკონტრასტული წინა პლანზე ჩვენს დამხმარეებთანcolor ერთად . მანამდე საჭირო იყო ხელით დააწყვილოთ თქვენი არჩევანი და უტილიტა სტილისთვის, რომელიც კვლავ შეგიძლიათ გამოიყენოთ თუ გსურთ..text-bg-{color}.text-{color}.bg-{color}

პირველადი მეორადი წარმატებები საფრთხე გაფრთხილება ინფორმაცია Მსუბუქი Ბნელი

html

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

დამხმარე ტექნოლოგიების მნიშვნელობის გადმოცემა

მნიშვნელობის დასამატებლად ფერის გამოყენება მხოლოდ ვიზუალურ მითითებას იძლევა, რომელიც არ იქნება გადაცემული დამხმარე ტექნოლოგიების მომხმარებლებს - როგორიცაა ეკრანის წამკითხველები. დარწმუნდით, რომ ფერით აღნიშული ინფორმაცია ან აშკარაა თავად შინაარსიდან (მაგ. ხილული ტექსტი), ან შეტანილია ალტერნატიული საშუალებებით, როგორიცაა დამატებითი ტექსტი, რომელიც დამალულია .visually-hiddenკლასში.

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

გამოიყენეთ .rounded-pillსასარგებლო კლასი, რათა სამკერდე ნიშნები უფრო მომრგვალო იყოს უფრო დიდი border-radius.

html

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

CSS

ცვლადები

დამატებულია v5.2.0-ში

როგორც Bootstrap-ის განვითარებადი CSS ცვლადების მიდგომის ნაწილი, ბეჯები ახლა იყენებენ ადგილობრივ CSS ცვლადებს .badgeრეალურ დროში გაუმჯობესებული პერსონალიზაციისთვის. CSS ცვლადების მნიშვნელობები დაყენებულია Sass-ის საშუალებით, ამიტომ Sass-ის პერსონალიზაცია კვლავ მხარდაჭერილია.

  --#{$prefix}badge-padding-x: #{$badge-padding-x};
  --#{$prefix}badge-padding-y: #{$badge-padding-y};
  @include rfs($badge-font-size, --#{$prefix}badge-font-size);
  --#{$prefix}badge-font-weight: #{$badge-font-weight};
  --#{$prefix}badge-color: #{$badge-color};
  --#{$prefix}badge-border-radius: #{$badge-border-radius};

Sass ცვლადები

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