Bootstrap 5 grid system

Содержание:

Выравнивание адаптивных блоков

Выравнивания адаптивных блоков в горизонтальном и вертикальном направлении осуществляется в Bootstrap 4 с помощью служебных flex-классов.

Вертикальное выравнивание адаптивных блоков

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

(относительно начала линии);
(по центру);
(относительно конца).

Например, выровняем все адаптивные блоки по центру линии ряда:

<div class="row align-items-center">
    <div class="col"> 1/2 </div>
    <div class="col"> 2/2 </div>
</div>

По умолчанию адаптивные элементы занимают всю высоту линии ряда, в которой они расположены.

Выравнивание какого-то определённого адаптивного блока по вертикали в пределах линии может осуществляться одним из следующих классов:

(относительно начала линии);
(по центру);
(относительно конца).

Данные классы необходимо добавлять к адаптивным блокам, а не к ряду.

Например, выравниваем адаптивный блок 2 по нижнему краю линии:

<div class="row align-items-center">
    <div class="col"> (1) </div>
    <div class="col align-self-end"> (2) </div>
</div>

Горизонтальное выравнивание адаптивных блоков

Для выравнивания адаптивных блоков в горизонтальном направлении предназначены следующие классы:

(относительно начала линии ряда — по умолчанию);
(по центру);
(относительно конца линии);
(равномерно, с учётом пространства перед первым и последним адаптивным блоком);
(равномерно, с одинаковым пространством между адаптивными блоками).

Например, распределим адаптивные блоки в горизонтальном направлении равномерно:

<div class="row justify-content-around">
    <div class="col-4"> (1) </div>
    <div class="col-4"> (2) </div>
</div>

Заводские Android браузеры

50 best free bootstrap form templates & examples in 2019

Из коробки, Android 4.1 (и даже некоторые новые версии) ставят приложение Браузера в качестве веб-браузера по умолчанию(в отличие от Chrome). К сожалению, стандартные браузеры имеют множество ошибок и несоответствий с CSS в целом.

Меню выбора

На элементе, в Android браузере не будет отображаться элементы управления если есть и/или . (Смотри этот вопросы на StackOverflow более детально.) Используйте фрагмент кода ниже, чтобы удалить этот CSS и сделать элемент без стиля на Android браузере. Избегать недовольство юзера помогает использование браузеров: Chrome, Safari и Mozilla.

Хотите увидеть пример? Проверьте это JS Bin demo.

Быстрое создания плавающих элементов (float)

Прокачиваем навыки css: grid

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

<div class="pull-left">...</div>
<div class="pull-right">...</div>

Примечание: классы и нельзя использовать для выравнивания элементов в компоненте . Если вы хотите выровнять некоторые элементы в навигационном меню, то используйте специальные предназначенные для этого служебные классы и . Более подробно познакомиться с данными классами можно в статье, посвященной рассмотрению компонента navbar.

Настройка сайта под технологии, которые выполняют чтение с экрана

Download

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

Класс применяется для скрытия элемента на всех устройствах кроме технологий, осуществляющих чтение с экрана. Также класс можно объединить с классом , в этом случае элемент, к которому применены данные классы, будет отображаться на экране, но только в момент времени его нахождения в фокусе (например: при использовании клавиатуры).

<body>
  <!-- Ссылка для перехода к основному контенту сайта -->
  <a href="#content" class="sr-only sr-only-focusable">Перейти к основному содержанию страницы</a>
  ...
  <div class="container" id="content">
    <!-- Основной контент страницы -->
  </div>
</body>

Классы скрытия/отображения элементов для Bootstrap 3

На данный момент 3-я версия Bootstap уже отошла далеко в прошлое, но в сети еще есть ряд сайтов, сверстанные именно на этом варианте Bootstap . Поэтому в таблице ниже представлены классы, скрывающие/отображающие элементы для определенных разрешений экрана. В Bootstap-3 был несколько иной подход, чем в Bootstap-4 и 5, поэтому классы имеют приставки или .

