Создание основного блока
Создадим серый блок, содержащий текстовую информацию и кнопку, растягивающийся на всю ширину сайта. Используем div с классом container (обеспечивает width: 100%) и вложенный div с классами row и jumbotron (задает серый фон).
<div class="container">
<div class="row jumbotron">
<!-- Здесь будет содержимое блока -->
</div>
</div>Адаптивная верстка текста и кнопки
Для адаптивной верстки текста и кнопки, занимающих всю ширину блока на мобильных устройствах, используем Bootstrap grid. Создадим div с классами, определяющими поведение на разных размерах экрана:
- col-xs-12: 12 колонок (100% ширины) на самых маленьких экранах (мобильные устройства).
- col-sm-12: 12 колонок на средних экранах (горизонтальная ориентация смартфонов).
- col-md-9: 9 колонок на средних и больших экранах (планшеты и выше).
- col-lg-9: 9 колонок на больших экранах (большие мониторы).
- col-xl-10: 10 колонок на очень больших экранах (4K и выше).
<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-10">
<p class="lead">Lorem ipsum (30 символов)</p>
<p class="lead">Lorem ipsum (30 символов)</p>
</div>
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 col-xl-2">
<a href="#" class="btn btn-lg btn-success">Читать далее</a>
</div>В первом div разместим текст с классом lead, во втором — кнопку с классами btn, btn-lg, btn-success.
Второй блок: характеристики
Создадим блок с характеристиками, используя аналогичную структуру:
<div class="container-fluid">
<div class="row text-center alert">
<div class="col-12">
<h1 class="display-4">Создание сайтов</h1>
<hr>
<p>Lorem ipsum (60 символов)</p>
</div>
</div>
</div>Здесь используется класс container-fluid для полной ширины, text-center для центрирования текста, alert для стилизации блока и display-4 для размера заголовка.
Адаптивный блок с описанием языков
Создадим адаптивный блок с описанием языков, изменяющий количество колонок в зависимости от размера экрана:
<div class="container-fluid">
<div class="row text-center p-3">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<i class="fas fa-html5"></i>
<h3>HTML5</h3>
<p>Lorem ipsum (30 символов)</p>
<hr class="m-4">
</div>
<!-- Повторяем блок для Bootstrap и CSS3 -->
</div>
</div>Используем fas fa-html5 (и аналогично для других языков) для иконок из Font Awesome.
Адаптация под разные размеры экрана (CSS)
Для корректного отображения на разных устройствах применяются CSS-стили: при максимальной ширине 450 пикселей размер текста уменьшается до 3em, а при ширине от 1100 пикселей ширина картинок устанавливается в 100%.
@media (max-width: 450px) {
/* стили для текста */
}
@media (min-width: 1100px) {
/* стили для картинок */
}(Точные стили в исходном тексте отсутствуют.)
CSS стили
Для улучшения внешнего вида используются CSS стили для классов jumbotron, lead, alert, hr и символов (цвет и размер шрифта). (Точные стили в исходном тексте отсутствуют.)
В уроке создан адаптивный основной блок сайта, используя Bootstrap 4 grid system. Создан адаптивный макет для текста и кнопок, а также адаптивные блоки с характеристиками и описанием языков программирования. Дальнейшая стилизация возможна с помощью CSS.