Grid bootstrap: Grid system · Bootstrap

Bootstrap Бутстрап 4 Grid System

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

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

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

Система сетки Bootstrap реагирует, и столбцы будут переупорядочены в зависимости от размера экрана: на большом экране он может выглядеть лучше с содержанием организованы в трех колонках, но на маленьком экране было бы лучше, если содержание элементов были сложены на вершине e другие.

Классы сетки

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

• .col- (дополнительные малые устройства-ширина экрана менее 576пкс)
• .col-sm- (малые устройства-ширина экрана равна или больше, чем 576пкс)
• .col-md- (средние устройства-ширина экрана, равная или превышающая 768px)
• .col-lg- (большие устройства-ширина экрана равна или больше, чем 992пкс)
• .col-xl- (XLarge устройства-ширина экрана, равная или превышающая 1200px)

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

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

Системные правила сетки

Некоторые правила системы сетки Bootstrap 4:

• Строки должны быть размещены в пределах . container (фиксированной ширины) или .container-fluid (полная ширина) для правильного выравнивания и заполнения
• Использование строк для создания горизонтальных групп столбцов
• Содержимое должно быть помещено в столбцы, и только столбцы могут быть непосредственными потомками строк
• Предопределенные классы .row , как и .col-sm-4 доступны для быстрого создания макетов сетки
• Столбцы создают водосточные желоба (промежутки между содержимым столбцов) с помощью заполнения. Это заполнение смещение в строках для первого и последнего столбца с помощью отрицательного поля на.rows
• Столбцы сетки создаются путем указания числа 12 доступных столбцов, которые необходимо охватить. Например, три равных столбца будут использовать три .col-sm-4
• Ширина столбцов в процентах, поэтому они всегда являются жидкими и имеют размер относительно родительского элемента
• Самая большая разница между Bootstrap 3 и Bootstrap 4 заключается в том, что BootStrap 4 теперь использует Flexbox, а не float. Одним из больших преимуществ с Flexbox является то, что столбцы сетки без заданной ширины будут автоматически раскладки как «столбцы с одинаковой шириной» (и равная высота). Пример: три элемента с .col-sm каждым автоматически будет 33,33% шириной от небольшой точки останова и выше. Совет: Если вы хотите узнать больше о Flexbox, вы можете прочитать наш CSS Flexbox учебник.

Обратите внимание, что Flexbox не поддерживается в IE9 и более ранних версиях.

Если вам нужна поддержка IE8-9, используйте Bootstrap 3. Это наиболее стабильная версия Bootstrap, и она по-прежнему поддерживается командой для критических исправлений и изменений в документации. Тем не менее, новые функции не будут добавлены к нему.

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

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

<!— Or let Bootstrap automatically handle the layout —>
<div>
  <div></div>
  <div></div>
  <div></div>
 
<div></div>
</div>

Первый пример: Создайте строку ( <div
class="row"> ). Затем добавьте нужное количество столбцов (тегов с соответствующими .col-*-* классами). Первая звезда (*) представляет отзывчивость: SM, MD, LG или XL, в то время как вторая звезда представляет число, которое должно всегда добавлять до 12 для каждой строки.

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

Параметры сетки

В следующей таблице приведены сводные сведения о том, как система Grid Bootstrap 4 работает на различных размерах экрана.

	Extra small (<576px)	Small (>=576px)	Medium (>=768px)	Large (>=992px)	Extra Large (>=1200px)
Префикс класса	. col-	.col-sm-	.col-md-	.col-lg-	.col-xl-
Поведение сетки	По горизонтали в любое время	Свернутый для запуска, горизонтальный над точками останова	Свернутый для запуска, горизонтальный над точками останова	Свернутый для запуска, горизонтальный над точками останова	Свернутый для запуска, горизонтальный над точками останова
Container width	None (auto)	540px	720px	960px	1140px
Подходит для	Портретные телефоны	Пейзаж телефонов	Таблетки	Ноутбуки	Ноутбуки и настольные компьютеры
# of columns	12	12	12	12	12
Gutter width	30px (15px on each side of a column)	30px (15px on each side of a column)	30px (15px on each side of a column)	30px (15px on each side of a column)	30px (15px on each side of a column)
Nestable	Да	Да	Да	Да	Да
Offsets	Да	Да	Да	Да	Да
Column ordering	Да	Да	Да	Да	Да

Примеры

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

Создание Bootstrap-сетки в Figma

Всем привет, дорогие друзья! Сегодня мы рассмотрим создание сетки Bootstrap для Figma – одного из популярнейших UI-инструментов в настоящее время.

Поделиться

Твитнуть

Поделиться

Класснуть

Запинить

Сетка Bootstrap уже прочно вошла в стек инструментов для коммерческой разработки – она позволяет эффективно и быстро разрабатывать адаптивные сайты, значительно сокращает и оптимизирует время разработки на этапе Дизайн to Front-end. У нас уже были уроки по созданию сетки Bootstrap для различных графических программ, таких, как Photoshop, Adobe XD, Gimp, Inkscape и т.д. Ознакомиться с сопутствующими уроками и материалами:

Результат этого урока (готовые сетки Figma) вы можете скачать здесь:

Скачать Bootstrap Figma

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

Итак, для начала создадим новый документ. Обычно я создаю документ для нового проекта с паттерном «Desktop»:

Здесь у нас создаётся фрейм шириной 1440 пикселей. Это среднее универсальное значение. Конечно-же можно сделать макет шире или наоборот уже, но, в целом, начинать создание дизайна можно именно с такой ширины макета. Как я говорил ранее, сетка в Figma настраивается довольно-таки быстро и просто. Однако, что касается сетки Bootstrap, здесь есть подводные камни. Давайте разберёмся подробнее.

На панели справа найдём «Layout grid» и добавим сетку со следующими параметрами:

Сетка Bootstrap с настройками по умолчанию имеет общую ширину 1140 пикселей на больших разрешениях (Extra large, см. документацию), но при создании сетки в Figma следует учитывать тот факт, что CSS-сетка имеет дополнительные отступы слева и справа по 15px, а в программе этих отступов нет, можно указывать только общее значение Gutter между колонками. Соответственно, ширина сетки в Figma будет иметь общую ширину 1100px (1140px — 15px — 15px). Размер одной ячейки в этом случае рассчитывается следующим образом. Во-первых, у нас есть 12 промежутков по 30px (11 по 30px в самой сетке и 15px + 15px по бокам). Общая ширина всех отступов сетки составляет 12 * 30 = 360px. Теперь вычтем из общей ширины сетки Bootstrap в CSS ширину всех отступов: 1140px — 360px = 780px. Это общая ширина всех колонок без промежутков. Далее делим общую ширину всех колонок на 12 и получаем ширину одной колонки в системе сеток Bootstrap на самых больших разрешениях: 780px / 12 = 65px.

Обратите внимание в «Type» мы указали «Center» – это значит, что мы без проблем сможем в дальнейшем управлять шириной макета. Например, если макет в результате окажется слишком широким, мы сможем его обрезать. И наоборот, если понадобится увеличить ширину макета, это также можно будет сделать без опасения, что нарисованный в системе сеток контент разъедется и дизайн придётся переделывать.

Кроме 12-ти колоночной системы сеток Bootstrap, я также использую и горизонтальную разметку для соблюдения вертикального ритма. Давайте добавим ещё одну сетку (Rows) и зададим следующие значения:

Здесь мы указываем «Count» — «Auto» для того, чтобы вся доступная область выбранного фрейма заполнялась сеткой. Для того, чтобы сетка не была такой контрастной и не мешала работе над дизайном, я обычно прибираю значение непрозрачности цвета «Color» до 5%.

Обратите внимание, что «Type» мы можем указать как «Center» или «Top» – это самые популярные параметры горизонтальной сетки для веб-дизайна в Figma. Однако, я рекомендую использовать именно «Top», чтобы в процессе работы, если понадобится сделать макет выше, сетка не съехала и дизайн не пришлось переделывать.

В качестве «Gutter» и «Height» мы указали 10px. Это адекватный вертикальный ритм для большинства проектов, однако вы можете использовать более популярное значение 8px для этих двух параметров. Экспериментируйте.

Внимание! Здесь, стоит добавить, что если вы используете в работе стартер OptimizedHTML 5, то здесь уже определён наиболее оптимальный вертикальный ритм для дефолтного размера текста в 16px (line-height: 1. 65). Эти значения являются результатом моего опыта работа над различными сайтами и являются наиболее адекватными для практически любого проекта.
Если вы планируете в дальнейшем использовать стартер OptimizedHTML 5 или общий межстрочный интервал в CSS line-height: 1.65 и дефолтный размер шрифта проекта 16px, то при создании дизайна следует устанавливать значения «Gutter» и «Height» для горизонтальной сетки в 13px:

На панели справа найдём секцию «Frame» в Figma, укажем высоту макета 3500 (H) и перейдём к созданию сетки для следующего разрешения.

При создании Bootstrap-сеток в Figma и других графических редакторах для других разрешений следует учитывать, что если для самого большого разрешения ширина фрейма свободная и может меняться, то на остальных разрешениях, которые меньше, ширина фреймов должна быть привязана к соответствующим значениям из документации Bootstrap (см. Bootstrap Grid options):

Соответственно, общая ширина фрейма для следующего разрешения составит 992px (Large):

Ширина одной Bootstrap-колонки для данного разрешения, при условии, что будет отражено 12 колонок, составит 50px. Остальные параметры Bootstrap-сетки такие-же, как у предыдущего фрейма:

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

Отлично! Переходим к созданию сетки для следующего разрешения. Создаём новый фрейм (по документации Bootstrap ширина 768px). В данном фрейме можно также отобразить 12 колонок. Зачастую, на таком разрешении адаптивный контент ещё не «схлопывается», контент максимально вытягивается по высоте. Однако, в зависимости от задач, вы можете указать и другое количество колонок. Ширина одной колонки на таком разрешении составит 30px, если количество колонок указано 12. остальные параметры – как у предыдущих макетов.

Следующий размер фрейма 576px. На таком разрешении целесообразнее отобразить 6 колонок. Ширина одной колонки 60px. Остальные параметры и горизонтальная сетка как у предыдущих макетов.

И последний фрейм сделаем шириной 320px, отобразим 2 колонки, ширина колонки 130px. Остальные параметры как у предыдущих макетов. 320px – это минимальное разрешение в веб-дизайне, так как в настоящее время уже нет устройств, способных отобразить современный веб-контент меньше этого разрешения. Обычно на таком разрешении весь контент вытягивается в длинную ленту, однако иногда бывают случаи, когда необходимо разделить дизайн на колонки и на таком маленьком разрешении. Так как отступы в любом случае одинаковые по краям, можно сделать разлиновку на 2 колонки для того, чтобы в случае необходимости у нас была возможность воспользоваться колоночной системой.

Для того, чтобы воспользоваться созданной в данном уроке системой сеток в Figma, Скачайте архив с документом Figma, распакуйте и перетащите файл в список проектов Figma (Drafts). У вас появится новый документ «Bootstrap-Figma». Откройте его.

Для того, чтобы включить или отключить сетки в Figma, воспользуйтесь горячими клавишами Ctrl + Shift + 4.

Любой из фреймов документа «Bootstrap-Figma» вы можете выделить, скопировать Ctrl + C и вставить Ctrl + V в новый проект и использовать в своей работе.

Премиум уроки от WebDesign Master

Другие уроки по теме «Веб-дизайн»

Почему CSS Grid лучше Bootstrap для создания макетов

Это перевод статьи «Why CSS Grid is better than Bootstrap for creating layouts» от Per Harald Borgen.

CSS Grid — это новый способ создания макетов в интернете. Впервые полноценная система вёрстки доступна прямо в браузере, что даёт массу преимуществ.

Эти преимущества становятся особенно выразительными, если вы сравните CSS Grid с самым популярным фреймворком Bootstrap. Вы можете не только создавать макеты, которые раньше были невозможны без JavaScript, но ваш код станет легче поддерживать и понимать.

Давайте посмотрим на три главных причины, почему я думаю, что CSS Grid превосходит Bootstrap.

Разметка станет проще

Замена Bootstrap на CSS Grid сделает HTML более чистым. Хотя это не самое важное преимущество, оно, вероятно, первое, которое вы заметите.

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

