Значки(бейджі) Bootstrap 4

Значки використовуються для додавання додаткової інформації до будь-якого вмісту. Використовуйте клас .badge разом з контекстним класом (подібно .badge-secondary) в <span> елементах для створення прямокутних значків. Майте на увазі, що масштаб значків відповідає розміру батьківського елемента (якщо такий існує):

See the Pen
Bootstrap 4 Badges
by Vladislav Groniuk (@vladislav-groniuk)
on CodePen.

Контекстні значки

Використовуйте будь-який з контекстних класів ( .badge-*), щоб змінити колір значка:

See the Pen
Bootstrap 4 Badges color
by Vladislav Groniuk (@vladislav-groniuk)
on CodePen.

Значки з більш заокругленими кутами

Використовуйте .badge-pillклас, щоб зробити значки більш круглими:

See the Pen
Pill Badges
by Vladislav Groniuk (@vladislav-groniuk)
on CodePen.

Значок всередині елемента

Приклад використання значка всередині кнопки:

See the Pen
Значок всередині кнопки
by Vladislav Groniuk (@vladislav-groniuk)
on CodePen.

На цьому в мене все. Дякую велике за увагу. Надіюсь, що все ж таки хтось читає мої статті. Гарного дня.

Ось минулий урок, якщо ви раптом пропустили.

Перекладач: Гронюк Владислав
Посилання на оригінал: https://www.w3schools.com/bootstrap4/bootstrap_badges.asp

Сподобався урок? Поділись з друзями!

Вам також може сподобатись

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *

Повідомити про помилку

Текст, який буде надіслано нашим редакторам: