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

Bootstrap требует наличия элемента контейнера для хранения элементов и поддержки своей системы сеток (подробнее о ней далее). Классы контейнеров Bootstrap были созданы специально для этой цели.

Bootstrap 5 включает три разных типа контейнеров:

Фиксированный
Гибкий
Адаптивный

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

Фиксированный контейнер — это адаптивный контейнер фиксированной ширины. При изменении размеров браузера его ширина остается неизменной, пока он не пройдёт определенную контрольную точку (указанную вами — подробнее об этом далее), после чего контейнер изменит размер до новой ширины для этой контрольной точки.

Код примера скопирован в буфер

<!DOCTYPE html>
<title>Мой пример</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<style>
 body {
  padding-top: 1em;
 } 
</style>
<div class="container">
 Пример контейнера фиксированной ширины, который устанавливается с помощью класса <code>.container</code>.
</div>

<style>
 .container {
  background: yellowgreen;
  text-align: center;
  padding-top: 150px;
  padding-bottom: 150px;
 }
</style>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</script>

Гибкие контейнеры

Гибкий контейнер занимает всю ширину области просмотра. Он будет плавно расширяться и сжиматься при изменении размеров браузера. Это поведение отличается от контейнера с фиксированной шириной, который «прыгает» к новому размеру, когда вы проходите заданную контрольную точку.

Код примера скопирован в буфер

<!DOCTYPE html>
<title>Мой пример</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<style>
 body {
  padding-top: 1em;
 } 
</style>
<div class="container-fluid">
 Пример гибкого контейнера, который устанавливается с помощью класса <code>.container-fluid</code>.
</div>

<style>
 .container-fluid {
  background: yellowgreen;
  text-align: center;
  padding-top: 150px;
  padding-bottom: 150px;
 }
</style>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</script>

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

Адаптивные контейнеры позволяют задать класс, который будет иметь ширину 100% до достижения указанной контрольной точки. Вы указываете такую точку, добавляя её к классу контейнера (например, container-lg, чтобы сделать контейнер шириной 100% до контрольной точки large). Контрольной точкой может быть любое из следующих значений: sm, md, lg, xl и xxl.

Код примера скопирован в буфер

<!DOCTYPE html>
<title>Мой пример</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<style>
 body {
  padding-top: 1em;
 } 
</style>
<div class="container-lg">
 Пример адаптивного контейнера, который устанавливается с помощью класса <code>.container-lg</code>.
</div>

<style>
.container-lg {
  background: yellowgreen;
  text-align: center;
  padding-top: 150px;
  padding-bottom: 150px;
 }
</style>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</script>

Хотя вы можете создавать страницы Bootstrap без контейнеров, они необходимы при использовании системы сеток Bootstrap.

Автор: Йен Диксон

Последнее изменение: 22.02.2024