(Я добавил в пример немного дизайна. Однако это не имеет никакого отношения к сравнению CSS Grid и Bootstrap, поэтому я сохраню эту часть CSS снаружи своих примеров).

Bootstrap

Давайте для начала рассмотрим разметку, необходимую для создания этого сайта в Bootstrap.

Тут мне хочется, чтобы вы обратили внимание вот на что:

1. Каждая строчка должна быть с отдельным тэгом <div> .
2. Для обозначения макета должны использоваться имена классов (col-xs-2).
3. Когда этот шаблон усложняется, HTML тоже.

Если это адаптивный сайт, тэги выглядят как правило ещё хуже:

CSS Grid

Теперь давайте посмотрим на способ реализации того же в CSS Grid. Вот HTML:

Я мог использовать семантические элементы, но решил придерживаться div, чтобы сравнение с Bootstrap выглядело понятнее.

Можно заметить сразу, что эта разметка проще. Уродливые имена классов и дополнительные тэги div для каждой строчки — в прошлом. Это просто контейнер для сетки и позиции внутри неё.

И в отличие от Bootstrap, эта разметка не станет слишком сложной с ростом сложности макета страницы.

В примере с Bootstrap от вас не требовалось добавлять CSS, в CSS Grid в этом конечно есть необходимость. Если конкретно, вам необходимо добавить это:

Для некоторых это может быть аргументом в пользу Bootstrap: вам не нужно беспокоиться о CSS для создания простой сетки — вы просто строите макет в HTML.

Но, как вы поймёте из следующего пункта, связь между разметкой и макетом на самом деле — уязвимость, если речь идёт о гибкости.

Намного больше гибкости

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

Другими словами — изменить макет с такого:

на такой:

CSS Grid

Делать это с CSS Grid очень просто. Мы добавляем media-запрос и перемешиваем разные блоки как хотим:

Возможность создания макета подобным образом — не заботясь о том, как написан HTML — называется независимостью от порядка в коде (source order independence), и это гигантская победа для разработчиков и дизайнеров.

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

Bootstrap

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

Сделать такое с наличием медиа-запроса — не тривиальная задача. Такое можно провернуть только вместе с HTML и CSS, и вам бы пришлось возиться с JavaScript.

Этот пример показывает огромное преимущество CSS Grid, которое я испытал на себе.

Больше никаких ограничений 12 колонками

Это не самая крупная проблема, но она множество раз выводила из себя. Поскольку Bootstrap grid разделён на 12 колонок, у вас появятся проблемы, если вы захотите макет из пяти. Или семи. Или девяти. Или из числа, которое не двенадцать.

С CSS Grid всё не так. Вы можете сделать свой собственный макет из стольких колонок из скольких хотите. Вот макет из семи колонок.

Это делается установкой значения repeat(7, 1fr) для grid-template-columns, вот так:

Возможно, есть хак-способов сделать подобное в Bootstrap… И я в курсе, что Bootstrap 4 использует Flexbox, который даёт возможность такой гибкости, но он всё ещё никак не выйдет из бета-версии.

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

Перед тем, как завершить эту статью, естественно, нужно поговорить о поддержке браузеров. На момент написания этой статьи, 75% глобального веб-трафика поддерживает CSS Grid.

Но, перед тем, как вы целиком откажетесь от мысли пользоваться CSS Grid, я советую прислушаться к тому, что говорит Мортен Ранд-Хендриксен об этом. Он утверждает, что CSS Grid — это возможность переосмыслить то, как мы представляем обратную совместимость:

CSS Grid — это модуль разметки, он позволяет нам менять разметку документа без вмешательства в порядок исходного кода. Другими словами CSS Grid — это абсолютно визуальный инструмент, и если его правильно использовать, он не будет влиять на внутренние связи содержимого в документе. Из этого следует простой, но удивительный факт: отсутствие поддержки CSS Grid в старом браузере не должно влиять на восприятие посетителя сайта, оно должно просто менять это восприятие.

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

Заключение

Я хочу поделиться цитатой Джен Симмонс, разработчика Mozilla. Она описывает то же чувство, которое испытал я к CSS Grid, после того как разобрался в нём:

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

преимущества и недостатки сеток, возможность объединения

От автора: до того, как я открыл для себя CSS Grid, я часто использовал сетку Bootstrap. Сетка Bootstrap была разумным решением для многих проблем с адаптивностью, которые у меня в то время возникали. Затем я обнаружил CSS Grid. Преимущество CSS Grid над Bootstrap — это ее двумерная природа (возможность использовать строки и столбцы), а не одна строка в Bootstrap.

В Интернете много споров о том, что лучше, когда каждая из них должна использоваться и как их использовать. Это меня сильно смутило. Хотя я чаще использую CSS Grid, мне нравятся они обе. В то время, как CSS Grid значительно мощнее, я считаю, что сетка Bootstrap более гибкая. Мне действительно нужно выбирать?

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

Ссылка на codepen.

Фреймворк Bootstrap 4. Быстрый старт

Изучите основы Bootstrap 4 на практическом примере по верстке блога с нуля

Узнать подробнее

В приведенном выше коде я создал вложенную в section сетку с классом .section из четырех столбцов. Я на самом деле хочу, чтобы четыре столбца занимали половину ширины экрана на устройствах менее 998 пикселей и располагались друг над другом на небольшом экране для удобства чтения. Но CSS Grid не дает мне такой возможности. Они остается такими же, как вы можете видеть на изображении ниже.

для большого экрана

маленький экран (мобильное представление)

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

Фреймворк Bootstrap 4. Быстрый старт

Изучите основы Bootstrap 4 на практическом примере по верстке блога с нуля

Узнать подробнее

Сетка Bootstrap позволяет размещать в строке до 12 столбцов. На большом экране четыре столбца располагаются рядом. Каждый столбец занимает 3 единицы из 12 столбцов.

большой экран > 1000 пикселей

планшеты

На среднем экране столбцы теперь занимают 6 единиц, общие 12 столбцов поделить на два столбца.

мобильное представление

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

Автор: Barri Sambaris

Источник: //hackernoon.com

Редакция: Команда webformyself.

Фреймворк Bootstrap 4. Быстрый старт

Изучите основы Bootstrap 4 на практическом примере по верстке блога с нуля

Узнать подробнее

Фреймворк Bootstrap 4. Быстрый старт