Телефоны и планшеты до (<) 768px	Планшеты более (≥) 768px	Компьютеры, ноутбуки и планшеты более (≥)992px	Компьютеры, ноутбуки более(≥)1200px
Отображается	Скрыт	Скрыт	Скрыт
Скрыт	Отображается	Скрыт	Скрыт
Скрыт	Скрыт	Отображается	Скрыт
Скрыт	Скрыт	Скрыт	Отображается
Hidden	Отображается	Отображается	Отображается
Отображается	Скрыт	Отображается	Отображается
Отображается	Отображается	Скрыт	Отображается
Отображается	Отображается	Отображается	Скрыт

Ссылки:

Утилиты отображения Bootstrap-5 (англ)
Утилиты отображения Bootstrap-5 (рус)
Утилиты отображения Bootstrap-4 (рус)
Утилиты отображения Bootstrap-4 (англ)

Улучшенная сеточная система

Трудности перехода с v.3 до v.4 Bootstrap сподвигли разработчиков не отходить далеко от сеточной ситемы v.4.x. Добавились лишь незначительные изменения.

В связи с тем, что была добавлена новая точка останова (xxl), то соответственно в сетке появился новый класс . О точке останова xxl поговорим чуть ниже в статье.

Добавился класс (сокращенно от gutters) для добавления отступов в сетку. Данный класс добавляется к классу .row. Например, чтобы сделать отступы между ячейками сетки (горизонтальные и вертикальные) с условным значением 2 достаточно добавить класс к классу строки . Можно также отдельно задать горизонтальный или вертикальный отступ — или соответственно. Это чем-то напоминает утилиты интервалов margin и padding. Отмечу, что сейчас задать отступы ячейкам стало намного легче, вот это действительно меня порадовало.

Также был добавлен новый класс для строки с классом . Данный класс обеспечивает автоматическое распределение колонок равной ширины в пределах родительского блока.

Класс был удален и заменен новой сеточной системой.

Ячейки сетки больше не используют свойство по умолчанию. и это здорово, так как частенько приходилось это переопределять.

Выравнивание

Используйте утилиты выравнивания flexbox для выравнивания столбцов по вертикали и горизонтали. Internet Explorer 10-11 не поддерживает вертикальное выравнивание элементов Flex, когда контейнер Flex имеет , как показано ниже.

Вертикальное выравнивание

Одна из трёх колонок

Горизонтальное выравнивание

Одна из двух колонок

Без пробелов между колонками

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

Здесь исходный код для создания этих стилей. Заметим, что переопределения колонок действуют только в первых наследуемых колонках и определяются через селектор атрибута. Этот метод создает более подробный селектор, и паддинг колонки может быть изменен через Отступы.

Нужно создать дизайн «edge-to-edge» (контент плотно прилегает к краям девайса)? Уберите родительский класс или .

Вот как это работает на практике. Заметьте, что вы можете продолжить использовать это со всеми остальными предустановленными классами сеток (включая ширину колонок, отзывчивые ярусы, переопределения и прочее).

.col-sm-6 .col-md-8
.col-6 .col-md-4

Обертка колонки

Если больше 12-ти колонок разместить в одном ряду, каждая дополнительная колонка обернется в новую строку.

.col-9
.col-4Поскольку 9 + 4 = 13 > 12, этот div шириной 4 колонки обернется в новую строку как смежный юнит.
.col-6Последующие столбцы продолжаются вдоль новой строки.

Разрывы колонок

Чтобы сместить колонки на новую строку в гибком контейнере, нужно сделать следующее: добавьте элемент с туда, где вы хотите обернуть ваши колонки новой строкой. В норме это достигается с помощью множественных , но не каждый исполнительный метод может это поддержать.

.col-6 .col-sm-3
.col-6 .col-sm-3

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

.col-6 .col-sm-4
.col-6 .col-sm-4

Всё из-за ширины.

В Bootstrap 4 есть 5 адаптивных рядов (ну или брейкпоинтов), которые вы возможно заметили в предыдущем примере. (ie; , ).

Адаптивные брейкпоинты, основаны на ширине экрана:

— ширина экрана < 576px. Это стандарт.

— ширина экрана ≥ 576px

— ширина экрана ≥ 768px

— ширина экрана ≥ 992px

— ширина экрана ≥ 1200px

