Container fluid bootstrap 4: Bootstrap 4 Containers

Содержание

Обзор · Bootstrap 4 на русском

Компоненты и опции для создания вашего проекта Bootstrap, включая контейнеры для упаковки, мощную сетчатую систему, гибкий медиа-объект и отзывчивые служебные классы.

Контейнеры

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

В Bootstrap используется три разных типа контейнеров:

.container, который устанавливает максимальную ширину max-width в каждой отзывчивой точке останова;
.container-fluid, ширина которого width: 100% на всех точках останова;
.container-{breakpoint}, то есть ширина width: 100% до указанной точки останова.

В приведенной ниже таблице показано, как максимальная ширина max-width каждого контейнера .container и .container-fluid сравнивается с исходными в каждой точке останова.

Посмотрите их в действии и сравните их в нашем примере Сеток.

	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	Extra large ≥1200px
`.container`	100%	540px	720px	960px	1140px
`.container-sm`	100%	540px	720px	960px	1140px
`.container-md`	100%	100%	720px	960px	1140px
`. container-lg`	100%	100%	100%	960px	1140px
`.container-xl`	100%	100%	100%	100%	1140px
`.container-fluid`	100%	100%	100%	100%	100%

Все в одном

По умолчанию класс .container является отзывчивым контейнером фиксированной ширины, что означает, что его максимальная ширина max-width изменяется в каждой точке останова.

<div>
  <!-- Content here -->
</div>

Изменчивый

Используйте .container-fluid для создания контейнера полной ширины, охватывающего всю ширину области просмотра.

<div>
  ...
</div>

Отзывчивый

Отзывчивые контейнеры появились в Bootstrap версии 4. 4. Они позволяют указывать класс шириной 100%, пока не будет достигнута указанная точка останова, после чего мы применяем max-width для каждой из более высоких точек останова. Например, .container-sm имеет иметь ширину в 100% до тех пор, пока не будет достигнута точка останова sm, где он будет масштабироваться уже с помощью md, lg и xl.

<div>100% wide until small breakpoint</div>
<div>100% wide until medium breakpoint</div>
<div>100% wide until large breakpoint</div>
<div>100% wide until extra large breakpoint</div>

Отзывчивые брейкпойнты

Поскольку Bootstrap разработан как mobile-first, тут используются медиа-запросы @media для создания брейкпойнтов контента и интерфейсов. Эти брейкпойнты в основном сделаны на минимальных широтах зоны просмотра и позволяют масштабировать элементы по мере изменения размера зоны просмотра.

В исходниках Sass Bootstrap главным образом записаны следующие ранги @media (брейкпойнты) для разметки, сеточной системы и компонентов.

 // Экстрамалые девайсы (портретные телефоны, < 576px)
// Нет @media, т.к. это по умолчанию в Bootstrap
// Малые девайсы (горизонтальные телефоны, >= 576px)
@media (min-width: 576px) { ... }
// Средние девайсы (планшеты, >= 768px)
@media (min-width: 768px) { ... }
// Большие девайсы (десктопы, >= 992px)
@media (min-width: 992px) { ... }
// Экстрабольшие девайсы (большие десктопы, >= 1200px)
@media (min-width: 1200px) { ... }

Так как все эти параметры записаны в исходниках как Sass, все @media доступны через миксины:

// Не существует медиа-запрос для брекпоинта xs, поскольку это фактически `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { .  .. }
// 
Пример: Скрыто начало с `min-width: 0`, а затем отображается на брекпоинте `sm`
.custom-class {
  display: none;
}
@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}

По случаю можно использовать и другие размеры (max-width: 575px == «данный размер или меньше»):

// Экстрамалые девайсы (телефоны, < 576px)
@media (max-width: 575.98px) { ... }
// Малые девайсы (горизонтальные телефоны, < 768px)
@media (max-width: 767.98px) { ... }
// Средние девайсы (планшеты, < 992px) 
@media (max-width: 991.98px) { ... }
// Большие девайсы (большие десктопы, < 1200px)
@media (max-width: 1199.98px) { ... }
// Экстрабольшие девайсы (большие десктопы)
// Тут нет @media, т.к. такие брейпкойнты не имеют верхней границы по ширине width