Изучите основы Bootstrap 4 на практическом примере по верстке блога с нуля!

Смотреть

Bootstrap 4 система сеток, примеры использования

Система сеток Bootstrap 4 состоит из 12 столбцов.

Пример сетки Bootstrap 4:

.col-xs-1

.col-xs-1

.col-xs-1

.col-xs-1

.col-xs-1

.col-xs-1

.col-xs-1

.col-xs-1

.col-xs-1

.col-xs-1

.col-xs-1

.col-xs-1

.col-xs-2

.col-xs-3

.col-xs-7

.col-xs-4

.col-xs-4

.col-xs-4

Цифра в конце каждого класса определяет количество столбцов, которое займет блок. Класс .col-xs-1 определяет 1 столбец, .col-xs-8 — 8 столбцов. xs — означает, что сетка будет действовать на экранах с очень маленьким разрешением (например, телефоны). Для других разрешений есть классы sm, md, lg.

Код сетки из примера выше:

<div>
	<!-- Bootstrap Grid -->
	<div>
	  <div>.col-xs-1</div>
	  <div>.col-xs-1</div>
	  <div>.col-xs-1</div>
	  <div>.col-xs-1</div>
	  <div>.col-xs-1</div>
	  <div>.col-xs-1</div>
	  <div>.col-xs-1</div>
	  <div>.col-xs-1</div>
	  <div>.col-xs-1</div>
	  <div>.col-xs-1</div>
	  <div>.col-xs-1</div>
	  <div>.col-xs-1</div>
	</div>
	<div>
	  <div>.="col"] {
	border: 1px solid white;
	background: #f5f5f5;
	text-align: center;
	padding-top: 8px;
	padding-bottom: 8px;
	}
</style>

Сетка, приведенная выше, будет выглядеть одинаково на всех устройствах.

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

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-2

.col-md-3

.col-md-7

.col-md-4

.col-md-4

.col-md-4

<div>
	<!-- Bootstrap Grid -->
	<div>
	  <div>.col-md-1</div>
	  <div>.col-md-1</div>
	  <div>.col-md-1</div>
	  <div>.col-md-1</div>
	  <div>.col-md-1</div>
	  <div>.col-md-1</div>
	  <div>.col-md-1</div>
	  <div>.col-md-1</div>
	  <div>.col-md-1</div>
	  <div>.col-md-1</div>
	  <div>.col-md-1</div>
	  <div>.col-md-1</div>
	</div>
	<div>
	  <div>.col-md-2</div>
	  <div>.col-md-3</div>
	  <div>.col-md-7</div>
	</div>
	<div>
	  <div>.col-md-4</div>
	  <div>.col-md-4</div>
	  <div>.col-md-4</div>
	</div>
	<div>
	  <div>.col-md-5</div>
	  <div>.col-md-7</div>
	</div>
	<div>
	  <div>.col-md-6</div>
	  <div>.col-md-6</div>
	</div>
	<div>
	  <div>.col-md-12</div>
	</div>
</div>

Размеры сетки

Контейнеры

Сетка должна располагаться внутри контейнера .container (ширина 1170px) или .container-fluid (растягивается на всю ширину экрана).

Row

Колонки должны располагаться внутри строк .row. Только колонки могут быть непосредственными потомками строк.

Padding

У колонок есть отступы. Отступы крайних колонок компенсируются отрицательным margin строки .row.

Больше 12 колонок в ряд?

Если расположить больше 12 колонок в ряд, то колонки будут перемещаться на следующий ряд. Это значит, что если вы расположите, например, .col-md-10 и .col-md-3 в один ряд .row, то .col-md-3 переместится в следующий ряд.

Адаптивная верстка

Для создания адаптивной верстки используйте несколько классов, например, class="col-sm-10 col-md-6".

HTML/CSS. Сеточная система Bootstrap 3

Данный туториал предоставляет информацию о «грид» системе фреймворка Bootstrap 3.

Сеточная система Twitter Bootstrap предлагает быстрый и простой способ создавать разметку веб-страниц. Twitter Bootstrap 3 идет в комплекте с адаптивной мобильной плавающей системой сеток, которая структурируется вплоть до 12 колонок в зависимости от увеличения размера устройства или экрана. Давайте посмотрим, как она работает.

1. Чтобы правильно выравнять и задать внутренний отступ сетки, блоки с классом .row нужно располагать внутри блоков с классом .container (фиксированная ширина) или .container-fluid (по ширине странице).

2. Блоки с классом .row необходимо использовать для создания горизонтальных групп колонок.

3. Содержание нужно располагать внутри колонок и только колонки могут быть непосредственными потомками блоков с классом .row.

4. Предопределенные классы сеток, например .row и .col-xs-4, позволяют быстро создавать разметку сеток. Также можно использовать миксины языка стилей less для увеличения количества типов семантической разметки.

5. Колонки создают промежутки (gutters) (разрывы между содержанием колонок) через внутренний отступ (padding). Этот внутренний отступ (padding) смещается для первой и последней колонок из-за отрицательного значения внешнего отступа (margin) блоков с классом .row.

6. Колонки сеток создаются путем указания требуемого числа из двенадцати доступных колонок. Например, для трех одинаковых колонок нужно использовать три контейнера с классом .col-xs-4.

7. Классы сеток применяются к устройствам, в которых ширина больше или равна контрольным размерам, и переопределяют классы сеток, предназначенных для меньших устройств. Таким образом, применение любого класса .col-md- к элементу задаст стиль не только для средних, но и для больших устройств в том случае, если не используется класс .col-lg- .

Разметка

Twitter Bootstrap 3 включает предопределенные классы сеток, чтобы быстро верстать сеточную разметку для различных типов устройств, например мобильные телефоны, планшеты, компьютеры и т.п. Например, можно использовать класс .col-xs- , чтобы создавать сеточные колонки для очень маленьких устройств, как, например, мобильный телефон; таким же образом класс .col-sm- употребляется для маленьких устройств ~ планшетов, класс .col-md- для средних устройств ~ компьютеров и .col-lg- для больших экранов компьютеров. Ниже приводятся виды разметки системы сеток Bootstrap.

1. Очень маленькие устройства ~ телефоны (<768px)

2. Маленькие устройства ~ планшеты (≥768px)