Почему я заключил () в скобки, а не сделал как с другими брейкпоинтами? Так как xs это дефолтное прерывание, инфикс, который использовался в Bootstrap 3, больше не используется в Bootstrap 4. Так что вместо , просто .

Bootstrap использует медиа запросы из CSS, что установить адаптивные точки прерываний. Они дают вам возможность контролировать поведение колонок при разных размерах экрана.

Для примера: вот 2 колонки, каждая шириной 50%:

<div class="container">    <div class="row">       <div class="col-sm-6">Column 1</div>      <div class="col-sm-6">Column 2</div>    </div> </div>

означает использование 6 колонок из 12, то есть 50% ширины на типичных маленьких размерах экранов. Которые больше или равны 768px:

На экранах меньше, чем 768px, 2 колонки станут шириной 100% и встанут вертикально:

Это происходит, потому что (xs) по дефолту или подразумевает брейкпоинт. Так как я не указывал дефолтную ширину колонки, 50% ширина была применена только на 768px и шире для sm брейкпоинта.

Sass примеси

При использовании Bootstrap источник Sass файлов, у вас есть возможность использования Sass переменных и миксинов для создания пользовательских семантических, aдаптивный страница разметки. Наш использовать те же переменные и миксины представить целый набор готовых классов для быстрого aдаптивный разметки.

Переменные

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

Смешивания

Смешивания используются в сочетании с переменных разметкок, чтобы образовать семантические CSS для отдельных столбцов разметки.

Примеры использования

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

Увидеть его в действии в это привело к примеру.

Типы классов устройств

col-xs-*: для устройств с шириной экрана меньше 768 пикселей;
col-sm-*: для устройств с шириной экрана от 768 пикселей и выше;
col-md-*: для устройств с шириной экрана от 992 пикселя и выше;
col-lg-*: для устройств с шириной экрана от 1200 пикселей и выше;

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

XHTML

1	<div class=»col-md-6 col-sm-6 col-xs-12″>

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

Отступы

Классы col-md(sm|lg)-offset-* задают смещение относительно левого блока или начала строки в условных единицах

Java

<div class=»row»>
<div class=»col-md-4″>
<h2>Левый блок</h2>
<p>…</p>
</div>
<div class=»col-md-4 col-md-offset-4″>
<h2>Правый блок</h2>
<p>…</p>
</div>
</div>

1
2
3
4
5
6
7
8
9
10

<h2>Левыйблок<h2>

<div>

<h2>Правыйблок<h2>

<div>

Класс col-md-offset-4 будет смещать правый блок на 4 условных единицы вправо:

Некоторые примеры по использованию смещения:

CSS переменные (пользовательские CSS-свойства)

Благодаря отказу от браузера Internet Explorer в новой версии Бутстрап пользовательские CSS переменные стали использоваться значительно шире. В 4-ой версии корневые переменные содержали в себе только цвета и шрифты. В 5-ой версии были добавлены параметры макета (точки останова) и несколько компонентов.

Вообще, я для себя не вижу полезности в этих css-переменных, так как я не пишу стили в css. Я использую препроцессор SASS и gulp-сборку для верстки. При таком подходе у меня все переменные хранятся в отдельном sass-файле (_variables.sass), так что управлять значениями можно намного гибче. Но я быть может напишу отдельную статью про css-переменные, может кому будет полезно.

Sass миксины

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

Переменные

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

Пример использования

Вы можете изменить переменные на свои собственные значения или просто использовать миксины со значениями по умолчанию. Вот пример использования настроек по умолчанию для создания макета из двух столбцов с промежутком между ними.

Главое содержимое
Вторичное содержимое

Иконки Bootstrap

Теперь Bootstrap имеет свою собстенную коллекцию svg иконок. Не скажу, что они отностся именно к 5-ой версии, но это полезно для веб-разработки, поэтому я решил упомянуть и про них. Коллекция насчитывает более 1300 высококачественных иконок и подключить их можно, как svg-спрайт или иконочный шрифт. Искать нужные иконки можно по удобному поиску, который мнгновенно выдает результаты.

Коллекция иконок Bootstrap

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

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