Обратите внимание, что поскольку браузеры в настоящее время не поддерживают запросы диапазона, мы используем ограничения min- и max- prefixes префиксов и видовых экранов с дробной шириной (что может произойти при определенных условиях на устройствах с высоким разрешением на дюйм, например), используя значения с более высоким точность для этих сравнений.

Опять же, эти @media доступны через Sass миксины:

@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
// Нет медиа-запроса, необходимого для брекпоинта xl, поскольку он не имеет верхней границы по ширине
// Пример: стиль из среднего брекпоинта и вниз
@include media-breakpoint-down(md) {
  .custom-class {
    display: block;
  }
}

Также в наличии @media и миксины размеров экрана, использующие минимальные и максимальные ширины брейкпойнтов.

// Экстрамалые девайсы (портретные телефоны, < 576px)
@media (max-width: 575.98px) { ... }
// Малые девайсы (горизонтальные телефоны, >= 575px)
@media (min-width: 576px) and (max-width: 767.98px) { ... }
// Средние девайсы (планшеты, >= 768px) 
@media (min-width: 768px) and (max-width: 991.98px) { ... }
// Большие девайсы (десктопы, >= 992px)
@media (min-width: 992px) and (max-width: 1199. 98px) { ... }
// Экстрабольшие девайсы (большие десктопы, >= 1200px)
@media (min-width: 1200px) { ... }

Эти @media также доступны из миксинов Sass:

@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }

Также, @media могут занимать несколько значений ширин брейкпойнта:

// Пример
// Здесь стили применятся от средних девайсов до XL-девайсов
@media (min-width: 768px) and (max-width: 1199.98px) { ... }

Миксины Sass для захвата таких же параметров (выше) выглядели бы так:

@include media-breakpoint-between(md, xl) { ... }

Z-индекс

Несколько компонентов Bootstrap используют данный индекс

z-index, т.е. свойство CSS, которое помогает контролировать расположение контента с помощью третьей оси. В Bootstrap используется стандартный Z-индекс, спроектированный для правильного расположения навигации, всплывающих подсказок, всплывающих окон и т.

н. “modals” (pop-up окно наверху страницы).

Эти высшие значения могут начинаться с любого числа, в идеале достаточно большого и специфичного, чтобы избежать конфликтов. Нам нужен стандартный набор этих чисел для использования с нашими компонентами: всплывающими подсказками, окнами, навбарами, выпадающими элементами, модальными элементами — так, чтобы мы могли бы разумно стандартизировать их поведение. Не существует ограничений — используйте хоть

100, хоть 500 и более.

Мы не советуем настраивать эти значения самому, т.к. если потребуется изменить одно, придется менять все.

$zindex-dropdown:          1000 !default;
$zindex-sticky:            1020 !default;
$zindex-fixed:             1030 !default;
$zindex-modal-backdrop:    1040 !default;
$zindex-modal:             1050 !default;
$zindex-popover:           1060 !default;
$zindex-tooltip:           1070 !default;

Для того, чтобы эффективно обращаться с перекрывающимися границами внутри компонентов (например, кнопки и формы ввода в группах форм ввода), мы используем по умолчанию значения z-index 1,2,3, а также hover и «активные состояния». В hover/focus/active мы подводим частный элемент к «переднему краю» использованием более высокого z-индекса, для показа его границы над вложенными элементами.

Контейнеры В Bootstrap («container-fluid» и «container»)

последнее обновление: 9 января 2019

container-fluid для такого элемента ширина не ограничена и это 100% экрана.
Другими словами это блочный элемент и он тянется до всей ширины экрана.
container-fluid не содержит отступы слева и справа.

container для такого элемента максимальная ширина ограничена 1200px
container содержит отступы слева и справа.
Если экран меньше 1200px тогда container займет всю ширину экрана минус отступы слева и справа.

Пример

Html

<html>

     <!— заголовок —>
     <head>
          <meta charset=»utf-8″>
          <title>Example</title>
     </head>

