В 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.18892
Классы для изменения цвета ссылок
Вы можете использовать ряд классов для текста, чтобы назначить цвет ссылок, отличный от стандартного голубого:
See the Pen Bootstrap 4 Link Classes by Elen (@ambassador) on CodePen.18892
Можно увидеть при наведении на ссылки или при переходе по ним клавишей 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.18892
Как можно заметить, названия классов для изменения цвета фона подобны названиям классов для текста,нужно только заменить приставку 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:
- На английском
- На русском
(Пока оценок нет)
Загрузка...