Стоит отметить, что данная коллекция не имеет привязки конкретно к Bootstrap. Вы можете использовать их и без применения Бутстрап в любом проекте.

Размещение по горизонтали

В следующем примере используется та же самая разметка, но в этот раз мы используем md для «средних». Это означает, что если область просмотра меньше «среднего» (то есть меньше 768 пикселей), то ячейки в сетке будут располагаться друг под другом, а каждая ячейка будет занимать всю ширину.

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

Сортировка колонок

В обычной системе сеток, если нам необходимо поменять порядок колонок, нам нужно использовать push и pull.

Разработчики Bootstrap реализовали встроенное свойство flexbox order на основе трех классов сортировки, которые применим к колонкам col:

.flex-first – отображается первым
.flex-last – отображается последним
.flex-unordered – отображается между первым и последним

Java

<div class=»container»>
<div class=»row»>
<div class=»col flex-unordered»>
Первый, но не первый и не последний
</div>
<div class=»col flex-last»>
Второй, но последний
</div>
<div class=»col flex-first»>
Третий, но первый
</div>
</div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13

Первый,нонепервыйинепоследний

<div>

Второй,нопоследний

<div>

Третий,нопервый

<div>

Колонки с автоматической компоновкой

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

Равная ширина

Например, вот два макета сетки, которые применяются к каждому устройству и окну просмотра, от до . Добавьте любое количество классов без единиц измерения для каждой нужной контрольной точки, и каждая колонка будет одинаковой ширины.

1 из 2

2 из 2

1 из 3

2 из 3

3 из 3

Установка ширины одного колонки

Автоматическая компоновка колонок сетки Flexbox также означает, что Вы можете установить ширину одного колонки и автоматически изменять размер колонок-братьев вокруг него. Вы можете использовать предопределенные классы сетки (как показано ниже), миксины сетки или встроенную ширину

Обратите внимание, что размер других колонок будет изменяться независимо от ширины центрального колонки

1 из 3

2 из 3 (шире)

3 из 3

1 из 3

2 из 3 (шире)

3 из 3

Переменная ширина контента

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

1 из 3

Переменная ширина контента

3 из 3

1 из 3

Переменная ширина контента

3 из 3

Bootstrap Grid System

Bootstrap’s grid system allows up to 12 columns across the page.

If you do not want to use all 12 column individually, you can group the columns together to create wider columns:

span 1	span 1	span 1	span 1	span 1	span 1	span 1	span 1	span 1	span 1	span 1	span 1
span 4	span 4	span 4
span 4	span 8
span 6	span 6
span 12

Bootstrap’s grid system is responsive, and the columns will re-arrange
depending on the screen size: On a big screen it might look better with the
content organized in three columns, but on a small screen it would be better if
the content items were stacked on top of each other.

Tip: Remember that grid columns should add up to twelve for a
row. More than that, columns will stack no matter the viewport.

Строки (Rows) и Колонки (Columns)

Сейчас, я бы хотел, чтобы в Bootstrap не были на самом деле именованы как “строки” (row). Название “строка”, зачастую запутывающее и скрывает настоящее предназначение .

Когда вы думаете о строке, вы возможно думаете о горизонтальной линии, что вполне ОК, НО, лучше думать о строке, как о родителе для колонок.

Думайте о строках, как о группе колонок (Columns)

Это потому, что колонки внутри не всегда располагаются горизонтально вдоль вьюпорта. Иногда нам надо, чтобы колонки в шаблоне были горизотальны, а иногда нам надо, чтобы они располагались вертикально. Концепция горизонтального vs. Вертикального шаблона является сущностью адаптивного дизайна. Единственным предназначением “строки”, является содержание одной или более “колонки”.

Не вставляйте контент прямо в “строку”!

Так делать нельзя:

<div class="row">   This is very bad, wrong way, no bueno!!</div><div class="row">   <p>This is also very bad, the wrong way!!</p></div><div class="row">   <h2>No headings either! This is the wrong way!!</h2></div>

“колонки” и только колонки, размещаются внутри “строк”.

А контент размещается уже внутри “колонок”.

<div class="row">   <div class="col">Happy :-) This is the right way.</div></div>

