Бутстрап 5 цветов

Опубликовано: 17 Февраля, 2023

Утилита Bootstrap 5 Colors используется для установки цвета текста: зеленого в качестве успешного и синего в качестве основного. Есть много других информативных цветов, которые нам нужны, например опасность, предупреждение и так далее. В этой статье мы узнаем обо всех цветах текста, которые можно использовать в Bootstrap 5.

Bootstrap 5 классов цветов:

  • text-primary: этот класс используется для обозначения важного текста.
  • text-success: этот класс используется для обозначения успеха задачи с помощью текста зеленого цвета.
  • text-info: этот класс используется для представления некоторого информативного текста.
  • text-warning: этот класс используется для обозначения текста предупреждения желтым цветом.
  • text-danger: этот класс придает красный цвет тексту, представляющему опасность.
  • text-secondary: этот класс используется для представления вторичных текстов.
  • text-white: этот класс используется для изменения цвета текста на белый.
  • text-dark: этот класс используется для черного цвета текста.
  • text-body: этот класс используется для задания цвета тела по умолчанию, который обычно черный.
  • text-light: этот класс используется для получения светло-серого цвета текста.
  • text-muted: этот класс используется для обозначения приглушенного текста, обычно светло-серого цвета.

Примечание. Согласно документам, они использовали только классы цвета текста, но мы можем использовать классы фона аналогичным образом, для этого нам просто нужно заменить текст на bg(text-primary to bg-primary.)

Синтаксис:

<p class="Colors Class">
   Text Content
 </p>

Пример 1: В этом примере мы будем использовать все классы цветов информативного текста.

Выход:

Пример 2: В этом примере мы будем использовать обычные классы цвета текста, такие как белый и черный, и разные классы с разной непрозрачностью/яркостью.

Выход:

Ссылка: https://getbootstrap.com/docs/5.0/utilities/colors/#colors