Создадим три секции: с фиксированным фоном, раскрывающуюся по клику на кнопку и простую секцию.
Первая секция
Создадим div-блок с картинкой и текстом. Для полной ширины используем класс container-fluid и добавим собственный стиль padding.
<div class="container-fluid">
<!-- Контент секции -->
</div>Внутри создадим div с классами row и g-6. Вложенный div получит класс col-lg-6. Это использует особенности Bootstrap:
- col-lg-6: на больших экранах (lg и xl) колонка занимает 50% ширины.
- На меньших экранах (смартфоны, планшеты) она занимает всю ширину (12 колонок). Bootstrap автоматически определяет точку перелома.
<div class="row g-6">
<div class="col-lg-6">
<h2>Заголовок</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Bere bere bere. Lorem ipsum (30 символов)</p>
<a href="#" class="btn btn-danger">Читать далее</a>
</div>
</div>Этот блок можно скопировать и вставить ниже. Заменим текст на картинку с помощью тега img и класса img-fluid:
<img src="[ссылка на картинку]" alt="" class="img-fluid">Картинку можно взять из интернета или папки img. Для отступа слева в 2 колонки добавим классы col-lg-4 и offset-lg-2:
<div class="col-lg-4 offset-lg-2">
<!-- Текст и картинка -->
</div>Секция с фиксированным изображением
Для фиксированного изображения используем figure с классом fixed для обертки и id="fixed" для внутреннего элемента:
<figure class="fixed">
<img id="fixed" src="[ссылка на картинку]" alt="">
</figure>Стиль пропишем в CSS.
Раскрывающаяся секция
Создадим кнопку, открывающую и закрывающую секцию с помощью Bootstrap Collapse. Кнопка типа button имеет классы btn btn-primary, атрибуты data-bs-toggle="collapse", data-bs-target="#collapseExample", aria-expanded="false" и aria-controls="collapseExample". Блок имеет id="collapseExample" и класс collapse.
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Открыть блок
</button>
<div class="collapse" id="collapseExample">
<div class="container paint">
<div class="row">
<!-- Изображения -->
</div>
</div>
</div>Добавим 4 изображения с помощью тега img, используя классы col-md-3, col-lg-3, col-xl-3, col-sm-6, col-xs-12 для адаптивной верстки:
<img src="img/gif1.gif" alt="" class="img-fluid">
<img src="img/gif2.gif" alt="" class="img-fluid">
<img src="img/gif3.gif" alt="" class="img-fluid">
<img src="img/gif4.gif" alt="" class="img-fluid">Стили
Для центрирования кнопки обернём её в div с классом text-center. CSS стили для блока с фиксированным изображением (fixed):
.fixed {
width: 400px;
height: 400px;
border: 4px solid #000;
background-color: #fff;
/* ... остальной CSS ... */
}
.fixed img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
background-size: cover;
background-position: center;
background-blend-mode: overlay;
background-color: lightblue; /* ... дополнительный цвет ... */
}Стили для кнопки и изображений в раскрывающейся секции:
.btn {
margin-bottom: 20px;
}
#collapseExample img {
max-width: 100%;
max-height: 200px;
margin-bottom: 20px;
}Создали три секции с использованием Bootstrap 4: с фиксированным фоном, раскрывающуюся и простую. Адаптивная верстка обеспечена сеткой Bootstrap и классами для разных размеров экранов. CSS используется для стилизации элементов и настройки отображения изображений.