3. Средние устройства ~ компьютеры (≥992px)

4. Большие устройства ~ компьютеры (≥1200px)

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

Пожалуйста, ознакомьтесь со следующей таблицей для более детальной информации:

Применение класса .col-sm- к элементу повлияет на стиль не только для маленьких устройств, например планшетов, но также для средних и больших устройств с шириной экрана больше или равной 768px (т.е. ≥768px), если не употребляются классы .col-md- и .col-lg- . Подобным образом, класс .col-md- повлияет не только на стиль для средних устройств, но также и для больших, если не употребляется класс .col-lg- .

Приведем примеры:

1. Stacked-to-horizontal (Построение блоков столбцом, которое переходит в строчное на компьютерах). При помощи простого набора сеточных классов .col-md-*, можно создать базовую сеточную систему, при которой блоки располагаются столбцом на мобильных устройствах и планшетах (очень маленькие и маленькие устройства), но трансформируются в строку на компьютерах (средние устройства). Колонки сетки могут располагаться в любом блоке с классом .row.

   Пример кода:

   <div>
   	<div>.col-md-1</div>
   	<div>.col-md-1</div>
   	<div>.col-md-1</div>
   	<div>.col-md-1</div>
   	<div>.col-md-1</div>
   	<div>.col-md-1</div>
   	<div>.col-md-1</div>
   	<div>.col-md-1</div>
   	<div>.col-md-1</div>
   	<div>.col-md-1</div>
   	<div>.col-md-1</div>
   	<div>.col-md-1</div>
   </div>
   <div>
   	<div>.col-md-8</div>
   	<div>.col-md-4</div>
   </div>
   <div>
   	<div>.col-md-4</div>
   	<div>.col-md-4</div>
   	<div>.col-md-4</div>
   </div>
   <div>
   	<div>.col-md-6</div>
   	<div>.col-md-6</div>
   </div>   
   

2. Fluid container (Подвижный контейнер). Превратите любую сеточную разметку с фиксированной шириной в подвижную, изменив класс контейнера с .container на .container-fluid.

   <div>
   	<div>
   	...
   	</div>
   </div>
   

3. Mobile and desktop (Мобильные устройства и компьютер). Можно использовать классы сеток для очень маленьких и средних устройств, добавляя .col-xs-* .col-md-* в колонки.

   Пример кода:

   <!-- Stack the columns on mobile by making one full-width and the other half-width -->
   <div>
   	<div>.col-xs-12 .col-md-8</div>
   	<div>.col-xs-6 .col-md-4</div>
   </div>
       
   <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
   <div>
     <div>.col-xs-6 .col-md-4</div>
     <div>.col-xs-6 .col-md-4</div>
     <div>.col-xs-6 .col-md-4</div>
   </div>
     
   <!-- Columns are always 50% wide, on mobile and desktop -->
   <div>
     <div>.col-xs-6</div>
     <div>.col-xs-6</div>
   </div>
     

4. Mobile, tablet, desktops (Мобильный, планшет, компьютеры). Постройте еще более динамичную разметку для планшета при помощи класса .col-sm-* , используя предыдущий пример.

   Пример кода:

   <div>
   	<div>.col-xs-12 .col-sm-6 .col-md-8</div>
   	<div>.col-xs-6 .col-md-4</div>
   </div>
   <div>
   	<div>.col-xs-6 .col-sm-4</div>
   	<div>.col-xs-6 .col-sm-4</div>
   	<!-- Optional: clear the XS cols if their content doesn't match in height -->
   	<div></div>
   	<div>.col-xs-6 .col-sm-4</div>
   </div>
   

5. Column wrapping (Перенос колонок). Если в одном блоке с классом .row находится больше 12 колонок, каждая группа дополнительных колонок будет переходить на новою строку как единое целое.

   Пример кода:

   <div>
       <div>.col-xs-9</div>
       <div>.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
       <div>.col-xs-6<br>Subsequent columns continue along the new line.</div>
   </div>
   

6. Responsive column resets (Исправление адаптивных колонок). При использовании четырех доступных сеток, вы столкнетесь с проблемой, когда в определенных точках колонки выглядят неправильно из-за разницы высоты. Чтобы это исправить, используйте комбинацию блока с классом .clearfix и адаптивных служебных классов.

   Пример кода:

   <div>
   	<div>.col-xs-6 .col-sm-3</div>
   	<div>.col-xs-6 .col-sm-3</div>
   
   <!-- Add the extra clearfix for only the required viewport -->
   	<div></div>
   	<div>.col-xs-6 .col-sm-3</div>
   	<div>.col-xs-6 .col-sm-3</div>
   </div>
   

7. Offsetting columns (Смещение колонок). Двигайте колонки вправо при помощи классов .col-md-offset-* . Эти классы увеличивают отступ слева от блока на * количество колонок. Например, класс .col-md-offset-4 подвинет блок с классом .col-md-4 на четыре колонки.

   Пример кода:

   
   <div>
   	<div>.col-md-4</div>
   	<div>.col-md-4 .col-md-offset-4</div>
   </div>
   <div>
   	<div>.col-md-3 .col-md-offset-3</div>
   	<div>.col-md-3 .col-md-offset-3</div>
   </div>
   <div>
   	<div>.col-md-6 .col-md-offset-3</div>
   </div>
   
   

8. Nesting columns (Вложенные колонки). Чтобы вложить содержание в основную сетку, добавьте новый блок с классом .row и набор колонок .col-sm-* внутри существующей колонки .col-sm-*. Вложенные блоки с классом row должны включать набор из 12 или менее колонок (не рекомендуется использовать все 12 доступных колонок).

   Пример кода:

   <div>
   	<div>
   	Level 1: .col-sm-9
   		<div>
   		<div>
   		Level 2: .col-xs-8 .col-sm-6
   		</div>
   			<div>
   			Level 2: .col-xs-4 .col-sm-6
   		</div>
   		</div>
   	</div>
   </div>
   

9. Column ordering (Порядок отображения колонок). Порядок отображения встроенных сеточных колонок можно изменить при помощи модифицированных классов .col-md-push-* and .col-md-pull-*.

   Пример кода:

   <div>
   	<div>.col-md-9 .col-md-push-3</div>
   	<div>.col-md-3 .col-md-pull-9</div>
   </div>
   

