Bootstrap Layout (макет)

Breakpoints

Breakpoints — это точки, на которых меняется внешний вид веб-страницы в зависимости от размера экрана. В Bootstrap 5 используются следующие брейкпоинты:

1. xs (Extra Small): Для мобильных устройств.
2. sm (Small): Для планшетов и небольших экранов.
3. md (Medium): Для средних экранов.
4. lg (Large): Для больших экранов.
5. xl (Extra Large): Для очень больших экранов.

Узнать больше

Containers

Containers — это обертки для контента, которые помогают управлять шириной и отступами. В Bootstrap 5 есть два типа контейнеров:

1. .container: Фиксированная ширина, которая меняется в зависимости от брейкпоинта.
2. .container-fluid: Полная ширина экрана.

Узнать больше

Grid

Grid — это система разметки, которая позволяет создавать гибкие сетки для размещения контента. Основные компоненты:

1. .row: Строка, содержащая колонки.
2. .col: Колонка, которая занимает определенное количество колонок в строке.

Узнать больше

Columns

Columns — это горизонтальные блоки контента внутри колонок. Можно использовать классы .col-1, .col-2, …, .col-12 для разных размеров колонок.

Узнать больше

Gutters

Gutters — это отступы между колонками. В Bootstrap 5 можно управлять отступами с помощью классов .g-1, .g-2, …, .g-5.

Узнать больше

Utilities

Utilities — это вспомогательные классы для быстрой стилизации элементов. Например, .text-center центрирует текст, а .bg-primary задает фоновый цвет.

Узнать больше

Z-index

Z-index — это свойство, которое определяет порядок наложения элементов друг на друга. В Bootstrap 5 можно использовать классы .z-index-1, .z-index-2, …, .z-index-5.

Узнать больше

CSS Grid

CSS Grid — это новый метод разметки, который позволяет создавать сложные сетки с помощью CSS. В Bootstrap 5 можно комбинировать его с классами для создания адаптивных макетов.

Узнать больше

Заключение

Bootstrap 5 предоставляет множество инструментов для создания красивых и адаптивных веб-страниц. Используйте его возможности, чтобы разрабатывать проекты современного дизайна!