Всем привет! В этом материале рассмотрим утилиты и типографию в Bootstrap 4 и преобразим наш блок, написанный в предыдущей статье.
Всем привет! В этом материале рассмотрим утилиты и типографию в Bootstrap 4 и преобразим наш блок, написанный в предыдущей статье.
Если вы перейдете на официальный сайт Bootstrap 4, то увидите, что там есть огромное количество утилит в разделе utilities. Чтобы их использовать, просто выберите нужную категорию и посмотрите пример. Оттуда же вы можете взять код. Рассмотрим некоторые из утилит, с помощью которых и преукрасим наш блок с текстом.
Перейдите в категорию colors, и там вы найдете, как можно изменить стиль для заднего фона у нашего блока. Давайте сделаем его голубого цвета, а текст – белого:
<div class="jumbotron jumbotron-fluid bg-info text-white" style="background: #aaa;">
<div class="container">
<h1>Добро пожаловать на сайт</h1>
<p>На этом сайте вы найдете множество обучающих материалов</p>
</div>
</div>
Как видите, чтобы поменять оформление, нужно просто написать необходимые классы к нашему Jumbotron. Давайте продолжим улучшать наш баннер и поменяем размер текста, а также выровняем его по центру:
<div class="jumbotron jumbotron-fluid bg-info text-white text-center" style="background: #aaa;">
<div class="container">
<h1 class="display-1">Добро пожаловать на сайт</h1>
<p class="lead">На этом сайте вы найдете множество обучающих материалов</p>
</div>
</div>
А на этом сегодня все. Спасибо за внимание!