Адаптивные служебные классы Bootstrap

1. Используйте следующие адаптивные классы, чтобы управлять видимостью элементов на устройствах, чьи размеры экранов подпадают под определенный тип. В версии v3.2.0, классы .visible-*-* для каждого контрольного размера представляются в трех вариантах, по одному на каждое значение свойства CSS display : inline, block и inline-block.

   Класс	Описание
   .visible-xs-*	Делает элемент видимым только для очень маленьких устройств с шириной экрана меньше 768px. Скрыт для других.
   .visible-sm-*	Делает элемент видимым только для маленьких устройств с шириной экрана больше или равной 768px (т.е. ≥768px), но меньше 992px. Скрыт для других.
   .visible-md-*	Делает элемент видимым только для средних устройств с шириной экрана больше или равной 992px (т.е. ≥992px), но меньше 1200px. Скрыт для других.
   .visible-lg-*	Делает элемент видимым только для больших устройств с шириной экрана больше или равной 1200px (т.е. ≥1200px). Скрыт для других.

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

   Класс	Описание
   .hidden-xs	Делает элемент невидимым только для очень маленьких устройств с шириной экрана меньше 768px. Видим для других.
   .hidden-sm	Делает элемент невидимым только для маленьких устройств с шириной экрана больше или равной 768px (т.е. ≥768px), но меньше 992px. Видимый для других.
   .hidden-md	Делает элемент невидимым только для средних устройств с шириной экрана больше или равной 992px (т.е. ≥992px), но меньше 1200px. Видимый для других.
   .hidden-lg	Делает элемент невидимым только для больших устройств с шириной экрана больше или равной 1200px (т.е. ≥1200px). Видимый для других.

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

   .visible-print-block	Делает невидимыми блочные элементы (block) при предпросмотре страницы в браузере для печати.
   .visible-print-inline	Делает невидимыми строчные элементы (inline) при предпросмотре страницы в браузере для печати.
   .visible-print-inline-block	Делает невидимыми строчно-блочные элементы (inline-block) при предпросмотре страницы в браузере для печати.
   .hidden-print	Скрывает элементы, которые видимы в браузере, при печати.

Bootstrap 4: обычная сетка VS flexbox-сетка

Bootstrap 4 готовит для нас некоторые изменения в системе сеток, с которыми мы все так хорошо знакомы с 3-й версии. Теперь она включает в себя новый уровень XL, также изменились некоторые классы модификаторов, и была добавлена совершенно новая сетка на основе flexbox.

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

1. Установка

Наиболее распространенный способ подключения Bootstrap к проекту — с помощью CDN или локального файла. Есть отдельные скомпилированные версии для flex и не-flex сеток:

<!— Original Bootstrap —>
<link href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css» rel=»stylesheet» >

<!— Bootsrap With Flexbox Grid —>
<link href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap-flex.min.css» rel=»stylesheet» >

 Для тех из вас, кто привык компилировать свои кастомные стили Bootstrap, вам нужно включить $enable-flex в основном файле настройек Sass.

_variables.scss

$enable-flex = true;

Что касается размера файла, то версия flexbox немного больше из-за дополнительных правил и префиксов, которые необходимы. Но разница довольно небольшая (119 Кб против 105 КБ) и это в большинстве случаев не имеет значения.

2. Обычная сетка

Все кто работал с Bootstrap знают как работает там сетка. У нас есть строки, разделенные на 12 равных частей, и столбцы, которые идут внутри строк. Каждый столбец может занять от 1 до 12 частей строки:

<div>
   <div>.col-xs-2</div>
   <div>.col-xs-4</div>
   <div>.col-xs-6</div>
</div>

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

<div>
    <div>.col-xs</div>
    <div>.col-xs</div>
    <div>.col-xs</div>
</div>

Столбцы без размера в сетке flexbox будут делить свободное пространство поровну, всегда занимая всю строку. Если мы хотим, чтобы столбец был больше или меньше, мы все еще можем сделать это при помощи класса .col-хs-размер.

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

3. Перенос колонок

Когда сумма всех столбцов в строке больше 12, лишние столбцы будут перенесены на следующую строку. Это работает одинаково в обычной и flexbox сетках.

<div>
   <div>.col-xs-6</div>
   <div>.col-xs-6</div>
   <div>.col-xs-3, This column will move to the next line.</div>
</div>

Единственное, что нужно отметить, это то, что при использовании flexbox, столбец без указанного размера может занять всю строку, как только он будет перенесен.

4. Адаптивная сетка

Как уже было упомянуто во введении, в Bootstrap 4 добавили новый размер XL. Теперь адаптивная сетка может выглядеть следующим образом:

• Очень маленький размер (xs) — меньше 576px
• Маленький (sm) — между 576px и 768px
• Средний (md) — между 768px и 992px
• Большой (lg) — между 992px и 1200px
• Очень большой (xl) — более 1200px

Помимо размера XL, никаких других серьезных изменений в создании адаптивных сеток нет. Обычные и flexbox сетки работают одинаковым образом.

5. Высота колонок

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

В сетках flexbox все ячейки в строке выравниваются, чтобы быть таким же высокими, как столбец, который содержит больше всего контента.

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

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

<div>
    <div>Эта колонка теперь расположена по центру.</div>
</div>

Благодаря свойству justify-content, горизонтальное позиционирование делается очень легко, просто добавлением соответствующего класса.

<div>
    <div>Все колонки в этой строке будут автоматически отцентрированы.</div>
</div>

Кроме того, если вы хотите использовать смещения, то это также делается просто!

7. Выравнивание по вертикали

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

В тоже время flexbox дает нам не один, а два способа вертикального выравнивания столбцов:

Вертикальное выравнивание всего ряда:

<div>
     <div> Середина </div>
</div>  
<div>
    <div> Низ </div>
</div>
<div>
    <div> Верх </div>
</div>

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

<div>
    <div> Середина </div>
    <div> Низ </div>
    <div> Верх </div>
</div>

8. Изменение порядка колонок

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

<div>
    <div> На MD экранах эта колонка сдвинется на 8 столбцов вправо. </div>
    <div> На MD экранах эта колонка сдвинется на 4 столбца влево.</div>
</div>

