Контейнеры 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 без контейнеров, но они необходимы при использовании системы сетки.
{banner_google}
Фиксированный контейнер - 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.
Ссылка для скачивания доступна только авторизованным пользователям, пожалуйста пройдите регистрацию.
Это займёт не более минуты. Не волнуйтесь, мы не спамим!
У данной публикации нет комментариев.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Облако тегов
bootstrap Bootstrap css CSS CSS3 DLE dle fruit farm html html шаблон html5 HTML5 Payeer PNG PSD wap Wordpress Скрипт удвоителя адаптивный адаптивный шаблон бонусник дизайн игровой хостинг иконки лендинг модуль панель портфолио сайт скрипт скрипт фермы текстура удвоитель удвоитель Payeer ферма фон фруктовая ферма хак шаблон экономическая игра
Какие языки программирования Вы знаете