Bootstrap5 Контейнеры

В предыдущей главе мы узнали, что Bootstrap требует элемент-контейнер для обёртки содержимого сайта.

Мы можем использовать следующие два класса контейнеров:

  • .containerКласс является контейнером по умолчанию, обеспечивающим макет фиксированной ширины, ширина которого изменяется в зависимости от размеров экрана.
  • .container-fluidКласс используется для 100% ширины, занимая весь контейнер области просмотра (viewport). Использование этого класса контейнера всегда заполняет всю ширину экрана, подходит для полноэкранных макетов.

Фиксированная ширина

.containerКласс используется для создания адаптивных страниц фиксированной ширины.

Примечание:Ширина (max-width) будет пропорционально увеличиваться или уменьшаться в соответствии с шириной экрана.

Сверхмалый экран
<576px 		Маленький экран
≥576px 		Средний экран
≥768px 		Большой экран
≥992px 		Очень большой экран
≥1200px 		Сверхбольшой экран
≥1400px
max-width 100% 540px 720px 960px 1140px 1320px

В следующем примере мы можем попробовать изменить размер окна браузера, чтобы увидеть, как ширина контейнера меняется на разных экранах:

Пример использования .container в Bootstrap 5

<div class="container"> <h1>Моя первая страница Bootstrap</h1> <p>Это некоторый текст.</p> </div>

Попробуйте »

Примечание:Сверхбольшой экран (≥1400px) был впервые добавлен в Bootstrap 5. Самым большим в Bootstrap 4 был очень большой экран (≥1200px).

100% ширина

.container-fluidЭтот класс используется для создания контейнера полноэкранного размера. Контейнер всегда занимает всю ширину экрана (ширина всегда 100%):

Пример .container-fluid в Bootstrap5

<div class="container-fluid"> <h1>Моя первая страница Bootstrap</h1> <p>Использование .container-fluid, ширина 100%, занимает весь контейнер viewport (область просмотра).</p> </div>

Попробуйте »

Внутренние отступы контейнера

По умолчанию контейнеры имеют внутренние отступы слева и справа, но не имеют верхнего и нижнего внутренних отступов. Bootstrap предоставляет несколько классов для задания внутренних и внешних отступов. Например,.pt-5используется для добавления верхнего внутреннего отступа:

Пример Bootstrap5

<div class="container pt-5"></div>

Попробуйте »

Граница и цвет контейнера

Bootstrap также предоставляет некоторые классы границ и цветов (bg-dark, bg-primary и т. д.) для стилизации контейнеров:

Пример Bootstrap5

<div class="container p-5 my-5 border"></div> <div class="container p-5 my-5 bg-dark text-white"></div> <div class="container p-5 my-5 bg-primary text-white"></div>

Попробуйте »

Мы подробно объясним эти стили в следующих главах.

Адаптивные контейнеры

Вы можете использовать класс, чтобы создавать адаптивные контейнеры..container-sm|md|lg|xlЗначение свойства max-width контейнера будет изменяться в зависимости от размера экрана.

Очень маленький экран

Класс Маленький экран
<576px 		Средний экран
≥576px 		Большой экран
≥768px 		Очень большой экран
≥992px 		Сверхбольшой экран
≥1200px 		Пример Bootstrap5
≥1400px
.container-sm 100% 540px 720px 960px 1140px 1320px
.container-md 100% 100% 720px 960px 1140px 1320px
.container-lg 100% 100% 100% 960px 1140px 1320px
.container-xl 100% 100% 100% 100% 1140px 1320px
.container-xxl 100% 100% 100% 100% 100% 1320px

Пример Bootstrap5

<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> <div class="container-xxl">.container-xxl</div>

Другие расширения
ИИ думает...