В Bootstrap, задание стилей для области по вертикали может быть достигнуто с помощью использования классов для размеров и размещения встроенных в фреймворк.
Есть несколько способов задать вертикальное размещение элементов в Bootstrap:
1. Разделение на колонки (col-*-* классы):
Bootstrap использует гибкую сетку на основе колонок для создания адаптивных макетов. Вы можете использовать классы col-*-* для разделения контейнеров на вертикальные колонки и затем применять стили к каждой колонке. Например, если у вас есть контейнер с двумя колонками, вы можете использовать следующий код:
<div class="row">
<div class="col-md-6">
<!-- Стили для левой колонки -->
</div>
<div class="col-md-6">
<!-- Стили для правой колонки -->
</div>
</div>
В этом примере col-md-6 говорит Bootstrap распределить контейнер на две колонки равной ширины на устройствах с разрешением, превышающим md (medium).
2. Использование классов выравнивания (align-items-*):
Bootstrap также предоставляет классы выравнивания (align-items-*), чтобы задать вертикальное размещение элементов внутри контейнера. Вы можете использовать один из следующих классов, чтобы установить желаемое выравнивание:
- align-items-start: выравнивание элементов по верхнему краю контейнера.
- align-items-center: выравнивание элементов по центру контейнера.
- align-items-end: выравнивание элементов по нижнему краю контейнера.
Пример использования:
<div class="d-flex align-items-start"> <!-- Стили для верхнего выравнивания --> </div> <div class="d-flex align-items-center"> <!-- Стили для центрального выравнивания --> </div> <div class="d-flex align-items-end"> <!-- Стили для нижнего выравнивания --> </div>
В этом примере d-flex говорит Bootstrap применить стили для гибкого размещения элементов. align-items-* указывает, каким образом надо расположить элементы внутри контейнера по вертикали.
3. Использование классов высоты (h-*):
Bootstrap предоставляет также классы высоты (h-*), чтобы задать высоту элементов. Например, чтобы задать фиксированную высоту для контейнера, вы можете использовать класс h-100 следующим образом:
<div class="h-100"> <!-- Стили для фиксированной высоты --> </div>
Также вы можете использовать класс h-auto, чтобы автоматически регулировать высоту контейнера в зависимости от его содержимого.
Это основные методы, которые можно использовать для задания стилей для области по вертикали в Bootstrap. Вы можете комбинировать эти классы или применять дополнительные кастомные стили, чтобы добиться нужного внешнего вида и размещения элементов.