Так же очень важно упомянуть, что имеет. А как потомок в Flexbox, “колонка” в каждой строке одной и той же высоты

Благодаря Flexbox, горизонтальное и вертикальное выравнивание легко делается с использованием рабочих классов Bootstrap 4 — flex и auto-margin.

А теперь настало время углубиться в строки и колонки и то, как они на самом деле взаимодействуют. Есть разные типы колонок и разные способы использования их в шаблоне. Они как магия.

Шаги для блокировки адаптивного просмотра

Опустите просмотр как об этом сказано в
Переопределить на Для каждого грид уровня, с одной ширины, например быть уверены, что это происходит после умолчанию Bootstrap CSS. Можно избежать с медиа запросы или какой-селектор-фу.
Если вы используете навигационное меню, удалите все меню, которые могут сворачиваться/разворачиваться.
Для макета разметки используйте классы как дополнение или вместо классов medium/large. Не волнуйтесь, для extra-small устройств разметка масштабируется для всех размеров экранов.

Вам еще нужно Respond.js для IE8 (так как наш медиа запросы еще есть и должны быть обработаны).
Это отключает «мобильный сайт» аспекта Bootstrap.

Автоматическая разметка колонок

2.1 Колонки одинаковой ширины

С помощью нового универсального класса «.col» можно указать до 12 колонок в ряду (родитель «.row»), ширина которых будет автоматически вычислена в зависимости от количества элементов и будет равна.

Например:

2.2 Установка ширины одной колонки

Вы также можете явно установить ширину одной колонки, а остальные оставить автоматическими.

<div class="row">
	<div class="col">1 из 3</div>
	<div class="col-6">2 из 3 (широкое)</div>
	<div class="col">3 из 3</div>
</div>
<div class="row">
	<div class="col">1 из 3</div>
	<div class="col-5">2 из 3 (широкое)</div>
	<div class="col">3 из 3</div>
</div>

В данном примере второй элемент в третьем ряду имеет класс «.col-6» и второй элемент во втором ряду имеет класс «.col-5», которые занимают соответствующее количество колонок на всех разрешениях экрана. Ширина остальных колонок является отзывчивой и вычисляется автоматически, занимая все оставшееся пространство.

2.3 Контент переменной ширины

Можно использовать класс «col-{breakpoint}-auto», чтобы определить контент с переменной шириной, в зависимости от занимаемого пространства содержимым колонки. Где breakpoint — размер экрана (xl, lg, md или sm).

<div class="row justify-content-sm-center">
	<div class="col col-md-2">1 из 3</div>
	<div class="col-sm-auto">Контент переменной ширины</div>
	<div class="col col-md-2">3 из 3</div>
</div>
<div class="row">
	<div class="col">1 из 3</div>
	<div class="col-sm-auto">Контент переменной ширины номер два</div>
	<div class="col col-md-2">3 из 3</div>
</div>

Здесь мы видим, что две центральные колонки занимают ширину, соответствующую ширине содержимого, однако в первом ряду благодаря классу «.justify-content-sm-center» у «.row» весь ряд центрируется и общая ширина зависит только от ширины центральной колонки, в то время, как второй ряд растягивается на всю доступную ширину, но вторая колонка остается фиксированной по ширине содержимого.

2.4 Мульти-ряд

Благодаря Bootstrap 4 вы можете сделать в одном ряду несколько строк (переносов). Реализовать это можно с помощью класса «.w-100», который очень похож на тег «br» и по-сути просто делает перенос колонок на новую строку.

<div class="row">
	<div class="col">col</div>
	<div class="col">col</div>
	<div class="w-100"></div>
	<div class="col">col</div>
	<div class="col">col</div>
	<div class="col">col</div>
</div>

Вложенность

Весьма ожидаемо, что Bootstrap 4 поддерживает вложенность элементов. Работает здесь все также, как в третьей версии — чтобы вложить колонки в другие, необходимо создать дочерний класс «.row» и уже в него вкладывать колонки.

<div class="row">
	<div class="col-sm-9">Уровень 1: «.col-sm-9»
		<div class="row">
			<div class="col-8 col-sm-6">Уровень 2: «.col-8 .col-sm-6»</div>
			<div class="col-4 col-sm-6">Уровень 2: «.col-4 .col-sm-6»</div>
		</div>
	</div>
