Bootstrap 4 Контейнеры
Контейнеры
Из предыдущей главы вы узнали, что Bootstrap требует содержащего элемента для переноса содержимого сайта.
Контейнеры используются для заполнения содержимого внутри них, и доступны два класса контейнеров:
- Класс
.containerпредоставляет адаптивный контейнер фиксированной ширины - Класс
.container-fluidпредоставляет контейнер полной ширины, охватывающий всю ширину области просмотра
Фиксированный контейнер
Используйте класс .container для создания адаптивного контейнера фиксированной ширины.
Обратите внимание, что его ширина (max-width) будет меняться на разных размерах экрана:
|
Extra small <576px |
Small ≥576px |
Medium ≥768px |
Large ≥992px |
Extra large ≥1200px |
|
|---|---|---|---|---|---|
| max-width | 100% | 540px | 720px | 960px | 1140px |
Откройте пример ниже и измените размер окна браузера, чтобы увидеть, что ширина контейнера будет меняться в разных брекпоинтах (точках останова):
Пример
<div class="container">
<h1>Моя первая Bootstrap страница</h1>
<p>Здесь какой-то текст.</p>
</div>
Попробуйте сами »
Жидкий контейнер (fluid)
Используйте класс .container-fluid для создания контейнера полной ширины, который всегда будет охватывать всю ширину экрана (width и всегда является 100%):
Пример
<div class="container-fluid">
<h1>Моя первая Bootstrap страница</h1>
<p>Здесь какой-то текст.</p>
</div>
Попробуйте сами »
Отступы контейнера (padding)
По умолчанию контейнеры имеют отступы 15px слева и справа, без верхнего или нижнего отступа. Поэтому мы часто используем интервальные утилиты, такие как дополнительные отступы и поля, чтобы они выглядели еще лучше. Например, .pt-3 означает "добавить верхний отступ 16px":
Вы узнаете намного больше об интервальных утилитах в разделе BS4 Утилиты.
Контейнер границы и цвета
Другие утилиты, такие как границы и цвета, также часто используются вместе с контейнерами:
Пример
Моя первая Bootstrap страница
Этот контейнер имеет границу и некоторые дополнительные отступы и поля.
Моя первая Bootstrap страница
Этот контейнер имеет темный цвет фона и белый текст, а также некоторые дополнительные отступы и поля.
Моя первая Bootstrap страница
Этот контейнер имеет синий цвет фона и белый текст, а также некоторые дополнительные отступы и поля.
<div class="container p-3 my-3 border"></div>
<div class="container
p-3 my-3 bg-dark text-white"></div>
<div class="container p-3 my-3 bg-primary
text-white"></div>
Попробуйте сами »
Вы узнаете намного больше о цветах и утилитах границ, в разделах BS4 Цвета и BS4 Утилиты на нашем сайте.
Адаптивные (отзывчивые) контейнеры
Также можно использовать классы .container-sm|md|lg|xl для создания адаптивных контейнеров.
Ширина контейнера будет меняться на разных размерах экрана / областях просмотра:
| Класс |
Extra small <576px |
Small ≥576px |
Medium ≥768px |
Large ≥992px |
Extra large ≥1200px |
|---|---|---|---|---|---|
.container-sm |
100% | 540px | 720px | 960px | 1140px |
.container-md |
100% | 100% | 720px | 960px | 1140px |
.container-lg |
100% | 100% | 100% | 960px | 1140px |
.container-xl |
100% | 100% | 100% | 100% | 1140px |
Пример
<div class="container-sm">.container-sm</div>
<div
class="container-md">.container-md</div>
<div
class="container-lg">.container-lg</div>
<div
class="container-xl">.container-xl</div>
Попробуйте сами »
