Контейнеры Bootstrap 5

Контейнеры Bootstrap 5

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

мы наполняем контейнер содержимым, и у нас есть два класса контейнеров:

  • .container класс предоставляет адаптивный фиксированный шириной контейнер
  • .container-fluid класс предоставляет контейнер полной ширины, охватывающий всю ширину видимости

фиксированный контейнер

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

Обратите внимание, что его ширина (max-width) изменяется на различных экранах:

Экстра-маленький
<576px 		Маленький
≥576px 		Средний
≥768px 		Большой
≥992px 		Экстра большой
≥1200px 		XXL
≥1400px
max-width 100% 540px 720px 960px 1140px 1320px

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

Пример

<div class="container">
  <h1>Моя первая страница Bootstrap</h1>
  <p>Это是一些文本。</p>
</div>

Попробуйте сами

XXL переломная точка (≥1400px) добавлена в Bootstrap 5, а в Bootstrap 4 наибольшей переломной точкой является Extra large (≥1200px).

流体 контейнер

используйте .container-fluid класс создает контейнер полной ширины, который всегда охватывает всю ширину экрана (ширина всегда 100%）：

Пример

<div class="container-fluid">
  <h1>Моя первая страница Bootstrap</h1>
  <p>Это是一些文本。</p>
</div>

Попробуйте сами

контейнерный отступ

по умолчанию, контейнер имеет горизонтальные отступы (левый и правый отступы), но нет верхних или нижних отступов (верхний и нижний отступы). Поэтому мы часто используем отступы инструментов（утилиты），например, дополнительные отступы и отступы, чтобы они выглядело лучше. Например:.pt-5 的意思是“添加一个大的頂部填充：

Пример

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

Попробуйте сами

Контейнерные рамки и цвета

Контейнерные рамки и цвета

Пример

Другие инструменты, такие как рамки и цвета, также часто используются вместе с контейнером:
<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		 XXL
≥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

Пример

<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>

Попробуйте сами