</div>

Мы рассмотрели основные особенности работы с сеткой Bootstrap 4. Если у вас есть желание более подробно ознакомиться со всеми возможностями фреймворка, рекомендую изучить документацию на официальном сайте.

В следующем уроке мы рассмотрим настройку Bootstrap сетки под ваш конкретный проект на примере использования в стартовом шаблоне OptimizedHTML 4. А именно настройку, работу с переменными отступов, брейкпоинтов, количества колонок и прочего.

Другие уроки по теме «HTML и CSS»

Создание крутого Swiper-слайдера от А до Я. Джедай верстки #8. Материалы курса
Адаптивная верстка галереи без JS. HTML + CSS target. Работа с изображениями (Retina img)
Адаптивная HTML верстка вертикального таймлайна
CSS Grid: адаптивная верстка реального макета
CSS Grid: Новый взгляд на адаптивную верстку сайтов. Руководство

Модули, navbars, и виртуальные клавиатуры

Переполнение и прокрутка

Поддержка на элемент весьма ограничен в iOS и Android. С этой целью, когда вы прокрутите мимо верхней или нижней части модального в любом из браузеров этих устройств, в контент начнет прокручиваться. Смотрите Хром ошибка № 175502 (исправлено в Chrome и V40) и В WebKit ошибка #153852.

текстовых полей iOS и прокрутки

Начиная с iOS 9.3, в то время как модальные открыт, если начальное касание прокрутки жест в пределах границы текста или В содержание под модальным будет прокручиваться вместо модальных себя. Смотрите В WebKit ошибка № 153856.

Виртуальная клавиатура

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

Bootstrap не обрабатывает такие ошибки, так что вам нужно самим это решить.

Меню Навигации

Элемент не используется на iOS в навигации из-за сложности с z-index. Таким образом, чтобы закрыть выпадающие меню, необходимо просто нажать элемент выпадающего (или ).

Как это работает

Система сеток Bootstrap использует серию контейнеров, строк и столбцов для компоновки и выравнивания содержимого. Он построен с помощью flexbox и полностью адаптивен. Ниже приведен пример и подробное рассмотрение того, как объединяется сетка.

Новичок или незнакомец с flexbox? для фона, терминология, рекомендации и фрагменты кода.

Один из трех столбцов

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

Вот как это работает:

Контейнеры предоставляют средства для центрирования и горизонтального размещения содержимого Вашего сайта. Используйте для адаптивной ширины в пикселях или для параметра для всех размеров области просмотра и устройства.
Строки — это обертки для столбцов. У каждого столбца есть горизонтальный (называемый полем) для управления пространством между ними. Затем этому противодействуют строки с отрицательными полями. Таким образом, все содержимое Ваших столбцов визуально выравнивается по левому краю
В макете сетки содержимое должно быть размещено внутри столбцов, и только столбцы могут быть непосредственными дочерними элементами строк.
Благодаря flexbox, столбцы сетки без указанной ширины будут автоматически компоноваться как столбцы одинаковой ширины. Например, каждый из четырех экземпляров автоматически будет иметь ширину 25% от небольшой контрольной точки и выше. См. дополнительные примеры в разделе .
Классы столбцов указывают количество столбцов, которое Вы хотите использовать из возможных 12 в строке. Итак, если Вам нужны три столбца одинаковой ширины, Вы можете использовать .
Ширина столбцов задается в процентах, поэтому они всегда гибкие и имеют размер относительно их родительского элемента.
Столбцы имеют горизонтальный для создания промежутков между отдельными столбцами, однако Вы можете удалить из строк и из столбцов с помощью в строке .
Чтобы сетка реагировала, есть пять контрольных точек сетки, по одной для каждой : все контрольные точки (очень маленькие), маленькие, средние, большие и очень большие.
Контрольные точки сетки основаны на медиа-запросах минимальной ширины, то есть они применяются к этой одной контрольной точке и всем тем, что выше нее (например, применяется к маленьким, средним, большим и очень большим устройствам , но не первая контрольная точка ).
Вы можете использовать предопределенные классы сетки (например ) или для большей семантической разметки.