Любой, кто использовал flexbox ранее, знает, что он имеет встроенное свойство order. Разработчики Bootstrap реализовали это с помощью трех классов:

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

Ручных расчетов не требуется. Если вам нужно сделать перемещение более 3-х столбцов (что случается редко), вы можете использовать pull и push или сделать это с помощью CSS.

Заключение

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

Перевод статьи с tutorialzine.com.

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

Сеточная система начальной загрузки

Сеточная система начальной загрузки

Сетка

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

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

Сетка Bootstrap реагирует, и столбцы будут переупорядочены
в зависимости от размера экрана: на большом экране может выглядеть лучше с
контент организован в три столбца, но на маленьком экране лучше, если
элементы содержимого были наложены друг на друга.

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

Классы сетки

Система сеток Bootstrap имеет четыре класса:

• xs (для телефонов — экраны шириной менее 768 пикселей)
• см (для планшетов — экраны шириной не менее 768 пикселей)
• md (для небольших ноутбуков — экраны шириной 992 пикселя или более)
• LG (для ноутбуков и настольных компьютеров — экраны шириной не менее 1200 пикселей)

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

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

Правила сетевой системы

Некоторые правила сеточной системы Bootstrap:

• Строки должны быть размещены в контейнере .container (фиксированной ширины) или .container-fluid (во всю ширину) для надлежащего выравнивания и заполнения
• Используйте строки для создания горизонтальных групп столбцов
• Содержимое должно быть помещено в столбцы, и только столбцы могут быть непосредственными дочерними элементами строк
• Предопределенные классы, например .row и .col-sm-4 доступны для быстрого создания макетов сетки
• Столбцы создают промежутки (промежутки между содержимым столбца) посредством заполнения. Это заполнение смещено в строках для первого и последнего столбца с помощью отрицательного поля на . Строк
• Столбцы сетки создаются путем указания количества из 12 доступных столбцов, которые вы хотите охватить. Например, три равных столбца будут использовать три .col-sm-4

.

• Ширина столбцов указывается в процентах, поэтому они всегда гибкие и имеют размер относительно их родительского элемента.

Базовая структура сетки начальной загрузки

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

