В Bootstrap-4 существует ряд классов, которые связаны с назначением цветовых характеристик для шрифта или для фона элемента. Они похожи по названию, но отличаются внешне.
Классы, изменяющие цвет шрифта
Цвет шрифта задается следующими классами:
1 2 3 4 5 6 7 8 9 10 | <p class="text-primary">.text-primary</p> <p class="text-secondary">.text-secondary</p> <p class="text-success">.text-success</p> <p class="text-danger">.text-danger</p> <p class="text-warning">.text-warning</p> <p class="text-info">.text-info</p> <p class="text-light bg-dark">.text-light</p> <p class="text-dark">.text-dark</p> <p class="text-muted">.text-muted</p> <p class="text-white bg-dark">.text-white</p> |
See the Pen Bootstrap 4 Color classes by Elen (@ambassador) on CodePen.
Классы для изменения цвета ссылок
Вы можете использовать ряд классов для текста, чтобы назначить цвет ссылок, отличный от стандартного голубого:
See the Pen Bootstrap 4 Link Classes by Elen (@ambassador) on CodePen.
Можно увидеть при наведении на ссылки или при переходе по ним клавишей Tab, что происходит изменение цвета. Стилизация отсутствует для классов ссылок .text-white
and .text-muted.
Классы, изменяющие цвет фона
1 2 3 4 5 6 7 8 9 | <div class="p-3 mb-2 bg-primary text-white">.bg-primary</div> <div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div> <div class="p-3 mb-2 bg-success text-white">.bg-success</div> <div class="p-3 mb-2 bg-danger text-white">.bg-danger</div> <div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div> <div class="p-3 mb-2 bg-info text-white">.bg-info</div> <div class="p-3 mb-2 bg-light text-dark">.bg-light</div> <div class="p-3 mb-2 bg-dark text-white">.bg-dark</div> <div class="p-3 mb-2 bg-white text-dark">.bg-white</div> |
See the Pen Bootstrap 4 Background Color classes by Elen (@ambassador) on CodePen.
Как можно заметить, названия классов для изменения цвета фона подобны названиям классов для текста,нужно только заменить приставку text-
на bg-
. Но эти классы не управляют одновременно и цветом текста. Поэтому для изменения текста нужно использовать соответствующий цветовой класс с приставкой .text-
. Если у вас внутри класса с приставку bg-
расположена ссылка, она станет темнее при наведении.
Классы для создания градиентного фона
Используя стандартную таблицу стилей Bootstrap-4, вы не сможете назначить эти классы и получить отображение градиентного фона в блоках, т.к. этим процессом управляет SCSS-переменная $enable-gradients
, которая по умолчанию равна false
и доступна для редактирования в файле _variables.scss
из пакета исходных файлов Bootstrap.
1 2 3 4 5 6 7 8 | <div class="p-3 mb-2 bg-gradient-primary text-white">.bg-gradient-primary</div> <div class="p-3 mb-2 bg-gradient-secondary text-white">.bg-gradient-secondary</div> <div class="p-3 mb-2 bg-gradient-success text-white">.bg-gradient-success</div> <div class="p-3 mb-2 bg-gradient-danger text-white">.bg-gradient-danger</div> <div class="p-3 mb-2 bg-gradient-warning text-dark">.bg-gradient-warning</div> <div class="p-3 mb-2 bg-gradient-info text-white">.bg-gradient-info</div> <div class="p-3 mb-2 bg-gradient-light text-dark">.bg-gradient-light</div> <div class="p-3 mb-2 bg-gradient-dark text-white">.bg-gradient-dark</div> |
Но, изменив значение этой переменной на true, и скомпилировав новый css-файл, вы вполне сможете использовать градиентные фоны от Bootstrap-4. Не факт, что они вам так уж сильно понадобятся, т.к. градиентные переходы в этих классах очень мягкие, почти незаметные. Наверное, именно поэтому разработчики по умолчанию не включили эти классы в состав bootstrap.css.
Ссылки на документацию Bootstrap:
Спасибо, что упорядочили 🙂