Помните об ограничениях и ошибках вокруг flexbox, таких как .

Поддержка браузерами

Прежде чем мы перейдем к ключевым изменениям новой версии Bootstrap, давайте рассмотрим поддержку браузерами. Если вы используете Bootstrap 4 или более старую версию платформы Bootstrap, вам может потребоваться настроить уровень поддержки при переходе на Bootstrap 5. Поддержка Internet Explorer 10 и 11 была официально исключена из новой версии. Теперь поддерживаемые браузеры — это Microsoft Edge вместе с другими наиболее популярными браузерами, такими как Google Chrome и Firefox, включая последнюю версию Firefox с расширенной поддержкой (ESR)

Обратите внимание на то, что прокси-браузеры (такие как Opera Mini, Opera Mobile’s Turbo mode, Amazon Silk, UC Browser Mini) не поддерживаются. Bootstrap 5 также может хорошо работать в Chromium и Chrome для Linux, а также Firefox для Linux, но официально это не указано

Кроме того, альтернативные браузеры, которые используют последнюю версию WebKit, Blink или Gecko, напрямую или через WebView API, официально не поддерживаются.

Когда дело доходит до поддержки мобильных устройств, минимальная поддерживаемая версия iOS — это версия 7 и выше. Для Android это версия 6 и выше в браузере и WebView. Более старые версии Android и iOS официально не поддерживаются. Некоторые свойства CSS, такие как hidden; для элемента <body> весьма ограничены в iOS и Android.

Если вам нужно какое-то обходное решение для того чтобы избежать возникновения ошибок в старых и неподдерживаемых браузерах, Bootstrap позволяет использовать CSS хаки браузера, называемые валидаторами, для указания специального CSS для определенной версии браузера. Вы можете посетить данную страницу, чтобы узнать об этом больше.

Container#

Containers provide a means to center and horizontally pad your site’s contents. Use for a responsive pixel width.

<Container>

<Row>

<Col>1of1</Col>

</Row>

</Container>

Fluid Container

You can use for width: 100% across all viewport and device sizes.

<Containerfluid>

<Row>

<Col>1of1</Col>

</Row>

</Container>

You can set breakpoints for the prop. Setting it to a breakpoint () will set the as fluid until the specified breakpoint.

<Containerfluid="md">

<Row>

<Col>1of1</Col>

</Row>

</Container>

Internet Explorer 10 на Windows 8 и Windows Phone 8

Интернет Эксплорер 10 не отличает ширину устройства с шириной окна просмотра, и, следовательно, неправильно применяет медиа запросы в CSS Bootstrap. Как правило, вы могли бы просто добавить быстрый фрагмент CSS чтобы исправить это:

Однако, это не работает для устройств, работающих под управлением Windows Phone 8 версий старше, чем Обновления 3 (а.к.а. GDR3), поскольку это вызывает такие устройства, чтобы главным образом показать основной рабочий стол вместо узкого «phone» view. Для решения этой проблемы вам необходимо включать следующие CSS и JavaScript, чтобы обойти ошибку.

Для получения дополнительной информации и руководства по использованию, просмотрите Windows Phone 8 и Device-Width.

Один за одним, мы включаем это в документацию и примеры Bootstrap в качестве демонстрации.

Настройка сетки

Используя наши встроенные сеточные переменные и карты Sass, можно полностью настроить предопределенные классы сеток. Измените количество уровней, размеры медиа-запроса и ширину контейнера, а затем перекомпилируйте.

Колонки и промежутки

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

Уровни сетки

Выходя за рамки самих колонок, Вы также можете настроить количество уровней сетки. Если Вам нужно всего четыре уровня сетки, Вы бы обновили и примерно так:

При внесении любых изменений в переменные или карты Sass Вам необходимо сохранить изменения и перекомпилировать. В результате будет выведен новый набор предопределенных классов сетки для ширины колонок, смещений и порядка. Утилиты адаптивной видимости также будут обновлены для использования настраиваемых контрольных точек. Убедитесь, что Вы установили значения сетки в (не , или ).