Узнайте о контейнерах в Bootstrap 5
Контейнеры в Bootstrap важны при программировании. Вот все, что вам нужно знать о контейнерах в Bootstrap 5.
Что такое контейнеры в Bootstrap?
В Bootstrap контейнеры используются для установки полей для контента. Он содержит элементы строки, а элемент строки является контейнером столбца. Это называется сеточной системой. У вас есть два класса контейнеров в Bootstrap, в том числе:
- .контейнер
- .контейнер-жидкость
Теория такова, проще всего представить, проще говоря, Container создает коробку, содержащую внутри другие элементы. Ширина этого поля устанавливается в соответствии с размером экрана дисплея.
В таблице ниже показано, как меняется максимальная ширина каждого контейнера с каждой точкой останова.
Например, при использовании класса .container фактическая ширина контейнера будет равна 100 %, если ширина области просмотра равна
Аналогично при использовании класса .container-lg фактическая ширина контейнера будет равна 100%, пока ширина области просмотра не станет
Система сеток Bootsrap X-Small Small
≥576 пикселей
Середина
≥768 пикселей
Большой
≥992 пикселей
X-большой
≥1200 пикселей
XX-большой
≥1400 пикселей
.container 100% 540px 720px 960px 1140px 1320px .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 .container-fluid 100% 100% 100% 100% 100% 100%
В этой статье QuanTriMang предоставит более подробные инструкции по использованию контейнеров и сопутствующих компонентов в Bootstrap 5. Bootstrap 5 имеет 2 класса контейнеров, которые вы можете выбрать и использовать:
- Класс .container предоставляет адаптивный контейнер фиксированной ширины.
- Класс .container-fluid предоставляет контейнер полной ширины, охватывающий всю ширину области просмотра.
Узнайте о двух типах контейнеров в Bootstrap 5.
Фиксированный контейнер
Используйте класс .container, чтобы создать адаптивный контейнер фиксированной ширины.
Обратите внимание, что его ширина (max-width) будет меняться на разных размерах экрана:
Размер экрана макс. ширина Очень маленький 100% Маленький ≥576 пикселей 540 пикселей Средний ≥768 пикселей 720 пикселей Большой ≥992 пикселей 960 пикселей Очень большой ≥1200 пикселей 1140 пикселей XXL ≥1400 пикселей 1320 пикселей
XXL (≥1400 пикселей) — это новинка в Bootstrap 5. В Bootstrap 4 поддерживается только очень большой размер (≥1200 пикселей).
Например, попробуйте использовать следующий код, сохраните его в файл HTML и попробуйте открыть его в окне браузера. Затем отрегулируйте размер окна, чтобы увидеть изменения!
Вид Bootstrap
Вы можете изучить Bootstrap 5 и другое программное обеспечение для программирования на QuanTriMang.
Большой контейнер
Используйте класс .container-fluid, чтобы создать контейнер полной ширины с шириной экрана (ширина всегда равна 100%).
Например:
Вы можете изучить Bootstrap 5 и другое программное обеспечение для программирования на QuanTriMang.
Дополнительные компоненты для Контейнера
Интервалы заполнения контейнера
По умолчанию контейнеры имеют отступы слева и справа, без отступов сверху/снизу. Поэтому нам часто приходится использовать дополнительные средства размещения, например, дополнительные прокладка и поля , чтобы они выглядели лучше. Например, .pt-5 означает ” набивка сверху “. Например:
Граница и цвет контейнера
Другие виджеты, такие как границы и цвета, также часто используются вместе с контейнерами.
Пример 1:
Этот контейнер имеет границу и некоторые дополнительные отступы и поля.
Пример 2:
Контейнер имеет дополнительное форматирование черного фона, белого текста и некоторых отступов/полей.
Пример 3:
Контейнер имеет дополнительное форматирование синего фона, белого текста и некоторых отступов/полей.
В следующих статьях вы узнаете больше о цветах и виджетах границ!
Адаптивные контейнеры
Вы также можете использовать классы .container-sm | мкр | LG | xl, чтобы определить, когда контейнер будет реагировать.
максимальная ширина контейнера будет меняться в зависимости от размера экрана/окна просмотра:
Класс Экстра маленький
Маленький
≥576 пикселей Средний
≥768 пикселей Большой
≥992 пикселей Очень большой
≥1200 пикселей 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
Например:
.container-sm .container-md .container-lg .container-xl .container-xxl
Пример на сайте TipsMake.com.com:
Пример начальной загрузки
Измените размер окна браузера, чтобы увидеть изменения.
.container-sm .container-md .container-lg .container-xl .container-xxl
Как упоминалось выше, Bootstrap создает серию предопределенных классов-контейнеров, которые помогут вам создать желаемый веб-макет. Вы можете настроить предопределенные классы контейнеров, отредактировав карту Sass (находится в _variables.scss), которой они принадлежат:
$container-max-widths: (sm: 540 пикселей, md: 720 пикселей, lg: 960 пикселей, xl: 1140 пикселей, xxl: 1320 пикселей);
Помимо настройки Sass, вы также можете создавать свои собственные контейнеры, комбинируя Sass, как показано в примере ниже:
// Исходный миксин @mixin make-container($padding-x: $container-padding-x) { width: 100%; отступ справа: $padding-x; отступ слева: $padding-x; поле справа: авто; поле слева: авто; } // Использование .custom-container { @include make-container(); }
Выше представлена полезная информация о том, как создавать базовые контейнеры с помощью Bootstrap 5. Надеюсь, статья окажется для вас полезной.
В приведенной выше статье вы познакомились с «Уроком 2: Узнайте о контейнерах в Bootstrap 5». СоветыНадейтесь, что эта статья вам поможет! Если эта статья кажется вам интересной и полезной, не забудьте поделиться ею. Спасибо!