Итак, чтобы создать нужный макет, создайте контейнер (

 Макс.ширина контейнера 

 Идеально для 

  

    
    

        
 Столбец слева 
        
 Столбец справа 
    
    
    
    

        
 Столбец слева 
        
 Столбец справа 
    
    
    
    

        
 Столбец слева 
        
 Столбец справа 
    
  

  

    
    

        
 Столбец слева 
        
 В середине столбца 
        
 Столбец справа 
    
    
    
    

        
 Столбец слева 
        
 В середине столбца 
        
 Столбец справа 
    
    
    
    

        
 Столбец слева 
        
 В середине столбца 
        
 Столбец справа 
    
  

  

    
    

        
 Первый столбец 
        
 Вторая колонка 
    
    
    
    

        
 Первый столбец 
        
 Вторая колонка 
        
 Третий столбец 
    
  

  

    
    

        
 Первый столбец 
        
 Вторая колонка 
    
    
    
    

        
 Первый столбец 
        
 Вторая колонка 
        
 Третий столбец 
    
  

  

    

        
 Первый столбец 
        
 Вторая колонка 
        
 Третий столбец 
    
  

  

    

        
 
 Вставка 1 
 
        
 
 Вставка 2 
 
        
 
 Вставка 3 
 
        
 
 Вставка 4 
 
        
 
 Вставка 5 
 
        
 
 Вставка 6 
 
        
 
 Вставка 7 
 
        
 
 Вставка 8 
 
        
 
 Вставка 9 
 
        
 
 Вставка 10 
 
        
 
 Вставка 11 
 
        
 
 Вставка 12 
 
    
  

  

    

        
 
 Вставка 1 
 
        
 
 Вставка 2 
 
        
 
 Вставка 3 
 
        
 
 Вставка 4 
 
        
 
 Вставка 5 
 
        
 
 Вставка 6 
 
        
 
 Вставка 7 
 
        
 
 Вставка 8 
 
        
 
 Вставка 9 
 
        
 
 Вставка 10 
 
        
 
 Вставка 11 
 
        
 
 Вставка 12 
 
    
  

  

    

        
 
 Вставка 1 
 
        
 
 Вставка 2 
 
        
 
 Вставка 3 
 
        
 
 Вставка 4 
 
        
 
 Вставка 5 
 
        
 
 Вставка 6 
 
        
 
 Вставка 7 
 
        
 
 Вставка 8 
 
        
 
 Вставка 9 
 
        
 
 Вставка 10 
 
        
 
 Вставка 11 
 
        
 
 Вставка 12 
 
    
  

  

    

        
 Столбец слева 
        

            
            

                
 
            
            

                
 
                
 
            
        
    
  

  

    

        
 Столбец слева 
        
 Столбец переменной ширины 
        
 Столбец справа 
    
    

        
 Столбец слева 
        
 Столбец переменной ширины 
        
 Столбец справа 
    
  

  

    

        
 Первый столбец 
        
 Вторая колонка 
        
 Третий столбец 
    
    

        
 Первый столбец 
        
 Вторая колонка 
        
 Третий столбец 
    
    

        
 Первый столбец 
        
 Вторая колонка 
        
 Третий столбец 
    
  

  

    

        
 Первый столбец 
        
 Вторая колонка 
        
 Третий столбец 
    
  

  

    

        
 Первый столбец 
        
 Вторая колонка 
    
    

        
 Первый столбец 
        
 Вторая колонка 
    
    

        
 Первый столбец 
        
 Вторая колонка 
    
  

  

    

        
 Первый столбец 
        
 Вторая колонка 
    
    

        
 Первый столбец 
        
 Вторая колонка 
    
  

  

    

        
 Первый, но наконец заказанный 
        
 Второй, но неупорядоченный 
        
 Последний, но сначала заказанный 
    
  

  

    

        
 Первый, но наконец заказанный 
        
 Второй, но сначала заказанный 
        
 Последний, но заказывается вторым 
    
  

  

    
 Первый столбец 
    
 Вторая колонка 
    
 Третий столбец 
  

  

    
    

        
 .col 
        
 .col 
        
 
        
.col 
        
 .col 
    
    
    

        
 .col 
        
 .col 
        
 
        
 .col 
        
 .col 
    
  

 
  
 
  
 
  1 из 1  
 
  
 
  
 

 
 <Контейнерная жидкость> 
 
  
 
  1 из 1  
 
  
 
  
 

 
  
 
  
 
  1 из 1  
 
  
 
  
 

 
  
 
  
 
  1 из 2  
 
  2 из 2  
 
  
 
  
 
  1 из 3  
 
  2 из 3  
 
  3 из 3  
 
  
 
  
 

 
  
 
  
 
  1 из 3  
 
  2 из 3 (шире)  
 
  3 из 3  
 
  
 
  
 
  1 из 3  
 
  2 из 3 (шире)  
 
  3 из 3  
 
  
 
  
 

 
  
 
  
 
  
 
 1 из 3 
 
  
 
 < Col md = "auto"> Содержимое переменной ширины  
 
  
 
 3 из 3 
 
  
 
  
 
  
 
 < Col> 1 из 3  
 
  Содержимое переменной ширины  
 
  
 
 3 из 3 
 
  
 
  
 
  
 

 
  
 
  
 
  sm = 8  
 
  sm = 4  
 
  
 
  
 
  sm = true  
 
  sm = true  
 
  sm = true  
 
  
 
  
 

 
  
 
 {} 
 
  
 
  
 
 xs = 12 md = 8 
 
  
 
 < Столбец xs = {6} md = {4}> 
 
 xs = 6 md = 4 
 
  
 
  
 
 {} 
 
  
 
  
 
 xs = 6 md = 4 
 
  
 
  
 
 xs = 6 md = 4 
 
  
 
  
 
 xs = 6 md = 4 
 
  
 
  
 
 {} 
 
  
 
  xs = 6  
 
  xs = 6  
 
  
 
  
 

 
  
 
  
 
  Первый, но неупорядоченный  
 
  Второй, но последний  
 
  Третий, но второй  
 
  
 
  
 

 
  
 
  
 
  Первый, но последний  
 
  Второй, но неупорядоченный  
 
  Третий, но первый  
 
  
 
  
 

 
  
 
  
 
  md = 4  
 
  { `md = {{span: 4, offset: 4}}`}  
 
  
 
  
 
  { `md = {{span: 3, offset: 3}}`}  
 
  {`md = {{span: 3, offset: 3}} `}  
 
  
 
  
 
  {` md = {{span: 6, offset: 3}} `}  
 
  
 
  
 

 
  
 
  
 
  1 из 2  
 
  2 из 2 < / Col> 
 
  
 
  
 
  1 из 3  
 
  2 из 3  
 
  3 из 3  
 
  
 
  
 

 
  
 
  
 
  1 из 3  
 
  2 из 3  
 
  3 из 3  
 
  
 
  
 

 

 Один 
 Два 
 Три 
 Четыре 
 Пять 
 Шесть 
 Семь 
 

.wrapper {
дисплей: сетка;
сетка-шаблон-столбцы: 2fr 3fr 1fr;
сетка-шаблон-строки: 1fr 2fr 3fr
}
* {box-sizing: border-box;} 

 

 Один 
 Два 
 Три 
 Четыре 
 Пять
 Добро пожаловать в BrowserStack! 
 Шесть 
 Семь 
 

 

 Один 
 Два 
 Три 


 Четыре 
 Five Добро пожаловать в BrowserStack! 
 Шесть 
 Семь 
 

 

 Один 
 Два 
 Три 


 Четыре 
 Five Добро пожаловать в BrowserStack! 
 Шесть 
 Семь 
 

  container "> 
  row "> 
  col "> Я доволен сеткой! 

  
  
  
 My Heading 
  
  
  
 
 Я доволен сеткой!  
  
  
  
  

  container "> 

  container-fluid "> 

  / * Очень маленькие устройства (телефоны, менее 768 пикселей) * /
/ * Нет медиа-запроса, так как это значение по умолчанию в Bootstrap * /

/ * Маленькие устройства (планшеты, 768 пикселей и выше) * /
@media (min-width: @ screen-sm-min) {...}

/ * Средние устройства (настольные компьютеры, 992 пикселей и выше) * /
@media (min-width: @ screen-md-min) {...}

/ * Большие устройства (большие рабочие столы, 1200 пикселей и выше) * /
@media (min-width: @ screen-lg-min) {...}  

  @media (max-width: @ screen-xs-max) {...}
@media (min-width: @ screen-sm-min) и (max-width: @ screen-sm-max) {...}
@media (min-width: @ screen-md-min) и (max-width: @ screen-md-max) {...}
@media (min-width: @ screen-lg-min) {...}  

  

  
 .col-md-1 
  
 .col-md-1 
  
 .col-md-1 
  
 .col-md-1 
  
 .col-md-1 
  
 .col-md-1 
  
 .col-md-1 
  
 .col-md-1 
  
 .col-md-1 
  
 .col-md-1 
  
.col-md-1 
  
 .col-md-1 


  
 .col-md-8 
  
 .col-md-4 


  
 .col-md-4 
  
 .col-md-4 
  
 .col-md-4 


  
 .col-md-6 
  
 .col-md-6 
  

  

  

    ...
  
  

  

  
 .col-xs-12 .col-md-8 
  
 .col-xs-6 .col-md-4 




  
 .col-xs-6 .col-md-4 
  
.col-xs-6 .col-md-4 
  
 .col-xs-6 .col-md-4 




  
 .col-xs-6 
  
 .col-xs-6 
  

  

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


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

  

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

  

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

  
  
 

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

  

  
 .col-sm-5 .col-md-6 
  
 .col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0 



  
 .col-sm-6 .col-md-5 .col-lg-6 
  
.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0 
  

  

  
 .col-md-4 
  
 .col-md-4 .col-md-offset-4 


  
 .col-md-3 .col-md-offset-3 
  
 .col-md-3 .col-md-offset-3 


  
 .col-md-6 .col-md-offset-3 
  

  

  

    Уровень 1: .col-sm-9
    

      

        Уровень 2: .col-xs-8 .col-sm-6
      
      

        Уровень 2: .col-xs-4 .col-sm-6
      
    
  
  

  

  
 .col-md-9 .col-md-push-3 
  
 .col-md-3 .col-md-pull-9