<!— страница —>
<body>

          <!— подключить библиотеку Bootstrap (js файл) —>
          <script src=»https://dir. by/example_lib/bootstrap-4.1.3/js/bootstrap.min.js»></script>

          <!— подключить библиотеку Bootstrap (css файл) —>
          <link rel=»stylesheet» href=»https://dir.by/example_lib/bootstrap-4.1.3/css/bootstrap.min.css»>

          <!— HTML элементы —>
          <div>
               container
          </div>

<br>

          <div>
               container-fluid
          </div>

</body>

</html>

Пример смотрим, тестируем

На заметку!

container-fluid не вкладывается внутрь container

Html это не правильно

container не вкладывается внутрь container-fluid

Html это не правильно

Где используется «container»

container используется для row . ..

Где используется «container-fluid»

container-fluid используется для row …
а также используется для navbar …

Ваши Отзывы … комментарии…

Объявления Языки программирования и другое

Программы для разработки (интегрированные среды для разработки IDE)

Microsoft Visual Studio (среда разработки для написания программ на C#, С++, Javascript, ASP.NET приложений)

Visual Studio Code (редактор кода для написания программ на JavaScript, Perl, Python, Java, C#)

HTML

Интерактивная реклама в HTML (animate banner)

Google Web Designer — редактор для создания рекламы, animate banner и т.

д. в виде HTML страницы, и в виде HTML AMP страниц (ускоренные мобильные страницы)

WEB сайт

Javascript, TypeScript

Кнопки, текстовые поля и другие элементы на WEB странице

jQuery UI — кнопки, меню, диалог, slider, spinner и так далее. Эфекты: растягивание, перетаскивание и так далее Telerik, Kendo UI — это элементы: DropDownList, ComboBox, AutoComplete, Calendar, редактор текста, excell, chart и так далее

JavaScript технологии

RxJs (это реактивное программирование и в основном используется в Angular)

JavaScript графика, анимация для игр

p5.

js — JavaScript библиотека для рисования графики 2D (рисование картинок, линий, движений), 3D графики (рисования материалы, свет, текстура)

JavaScript менеджер пакетов (добавление JavaScript библиотек в ваш Web проект)

npm — это менеджер пакетов для Node.js. npm добавляет JavaScript библиотеки в папку node_modules

Webpack — это САМЫЙ ПОПУЛЯРНЫЙ менеджер пакетов. Webpack добавляет JavaScript библиотеки в ваш проект

Yarn — это менеджер пакетов. Yarn добавляет JavaScript библиотеки в ваш проект

Parcel — это менеджер пакетов.

Parcel добавляет JavaScript библиотеки в ваш проект

Bower — это менеджер пакетов. Bower добавляет JavaScript библиотеки в ваш проект. Bower сейчас НЕ ПОДДЕРЖИВАЕТСЯ (не добавляет новых JavaScript библиотек)

Автоматическое выполнение задач в вашем Web проекте

Gulp — это JavaScript программа для автоматического выполнения задач (объединения файлов, уменьшение размера картинок) в вашем Web проекте

Grunt — это JavaScript программа для автоматического выполнения задач (объединения файлов, уменьшение размера картинок) в вашем Web проекте

База данных (My SQL)

MySQL (база данных, server) и Workbench (программа для работы с my sql).

Работает на разных платформах: Unix, Windows

База данных (Microsoft SQL Server)

Microsoft SQL Server (база данных, server) и SQL Management Studio (программа для работы с sql server). Работает только в Windows

Microsoft SQL (язык запросов в базе данных)

База данных (PostgreSQL)

PostgreSQL сервер (база данных) и pgAdmin (программа для работы с PostgreSQL сервер).

Работает на разных платформах: Unix, Windows

Работа с базой данных на C#

ADO.NET (работа с базой данных на C#)

Entity Framework (EF5, EF6) для работы с базой данных на C#

Entity Framework Core (EF Core) для работы с базой данных на C#

Работа с Redis

Redis

Интернет, HTTP, TCP, UDP, FTP протоколы

RabbitMQ

Microsoft C# и . NET

Microsoft Visual Basic

Microsoft Visual Basic & Excell

Microsoft Office 365 E3 (Web services)

Microsoft Office 365 E3 (Teams plug-in, SharePoint web api)

Twilio (sms)

Twilio (send sms)

Python

Java программирование (приложения для windows, андроид телефонов)

Mobile Development with C++ (Android, iOS)

Mobile Development with C++ (iOS, Android, Windows Phone)

Flutter & Dart

Flutter — фрэймворк для создания мобильных приложений от компании Google

Облачные технологии

Microsoft Azure & Azure DevOps (облачные технологии)

Amazon Web Services (облачные технологии)

Google Cloud Platform (облачные технологии)

Heroku (облачные технологии)

Рисуем блок схемы (диаграммы) для программы

Резюме (как найти работу)

Как написать резюме, причины перехода на другую работу

Автоматизированное тестирование

Selenium WebDriver (для автоматизированного тестирования веб-приложений)

Рефакторинг & Паттерны

Методологии управления проектами

Agile, scrum, kanban.

Методологии в управлении IT-проектам. В чем разница?

Правила разработки web приложений в Яндекс

Управление версиями проекта, история измененных файлов

Svn (управление версиями проекта, история измененных файлов) | TortoiseSVN (работаем с SVN под Windows)

Математические алгоритмы

Математические алгоритмы (пересечение прямоугольников, массивы, графы)

CI/CD

Непрерывная интеграция (автоматическая сборка проекта, развертывание проекта на удаленный компьютер) | CI/CD

Docker

Kubernetes

Kubernetes (запуск контейнеров на виртуальных машинах и балансировка нагрузки виртуальных машин)

Микрослужбы

Еще языки программирования

C++

Разработка игр

Разработка игр | для телефонов на Unity, MonoGame | для браузера Google Chrome на JavaScript, HTML | рисуем графику

Технологии для написания игр

SmartFoxServer — библиотека multiplayer на Java, C#, JavaScript, Unity, для Android, iOS

Интернет браузеры

Интернет браузер «Google Chrome»

Telegram (месенджер)

WEB сервер

Что такое WEB сервер ?

bat файлы

bat файл (командная строка)

.htaccess Файлы

.htaccess файл (Команды)

Viber

Viber. Устанавливаем (на Windows или phone). Переносим Viber сообщения и Viber фото.

Операционная система LINUX

Ubuntu (linux) Virtual Machine on Windows 10

Ubuntu (in console as WSL) on Windows 10

Операционная система Mac OS

Mac OS Virtual Machine on Windows 10

Операционная система WINDOWS и программы

Операционная система ANDRIOD

Операционная система iOS

Компьютерная платформа (процессор)

x86 процессоры

ARM процессоры

Ноутбук (BIOS)

В ноутбуке не работают клавиши F1 .

.. F2 как надо. Проблема: я открываю браузер Google Chrome и нажимаю кнопку F5 чтобы перезагрузить страницу, а у меня включается подсветка клавиатуры.

Быстродействие компьютера (процессора)

Сравниваем быстродействие компьютера (процессора) на сайте http://userbenchmark.com

Заходим на удаленный компьютер (чтобы помочь кому нибудь что нибудь настроить)

TeamViewer (заходим на удаленный компьютер)

Графика и видео

2D графические редакторы

3D графические редакторы

Видео

Online: просмотр Word файлов, конвертация PDF файлов, распознование картинки в текст

Просмотр и редактирование Word файлов (doc, docx) ОНЛАЙН

Просмотр и редактирование Word файлов (doc, docx), Adobe (pdf) ОНЛАЙН

PDF to word, images

Convert PDF to Word (online)

Convert FB2 to PDF (online)

Распознавание картинки в текст

Распознать (перевести) картинку в текст (ONLINE)

Регулярные выражения

Регулярные выражения (проверить онлайн)

Поставить HD Video Box в Windows

Как купить английские книги и читать?

Как купить английские книги и читать

Chemical, analytics laboratory

Chemical, analytics laboratory (Chromatography / Mass Spectroscopy)

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

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

Контейнеры

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

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

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

.container

.container-fluid

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

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

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

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

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

Пример

Моя первая загрузочная страница

Это какой-то текст.

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

Fluid Container

Используйте класс .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

Пример

.container-sm

.container-md

.container-lg

.container-xl

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

Знаете ли вы?

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

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

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

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

ВЫБОР ЦВЕТА

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

Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery

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

2 Top37 Examples

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

CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

ФОРУМ | О

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

Bootstrap 4 Grid Basic

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

Система сеток Bootstrap 4

Система сеток Bootstrap построена с использованием flexbox и позволяет размещать до 12 столбцов на странице.

Если вы не хотите использовать все 12 столбцов по отдельности, вы можете сгруппировать столбцы вместе для создания более широких столбцов:

span 1	диапазон 1	диапазон 1	диапазон 1	диапазон 1	диапазон 1	диапазон 1	диапазон 1	диапазон 1	диапазон 1	диапазон 1	диапазон 1
пролет 4				промежуток 4				промежуток 4
пролет 4				пролет 8
пролет 6						пролет 6
пролет 12

Система сетки является гибкой, и столбцы автоматически перестраиваются в зависимости от размера экрана.

Убедитесь, что сумма составляет 12 или меньше (не обязательно, чтобы вы использовать все 12 доступных столбцов).

Классы сетки

Система сетки Bootstrap 4 имеет пять классов:

.col- (очень маленькие устройства — ширина экрана менее 576 пикселей)
.col-sm- (маленькие устройства — ширина экрана равна или больше 576 пикселей)
.col-md- (средние устройства — ширина экрана равна или больше 768 пикселей)
.col-lg- (большие устройства — ширина экрана равна или больше 992 пикселей)
.col-xl- (устройства xlarge — ширина экрана больше или равна 1200 пикселей)

Приведенные выше классы можно комбинировать для создания более динамичных и гибких макетов.

Совет: Каждый класс масштабируется, поэтому, если вы хотите установить одинаковую ширину для sm и md , нужно указать только sm .

Базовая структура сетки Bootstrap 4

Ниже представлена базовая структура сетки Bootstrap 4:

Первый пример: создать строку (

). Затем добавьте нужное количество столбцов (тегов с соответствующими .col-*-* классов). Первая звезда (*) представляет отзывчивость: sm, md, lg или xl, а вторая звезда представляет число, которое должно составлять до 12 для каждой строки.

Второй пример: вместо добавления числа к каждой col , пусть загрузочный дескриптор макет, чтобы создать столбцы одинаковой ширины: два элемента "col" = 50% ширины для каждый кол. три столбца = 33,33% ширины каждого столбца. четыре столбца = 25% ширины и т. д. Вы также можно использовать .col-sm|md|lg|xl , чтобы сделать столбцы отзывчивыми.

Ниже мы собрали несколько примеров базовых макетов сетки Bootstrap 4.

Три равных столбца

.col

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

Пример

.col

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

Отзывчивые столбцы

.col-sm-3

В следующем примере показано, как создать четыре столбца одинаковой ширины начиная с планшетов и масштабируя до очень большие рабочие столы. На мобильных телефонах или экранах шириной менее 576 пикселей столбцы автоматически складываются друг на друга :

Пример

col-sm-3

.col-sm-3

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

Два столбца с неравным откликом

.col-sm-4

.col-sm-8

В следующем примере показано, как получить два столбца различной ширины, начиная с планшеты и масштабирование до больших дополнительных рабочих столов:

Пример

.col-sm-4

.col-sm-8

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

Совет: Далее в этом руководстве вы узнаете больше о сетках Bootstrap 4.

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

ВЫБОР ЦВЕТА

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

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

Лучшие ссылки

HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.

Обзор · Bootstrap 4 на русском

Контейнеры

Все в одном

Изменчивый

Отзывчивый

Отзывчивые брейкпойнты

Z-индекс

Контейнеры В Bootstrap («container-fluid» и «container»)

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

Контейнеры

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

Пример

Моя первая загрузочная страница

Fluid Container

Пример

Моя первая загрузочная страница

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

Example

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

Пример

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

Пример

Знаете ли вы?

ВЫБОР ЦВЕТА

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

2 Top37 Examples

Bootstrap 4 Grid Basic

Система сеток Bootstrap 4

Классы сетки

Базовая структура сетки Bootstrap 4

Три равных столбца

Пример

Отзывчивые столбцы

Пример

Два столбца с неравным откликом

Пример

ВЫБОР ЦВЕТА

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

Лучшие ссылки

Добавить комментарий Отменить ответ

Рубрики

Рубрики