W3Schools bootstrap 4: Bootstrap 4 Templates

Bootstrap 4 контейнера

❮ Предыдущий Далее ❯

---

Контейнеры

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

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

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

.container

.container-fluid

---

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

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

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

	Очень маленький <576px	Маленький ≥576 пикселей	Средний ≥768px	Большой ≥992px	Очень большой ≥1200 пикселей
максимальная ширина	100%	540px	720px	960px	1140px

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

Пример

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

---

Fluid Container 9 0006

Используйте класс .container-fluid для создания контейнера полной ширины, который всегда будет охватывать всю ширину экрана ( width всегда 100% ):

Пример

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

---

Заполнение контейнера

По умолчанию контейнеры имеют отступы слева и справа по 15 пикселей, без отступов сверху и снизу. Поэтому мы часто используем утилиты интервалов , такие как дополнительные отступы и поля, чтобы они выглядели еще лучше. Например, .pt-3 означает «добавить верхний отступ 16 пикселей»:

Example

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

Вы узнаете гораздо больше об утилитах интервалов в нашей главе «Утилиты BS4».

---

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

Другие утилиты, такие как границы и цвета, также часто используются вместе с контейнерами:

Пример

Этот контейнер имеет рамку и некоторые дополнительные отступы и поля.

Этот контейнер имеет темный цвет фона и белый текст, а также некоторые дополнительные отступы и поля.

Этот контейнер имеет синий цвет фона и белый текст, а также некоторые дополнительные отступы и поля.

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

Вы узнаете намного больше о цветах и ​​утилитах для границ в нашей главе «Цвета BS4» и Глава утилит BS4.

---

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

Вы также можете использовать классы .container-sm|md|lg|xl для создания адаптивных контейнеров.

Максимальная ширина контейнера будет меняться для разных размеров экрана/окна просмотра:

Класс	Очень маленький <576px	Маленький ≥576px	Средний ≥768px	Большой ≥992px	Очень большой ≥1200 пикселей
. контейнер-см	100%	540px	720px	960 пикселей	1140px
.контейнер-мд	100%	100%	720px	960px	1140px
.контейнер-lg	100%	100%	100%	960px	1140px
.контейнер-xl	100%	100%	100%	100%	1140px

Пример

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

---

Знаете ли вы?

W3.CSS — отличная альтернатива Bootstrap 4.

W3.

CSS меньше, быстрее и проще в использовании.

Если вы хотите изучить W3.CSS, перейдите на наш W3.CSS Руководство.

❮ Предыдущий Следующий ❯

ВЫБОР ЦВЕТА

---

---

---

Лучшие учебники

Учебник по HTML
Учебник по CSS
Учебник по JavaScript
Учебник How To
Учебник по SQL
Учебник по Python
Учебник по W3.CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery
9000 3

Основные каталожные номера

Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Top Примеры

Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3. CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

---

ФОРУМ | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Bootstrap 4 Карусель

❮ Предыдущий Далее ❯

---

Bootstrap 4 Карусель

Карусель — это слайд-шоу для просмотра элементов.

---

Как создать карусель

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

Пример

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

Объяснение примера

Описание того, что делает каждый класс из приведенного выше примера:

Класс	Описание
.карусель	Создает карусель
.карусель-индикаторы	Добавляет индикаторы для карусели. Это маленькие точки внизу каждого слайда (которые показывают, сколько слайдов в карусели и какой слайд просматривает пользователь)
. внутренняя карусель	Добавляет слайды в карусель
.carousel-item	Указывает содержимое каждого слайда
.carousel-control-prev	Добавляет левую (предыдущую) кнопку в карусель, которая позволяет пользователю вернуться между слайдами
.carousel-control-next	Добавляет правую кнопку (далее) в карусель, которая позволяет пользователю переходить между слайдами вперед
.carousel-control-prev-icon	Используется вместе с .carousel-control-prev для создания кнопки «назад»
.carousel-control-next-icon	Используется вместе с .carousel-control-next для создания кнопки «Далее»
.слайд	Добавляет CSS-эффект перехода и анимации при переходе от одного элемента к другому. Удалите этот класс, если вам не нужен этот эффект

---

---

Добавить подписи к слайдам

Лос-Анджелес

Мы так здорово провели время в Лос-Анджелесе!

Чикаго

Спасибо, Чикаго!

Нью-Йорк

Мы любим Большое Яблоко!

Добавить элементы внутри