Bootstrap 4 Контейнеры
Контейнеры
Из предыдущей главы вы узнали, что Bootstrap требует наличия содержащего элемента для переноса содержимого сайта.
Контейнеры используются для заполнения содержимого внутри них, и доступно два класса контейнеров:
- Класс
.containerпредоставляет отзывчивый контейнер с фиксированной шириной . - Класс
.container-fluidпредоставляет контейнер полной ширины , охватывающий всю ширину окна просмотра.
Фиксированный контейнер
Используйте .containerкласс для создания адаптивного контейнера с фиксированной шириной.
Обратите внимание, что его ширина ( max-width) будет меняться для разных размеров экрана:
|
Очень маленький <576px |
Маленький ≥576px |
Средний ≥768px |
Большой ≥992px |
Очень большой ≥1200px |
|
|---|---|---|---|---|---|
| Максимальная ширина | 100% | 540 пикселей | 720 пикселей | 960 пикселей | 1140 пикселей |
Откройте приведенный ниже пример и измените размер окна браузера, чтобы увидеть, что ширина контейнера будет меняться в разных точках останова:
Пример
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
Контейнер для жидкости
Используйте .container-fluidкласс для создания контейнера полной ширины, который всегда будет охватывать всю ширину экрана ( widthвсегда 100%):
Пример
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
Заполнение контейнера
По умолчанию контейнеры имеют отступы слева и справа по 15 пикселей, без отступов сверху и снизу. Поэтому мы часто используем утилиты для отступов , такие как дополнительные отступы и поля, чтобы они выглядели еще лучше. Например, .pt-3означает «добавить верхний отступ 16px»:
Пример
<div class="container pt-3"></div>
Вы узнаете гораздо больше об утилитах интервалов в нашей главе «Утилиты BS4 » .
Граница и цвет контейнера
Другие утилиты, такие как границы и цвета, также часто используются вместе с контейнерами:
Пример
Моя первая страница на бутстрапе
У этого контейнера есть граница и некоторые дополнительные отступы и поля.
Моя первая страница на бутстрапе
Этот контейнер имеет темный цвет фона и белый текст, а также некоторые дополнительные отступы и поля.
Моя первая страница на бутстрапе
Этот контейнер имеет синий цвет фона и белый текст, а также некоторые дополнительные отступы и поля.
<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классы для создания адаптивных контейнеров.
Контейнер max-widthбудет меняться на разных размерах экрана/видовых экранах:
| Класс |
Очень маленький <576px |
Маленький ≥576px |
Средний ≥768px |
Большой ≥992px |
Очень большой ≥1200px |
|---|---|---|---|---|---|
.container-sm |
100% | 540 пикселей | 720 пикселей | 960 пикселей | 1140 пикселей |
.container-md |
100% | 100% | 720 пикселей | 960 пикселей | 1140 пикселей |
.container-lg |
100% | 100% | 100% | 960 пикселей | 1140 пикселей |
.container-xl |
100% | 100% | 100% | 100% | 1140 пикселей |
Пример
<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>
Вы знали?
W3.CSS — отличная альтернатива Bootstrap 4.
W3.CSS меньше, быстрее и проще в использовании.
Если вы хотите изучить W3.CSS, перейдите к нашему учебному пособию по W3.CSS .