Контейнеры Bootstrap 4
В HTML, один container (контейнер) это элемент, который может содержать другие элементы, например <div>, <span>.
Класс .container или .container-fluid могут использоваться для данных элементов.
Bootstrap требует элемента контейнера, который будет содержать сетку . Классы контейнеров были созданы специально для этой цели и они могут быть фиксированными или гибкими.
Гибкий контейнер - Class .container-fluid
Гибкий контейнер занимает всю ширину области просмотра.<div class="container-fluid">
...
</div>
Он будет плавно расширяться и сжиматься по мере изменения размера браузера. Это работает противоположно контейнеру фиксированной шириной, который будет «прыгать» на новый размер при прохождении заданной точки останова.<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Container Example</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
</head>
<body>
<h4>.container-fluid Example</h4>
<div class="container-fluid" style="background: #cdd;">
.container-fluid
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</body>
</html>
Класс .container-fluid при применении к элементу придаст данному элементу ширину 100%.

Вы можете создавать страницы Bootstrap без контейнеров, но они необходимы при использовании системы сетки.
Фиксированный контейнер - Class .container
Фиксированный контейнер— это адаптивный контейнер фиксированной ширины. Когда вы изменяете размер своего браузера, ширина контейнера остаётся неизменной, пока она не пройдёт определённую точку останова указанную вами, и в этот момент изменится на новую ширину для этой точки останова.<div class="container">
...
</div>
Основываясь на размере ширины устройств, Bootstrap делит их на 5 видов:- Устройства с шириной менее 567px называются Extra Small (очень маленькие).
- Устройства с шириной более или равные 567px называются Small (Маленькие), или называются устройства sm.
- Устройства с шириной более или равные 768px называются Medium (Средние), или называются устройства md.
- Устройства с шириной более или равные 992px называются Large (Большие), или называются устройства lg.
- Устройства с шириной более или равные 1200px называются Extra Large (Очень большие), или называются устройства xl.
Теперь давайте взглянем на пример к которому применяется класс .container
<h4 style="color:#ff9249">.container Example:</h4>
<div class="container" style="background: #cdd;">
.container
</div>
Пример 1: Если ширина устройства меньше 567px, элемент будет иметь ширину 100%.

Пример 2: Если ширина устройства больше или равна 567px и меньше 768px, то элемент будет отображаться в центре (center) и будет иметь ширину в 567px.

Пример 3: Если ширина устройства больше или равна 768px и меньше 992px, то элемент будет отображаться в центре (center) и будет иметь ширину в 768px

Пример 4: Если ширина устройства больше или равна 992px и меньше 1200px, то элемент будет отображаться в центре (center) и будет иметь ширину в 992px.
Пример 5: Если ширина устройства больше или равна 1200px, то элемент будет отображаться в центре (center) и будет иметь ширину в 1200px.
Ссылка для скачивания доступна только авторизованным пользователям, пожалуйста пройдите регистрацию.
Это займёт не более минуты. Не волнуйтесь, мы не спамим!
У данной публикации нет комментариев.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

Комментарии
Какую операционную систему вы используете