Внимание! Обязательно прочтите страницу Сетка, прежде чем погрузиться в то, как изменять и настраивать колонки сетки.
Как они работают
Колонки основаны на архитектуре Flexbox сетки. Flexbox означает, что у нас есть возможности для изменения отдельных колонок и модификации групп колонок на уровне строки. Вы выбираете, как колонки увеличиваются, уменьшаются или изменяются иным образом.
При построении макетов сетки весь контент размещается в колонках. Иерархия сетки Bootstrap идет от контейнера до строки к колонки Вашего содержимого. В редких случаях Вы можете комбинировать контент и колонку, но имейте в виду, что это может иметь непредвиденные последствия.
Bootstrap включает предопределенные классы для создания быстрых и отзывчивых макетов. Благодаря шести контрольным точкам и дюжине колонок на каждом уровне сетки у нас есть десятки классов уже построен для Вас, чтобы создавать желаемые макеты. При желании это можно отключить через Sass.
Выравнивание
Используйте утилиты выравнивания flexbox для вертикального и горизонтального выравнивания колонок.
Вертикальное выравнивание
Одна из трех колонок
Одна из трех колонок
Одна из трех колонок
Одна из трех колонок
Одна из трех колонок
Одна из трех колонок
Одна из трех колонок
Одна из трех колонок
Одна из трех колонок
<div>
<div>
<div>
Одна из трех колонок
</div>
<div>
Одна из трех колонок
</div>
<div>
Одна из трех колонок
</div>
</div>
<div>
<div>
Одна из трех колонок
</div>
<div>
Одна из трех колонок
</div>
<div>
Одна из трех колонок
</div>
</div>
<div>
<div>
Одна из трех колонок
</div>
<div>
Одна из трех колонок
</div>
<div>
Одна из трех колонок
</div>
</div>
</div>
Одна из трех колонок
Одна из трех колонок
Одна из трех колонок
<div>
<div>
<div>
Одна из трех колонок
</div>
<div>
Одна из трех колонок
</div>
<div>
Одна из трех колонок
</div>
</div>
</div>
Горизонтальное выравнивание
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
<div>
<div>
<div>
Одна из двух колонок
</div>
<div>
Одна из двух колонок
</div>
</div>
<div>
<div>
Одна из двух колонок
</div>
<div>
Одна из двух колонок
</div>
</div>
<div>
<div>
Одна из двух колонок
</div>
<div>
Одна из двух колонок
</div>
</div>
<div>
<div>
Одна из двух колонок
</div>
<div>
Одна из двух колонок
</div>
</div>
<div>
<div>
Одна из двух колонок
</div>
<div>
Одна из двух колонок
</div>
</div>
<div>
<div>
Одна из двух колонок
</div>
<div>
Одна из двух колонок
</div>
</div>
</div>
Обертывание колонок
Если в одной строке помещается более 12 колонок, каждая группа дополнительных колонок, как одно целое, переносится на новую строку.
.col-9
.col-4 Поскольку 9 + 4 = 13 > 12, этот div шириной в 4 колонки переносится на новую строку как один непрерывный блок.
.col-6 Последующие колонки продолжаются вдоль новой строки.
<div>
<div>
<div>.col-9</div>
<div>.col-4<br>Поскольку 9 + 4 = 13 > 12, этот div шириной в 4 колонки переносится на новую строку как один непрерывный блок.</div>
<div>.col-6<br>Последующие колонки продолжаются вдоль новой строки.</div>
</div>
</div>
Разрывы колонок
Разбиение колонок на новую строку в flexbox требует небольшого хака: добавьте элемент с width: 100% везде, где Вы хотите перенести колонки на новую строку. Обычно это достигается с помощью нескольких
.row, но не каждый метод реализации может это учитывать.
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
<div>
<div>
<div>. col-6 .col-sm-3</div>
<div>.col-6 .col-sm-3</div>
<!-- Заставит следующие колонки переходить на новую строку -->
<div></div>
<div>.col-6 .col-sm-3</div>
<div>.col-6 .col-sm-3</div>
</div>
</div>
Вы также можете применить этот разрыв в определенных контрольных точках с помощью наших утилит для адаптивного отображения.
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
<div>
<div>
<div>.col-6 .col-sm-4</div>
<div>.col-6 .col-sm-4</div>
<!-- Заставит следующие колонки переходить на новую строку в контрольной точке md и выше -->
<div></div>
<div>.col-6 .col-sm-4</div>
<div>.col-6 .col-sm-4</div>
</div>
</div>
Изменение порядка
Класса порядка
Используйте классы .order- для управления визуальным порядком Вашего контента. Эти классы отзывчивы, поэтому Вы можете установить
order по контрольной точке (например, .order-1.order-md-2). Включает поддержку от 1 до 5 на всех шести уровнях сетки.
Первый в DOM, порядок не применяется
Второй в DOM, с наибольшим порядком
Третий в DOM, с 1 порядком
<div>
<div>
<div>
Первый в DOM, порядок не применяется
</div>
<div>
Второй в DOM, с наибольшим порядком
</div>
<div>
Третий в DOM, с 1 порядком
</div>
</div>
</div>
Существуют также адаптивные классы .order-first
и .order-last, которые изменяют order элемента, применяя order: -1 и order: 6 соответственно. Эти классы также могут быть при необходимости смешаны с пронумерованными классами .order-*.
Первый в DOM, порядок последнего
Второй в DOM, без порядка
Третий в DOM, порядок первого
<div>
<div>
<div>
Первый в DOM, порядок последнего
</div>
<div>
Второй в DOM, без порядка
</div>
<div>
Третий в DOM, порядок первого
</div>
</div>
</div>
Смещение колонок
Вы можете смещать колонки сетки двумя способами: нашими адаптивными классами сетки . offset- и нашими утилитами полей. Классы сетки имеют размер, соответствующий колонкам, в то время как поля более полезны для быстрых макетов, где ширина смещения является переменной.
Классы смещения
Переместите колонки вправо, используя классы
.offset-md-*. Эти классы увеличивают левое поле колонки на колонки *. Например, .offset-md-4 перемещает .col-md-4 на четыре колонки.
Классы .col-* также могут использоваться вне .row, чтобы дать элементу определенную ширину. Когда классы колонок используются как непрямые дочерние элементы строки, отступы опускаются.
.col-3: ширина равна 25%
.col-sm-9: ширина равна 75% выше контрольной точки sm
<div>
.col-3: ширина равна 25%
</div>
<div>
.col-sm-9: ширина равна 75% выше контрольной точки sm
</div>
Классы можно использовать вместе с утилитами для создания гибких плавающих изображений. Убедитесь, что содержимое обернуто в оболочку .clearfix, чтобы очистить плавающее значение, если текст короче.
PlaceholderАдаптивное плавающее изображение
Абзац текста-заполнителя. Мы используем его здесь, чтобы показать использование класса clearfix. Мы добавляем здесь довольно много бессмысленных фраз, чтобы продемонстрировать, как столбцы здесь взаимодействуют с плавающим изображением.
Как видите, абзацы изящно обтекают плавающее изображение. А теперь представьте, как это будет выглядеть с фактическим содержанием здесь, а не просто с этим скучным текстом-заполнителем, который продолжается и продолжается, но на самом деле не передает никакой осязаемой информации. Он просто занимает место, и его не стоит читать.
И тем не менее, здесь вы, по-прежнему настойчив в чтении этот текст-заполнитель, в надежде еще несколько прозрений, или некоторые скрытые пасхальные яйца содержания. Возможно, шутка. К сожалению, здесь ничего этого нет.
<div>
<img src="..." alt="...">
<p>
Абзац текста-заполнителя. Мы используем его здесь, чтобы показать использование класса clearfix. Мы добавляем здесь довольно много бессмысленных фраз, чтобы продемонстрировать, как столбцы здесь взаимодействуют с плавающим изображением.
</p>
<p>
Как видите, абзацы изящно обтекают плавающее изображение. А теперь представьте, как это будет выглядеть с фактическим содержанием здесь, а не просто с этим скучным текстом-заполнителем, который продолжается и продолжается, но на самом деле не передает никакой осязаемой информации. Он просто занимает место, и его не стоит читать.
</p>
<p>
И тем не менее, здесь вы, по-прежнему настойчив в чтении этот текст-заполнитель, в надежде еще несколько прозрений, или некоторые скрытые пасхальные яйца содержания. Возможно, шутка. К сожалению, здесь ничего этого нет.
</p>
</div>
Создание Bootstrap-сетки в Figma
Всем привет, дорогие друзья! Сегодня мы рассмотрим создание сетки Bootstrap для Figma – одного из популярнейших UI-инструментов в настоящее время.
Смотреть урок на YouTube
Сетка Bootstrap уже прочно вошла в стек инструментов для коммерческой разработки – она позволяет эффективно и быстро разрабатывать адаптивные сайты, значительно сокращает и оптимизирует время разработки на этапе Дизайн to Front-end. У нас уже были уроки по созданию сетки Bootstrap для различных графических программ, таких, как Photoshop, Adobe XD, Gimp, Inkscape и т.д. Ознакомиться с сопутствующими уроками и материалами:
Bootstrap 4. Сетка. Подробное руководство: Посмотреть урок
Bootstrap Grid options: Документация
Photoshop (Bootstrap сетка, PSD): Посмотреть урок
Open Source Web Design: Урок и сетка Inkscape
Сетка для Gimp: Скачать
Результат этого урока (готовые сетки 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
Создание сайта от А до Я. Комплексный курс
Создание современного интернет-магазина от А до Я
Я — фрилансер! Базовый курс для начинающих
Другие уроки по теме «Веб-дизайн»
Создание дизайна сайта в Figma на реальном примере. Материалы урока
С чего начать работу над дизайном и где брать вдохновение
Процесс создания дизайна сайта салона красоты. Мастер веб-дизайна #7
Мастер веб-дизайна #5: Создание дизайна сайта пиццерии
Как стать крутым веб-дизайнером? Все по полочкам: UI/UX, Wireframing, правила хорошего тона, организация работы, верстка, самообучение
Как работает сетка Bootstrap 4. Понимание Flexbox Powered… | Кэрол Скелли
Понимание сетки Bootstrap 4 на основе Flexbox
завершить статью «Как… Bootstrap».
Система сетки Bootstrap используется для компоновки, в частности, для адаптивных макетов . Понимание как это работает жизненно важен для понимания Bootstrap. Сетка состоит из групп строк и столбцов внутри 1 или более контейнеров .
Bootstrap Grid можно использовать отдельно, без Bootstrap JavaScript и других компонентов CSS. Вам просто нужно загрузить и сослаться на « bootstrap-grid.css », который содержит классы Grid и Flexbox. Более подробная информация о только с использованием Bootstrap Grid CSS находится здесь, в документации.
Вот наиболее базовый пример использования Grid:
container "> row "> col ">I'm your content внутри сетки!
Что дает нам один большой «столбец» горизонтально через область просмотра…
Bootstrap один столбец Макет
2 столбца…
контейнер "> строка "> col ">Левый столбец
col ">Правый столбец
Bootstrap 2-столбец Макет
3 столбца…
контейнер "> строка "> col ">Левый столбец col ">Центральный столбец col ">Правый столбец
Bootstrap 3-column Layout
Примечание: Светло-серые линии границ вокруг столбцов в приведенных выше примерах были добавлены, чтобы вы могли визуализировать контур каждого столбца. См. рабочие макеты на Codeply .
Основные понятия сетки понятны, но вам может быть интересно, зачем нужна вся эта HTML-разметка. У вас могут возникнуть такие вопросы, как…
__Зачем мне нужен Контейнер?
__Можно ли сделать один столбец шире других?
Вскоре я отвечу на подобные вопросы по Grid. Но сначала Я хочу сделать шаг назад, чтобы объяснить кое-что очень важное об использовании Решетки.
Доверься мне. Понимание «Правил сетки» сэкономит вам много времени и нервов. Прочтите их внимательно…
Столбцы должны быть непосредственными дочерними элементами Строки.
Строки только используются для столбцов, больше ничего .
Строки должны быть помещены в Контейнер.
Эти правила очень ВАЖНО . Строки и столбцы всегда работают вместе , и у вас никогда не должно быть одного без другого .
Плохие вещи произойдут, если вы не будете следовать этим 3 простым правилам сетки, ровно . Я ответил на бесчисленное количество вопросов о Bootstrap в Stack Overflow, просто применив эти правила. Сначала это может показаться сложным, но это действительно легко, когда вы понимаете, как работает Сеть.
В предыдущем примере вы могли заметить, что я использовал .container для переноса .row . Контейнер — это корневой (также известный как верхний уровень, самый внешний) элемент Bootstrap Grid.
container "> row "> col ">Я доволен внутри сетки!
< /div>
Контейнер может использоваться для хранения любых элементы и содержимое. Это , а не , используется только для строк и столбцов сетки. Например, это вполне допустимая разметка Bootstrap:
Мой заголовок
Я доволен внутри сетки!
Не игнорировать контейнер.
На первый взгляд Контейнер может показаться тривиальным или ненужным, но он очень важен для контрольная ширина макета. Контейнер также используется для равномерного выравнивания левого и правого краев макета в окне просмотра браузера. Контейнер используется для противодействия отрицательным полям строки , о чем я объясню чуть ниже.
К вашему сведению: Viewport — видимая область внутри окна браузера.
Bootstrap 4 имеет 2 типа контейнеров . В моих примерах я использовал .container , но есть и полноразмерный .container-fluid . Вы можете использовать любой из них:
1 — Контейнер фиксированной ширины для размещения макета по центру:
container ">
2 — макет охватывает всю ширину:
container-fluid ">
. container масштабируется по ширине (по мере сужения экрана), так что в конечном итоге он становится полным -Ширина, как . container-fluid на небольших устройствах.
Напоминание: Контейнер может использоваться для хранения любого содержимого , а не только строк и столбцов сетки. Но если вы используете строки и столбцы сетки, строки должны быть помещены в контейнер . Попробуйте демо-версию контейнера на Codeply
При использовании сетки внутри контейнера будет размещено еще строк. У вас может быть несколько строк в контейнере, и вы можете иметь несколько контейнеров на одной странице. Все зависит от того, какой макет вы пытаетесь выполнить, но пока не слишком зацикливайтесь на этом.
важно , что Контейнер используется для хранения строк сетки ( .row ).
Строки имеют отрицательное левое/правое поле -15 пикселей. Отступ контейнера в 15 пикселей используется, чтобы противодействовать отрицательным полям строки. Это делается для того, чтобы содержимое было равномерно выровнено по краям макета. Если вы не поместите строку в контейнер, строка переполнит свой контейнер, что приведет к нежелательной горизонтальной прокрутке.
Какое-то время мне хотелось, чтобы файл Bootstrap .row на самом деле не назывался «row». Название «строка» часто вводит в заблуждение и скрывает истинное назначение .row .
Когда вы думаете о строке, вы, вероятно, думаете, что горизонтальная строка, что нормально, НО лучше думать о .row просто как о родительском элементе столбцов.
Думайте о строке как о группе столбцов
Это потому, что столбцы внутри .row не всегда расположены горизонтально поперек окна просмотра. Иногда мы хотим, чтобы расположение столбцов было по горизонтали, , в то время как в других случаях мы хотим, чтобы столбцы располагались по по вертикали на вниз по области просмотра. Концепция горизонтального и вертикального макета является сутью адаптивного дизайна . Единственная цель «строки» состоит в том, чтобы содержать 1 или более «столбцов».
НЕ РАЗМЕЩАЙТЕ КОНТЕНТ ПРЯМО ВНУТРИ РЯДА!
⛔ <дел> Это очень плохо, неправильно, не буэно!!
Это тоже очень плохо, неправильно!!
Нет заголовков! Это неправильный путь!!
Столбцы , и только столбцы помещаются внутри строки .
Контент размещается внутри столбцов.
✅
Счастливый :-) Это правильный путь.
Также важно отметить, что .row — это display:flex . Как дочерние элементы Flexbox, столбцы в каждой строке имеют одинаковую высоту . Благодаря Flexbox выравнивание по горизонтали и по вертикали (выравнивание по правому краю, по центру, по нижнему краю и т. д.) легко выполняется с помощью классов Bootstrap 4 Flex и Auto-margin Utility .
Теперь пришло время более подробно изучить строки и столбцы и , а точнее , то, как они работают вместе. Существуют разные «типы» столбцов и разные способы их использования в макете. Они как магия.
Создание горизонтальных делений поперек окна просмотра.
Может иметь различную заданную ширину.
Может изменяться по ширине при разной ширине экрана.
Расположение по горизонтали слева направо, затем по вертикали вверх-вниз.
Может изменить положение (переупорядочить) относительно братьев и сестер в том же ряду.
Такого же роста, как и другие братья и сестры в том же ряду.
Может «расти» или «сжиматься» в ширину.
Может автоматически «обтекать» или «складывать» по вертикали по мере необходимости или при различной ширине экрана.
Может содержать еще вложенных строк и столбцов__.
Просто не забывайте , что столбцы должны быть прямым потомком строки.
Столбцы создают горизонтальных делений поперек окна просмотра. Пространство между столбцами называется « желоб » .
3 столбца поперек
Классическая сетка Bootstrap состоит из 12 столбцов:
Примечание для чайников: Столбцы на самом деле не светло-розовые. Это используется только для того, чтобы вы могли видеть левую/правую границы столбцов. В большинстве случаев вы не собираетесь использовать все 12 отдельных столбцов, как показано выше. Вместо этого вы будете использовать некоторую комбинацию из 12, чтобы содержать содержимое страницы…
Таким образом, столбцы могут быть равномерно разделены на множители 12. Например, 6 столбцов (12/6 = 2):
И вы можете сделать математику…
Столбцы можно разделить- до использования любая часть из 12 единиц. И, , можно использовать меньше, чем 12 . Также можно использовать вместо 12 , что я покажу вам позже.
При всей этой гибкости возможности компоновки кажутся безграничными…
Но сетка не всегда около 12. Благодаря Flexbox Bootstrap 4 имеет новые « Auto-layout » Колонки . Эти безразмерные столбцы обеспечивают еще большую гибкость при разработке макетов.
Bootstrap 4 Auto-layout Grid
Теперь вы знаете, как использовать столбцы для создания горизонтального макета. Но подождите, есть еще! Давайте поговорим о некоторых необычных вещах, которые могут делать колонки.
Как вы только что видели выше, столбцы могут быть разной ширины:
Знаете ли вы, что столбец ширина может меняться в зависимости от ширины экрана?
Это называется Адаптивный дизайн, и я расскажу вам именно как это работает.
Но, обо всем по порядку , мне нужно закончить рассказ о столбцах. Помните, я сказал: «Можно использовать более чем 12 столбцов подряд »?
Столбцы в том же Расположение строк по горизонтали поперек, а затем сложите по вертикали вниз. Это вертикальное «наложение» или «обтекание» происходит, когда количество столбцов в одной строке превышает 12. Это известно как «обтекание столбцов»… Шириной столбцов и «обтеканием» можно управлять с помощью различных уровней адаптивной сетки (также известных как «точки разрыва сетки»):
Столбцы могут изменять положение (переупорядочивать) относительно одноуровневых элементов в той же строке:
Столбцы могут содержать дочерние строки и столбцы. Это называется «вложением»:
Столбцы могут «расти» или «сжиматься» по ширине. Это столбцы с автоматическим макетом:
Уровни сетки, медиа-запросы и точки останова, о боже!
Я еще не закончил говорить о Rows & Columns , потому что они звезды шоу , когда речь заходит об адаптивном дизайне.
Все дело в ширине.
Bootstrap 4 имеет 5 адаптивных уровней (он же «точки останова»), который вы могли заметить в некоторых из предыдущих примеров столбцов (например, col-lg-4 , col-md ).
Контрольные точки отклика, основанные на ширине экрана:
(xs) — ширина экрана < 576 пикселей (это уровень «по умолчанию»)
см — ширина экрана ≥ 576 пикселей
7 md 90 ≥ 768 px
lg — ширина экрана ≥ 992 px
xl — ширина экрана ≥ 1200 px
В стороне: Почему я поставил (xs) в круглых скобках, а не другие точки останова? Поскольку xs (extra-small) является точкой останова по умолчанию, инфикс -xs , который использовался для Bootstrap 3.x, больше не используется в Bootstrap 4.x. Таким образом, вместо col-xs-6 используется просто col-6 .
Bootstrap использует мультимедийные запросы CSS для установки этих точек останова. Они позволяют управлять поведением столбца при различной ширине экрана.
The col- sm -6 означает использование 6 из 12 столбцов шириной (50%), на типовой малой ширине устройства ( больше или равно 768 пикселей):
На меньше 768 пикселей , 2 столбца становятся шириной 100% и располагаются вертикально:
Это потому, что ( xs ) является точкой останова по умолчанию или , подразумеваемой . Поскольку я не указал ширину столбца по умолчанию, ширина 50% была равна , только применялась к 768px и шире для контрольной точки см .
Mobile-first!
Поскольку (xs) является точкой останова по умолчанию , подразумевается col-12 . Итак, это:
col-12 col-sm-6 ">Столбец
Работает так же, как это:
col-sm-6 ">Столбец
Большие точек останова, переопределить меньшие точки останова.
xs (default) > overridden by sm > overridden by md > overridden by lg > overridden by xl
Or, in reverse… xl > overrides lg > overrides md > overrides sm > overrides ( xs )
Therefore, col-sm-6 действительно означает 50% ширины на small -и выше . Для той же ширины столбца на всех уровнях просто установите ширину для наименьшего 9Желаемый уровень 0012. Например, :
col-lg-3 col-md-3 col-sm-3 ">.. совпадает с
col-sm-3 ">..
Для другой ширины столбца на большем уровне используйте соответствующую большую точку останова, чтобы переопределить меньшую точку останова. Например, , 3 столбца шириной на см и 4 столбца шириной на мкр -и выше :
col-sm-3 col-md-4 ">..
Bootstrap 4 столбца с автоматическим макетом и работают отзывчиво. Из-за их простоты я предпочитаю их классическим 12-элементным колонкам. Столбцы с автоматическим макетом идеально подходят для любых сценариев макета, где требуются столбцы одинаковой ширины. Но не забывайте, столбцы из 12 единиц можно смешивать по мере необходимости.
Взгляните на несколько примеров сетки с автоматической компоновкой…
3 столбца одинаковой ширины. `cols` остаются горизонтальными при любой ширине и не располагаются вертикально, потому что точка останова xs установлена по умолчанию:
container "> row "> col ">1 col ">2 col ">3
3 столбца одинаковой ширины (отзывчивые). В этом примере столбцы остаются горизонтальными до тех пор, пока не0027 sm точка останова 576 пикселей, а затем сложить вертикально. Помните, что вы можете отключить sm для любой точки останова ( md , lg , xl ): col-sm «>1 col-sm «>2 col-sm «>3
2 столбца, левая боковая панель. Вот пример сочетания классических столбцов с заданной шириной и столбцов с автоматическим расположением. Правый столбец автоматически увеличится до до , чтобы заполнить ширину, потому что мы используем автоматический макет .col . Боковая панель будет составлять 16,6% ширины экрана на больших экранах, а затем будет располагаться сверху на см контрольной точке 576 пикселей:
3 столбца, правая боковая панель (уменьшить размер): В этом примере слева боковая панель, центральная область содержимого и правая боковая панель, которая на сжимается на по ширине, чтобы соответствовать своему содержимому.
контейнер "> строка "> col-sm-2 ">left col "> основное содержание col-auto ">right
Ключевые моменты адаптивного дизайна с использованием сетки Bootstrap 4:
Столбцы будут складываться вертикально (и станут полная ширина) при меньшей ширине экрана , если только вы не используете определенный класс col-* в разметке HTML. Используйте специальный col-* , чтобы предотвратить вертикальное наложение.
Меньшие классы сетки и применяются к большим экранам, если они не переопределены специально для большей ширины экрана. Итак, фактически совпадает с . Поэтому вам нужно использовать класс только для наименьшей ширины , которую вы хотите поддерживать.
Строки display:flex, и, следовательно, столбцы равной высоты в одной строке. Используйте автоматические поля или элементы выравнивания Flexbox и выравнивание содержимого для по горизонтали или по вертикали (по центру, внизу, справа и т. д.).
Спасибо, что прочитали всю историю! Вы также найдете эту статью на Themes.guide. Если вы хотите продолжать узнавать больше о Bootstrap 4, ознакомьтесь с полным руководством « How to… Bootstrap » и изучите мой Bootstrap Theme Builder и множество примеров кода Bootstrap 4 на Codeply .
__Carol
Как использовать сетку Bootstrap
Сеточная система Bootstrap
используется для макета, в частности Адаптивные макеты . Понимание того, как это работает, жизненно важно для понимания Bootstrap.
Сетка состоит из групп строк и столбцов внутри одного или нескольких контейнеров .
Bootstrap Grid можно использовать отдельно, без Bootstrap JavaScript и других компонентов CSS. Вам просто нужно скачать и
ссылайтесь на "bootstrap-grid.css" , который содержит классы Grid и Flexbox. Дополнительная информация только об использовании
Bootstrap Grid CSS находится здесь, в документации.
Базовый пример использования Grid:
<дел>
<дел>
Я ваш контент внутри сетки!
Это дает нам одну большую «колонку» по горизонтали через окно просмотра…
2 столбца…
<дел>
<дел>
Левый столбец
Правый столбец
3 столбца…
<дел>
<дел>
Левый столбец
Средний столбец
Правый столбец
Базовые концепции Grid быстро понятны, но вам может быть интересно, зачем все это
HTML-разметка обязательна. У вас могут возникнуть такие вопросы, как…
Зачем мне Контейнер?
Можно ли сделать один столбец шире других?
Нужно ли использовать ряд?
Я отвечу на вопросы, подобные этим, чуть ниже.
Но сначала я хочу сделать шаг назад, чтобы объяснить кое-что очень важное об использовании сетки.
Понимание «Правил сетки» сэкономит вам много времени и нервов.
Прочтите их внимательно…
1. Столбцы
должны быть непосредственными дочерними элементами строки.
2. Строки
, только используются для столбцов, больше ничего.
3. Строки должны быть размещены внутри Контейнера.
Эти правила очень ВАЖНЫ. Строки и столбцы всегда работают вместе, и у вас никогда не должно быть одного без другого.
Плохие вещи произойдут, если вы не будете в точности следовать этим трем простым правилам сетки. Я ответил на бесчисленное количество вопросов о Bootstrap
на Stack Overflow, просто применяя эти правила. Сначала это может показаться сложным, но это действительно легко, когда вы понимаете, как работает Сеть.
Есть
правильный способ использовать сетку Bootstrap…
В предыдущих примерах вы могли заметить, что я использовал класс .container для переноса .row .
Контейнер — это корневой (он же: верхний уровень, самый внешний) элемент Bootstrap Grid.
<дел>
<дел>
Я доволен сеткой!
Контейнер можно использовать для хранения любых элементов и контента. Он используется не только для
Строки и столбцы сетки. Например, это вполне допустимая разметка Bootstrap:
.
<дел>
Мой заголовок
<дел>
Меня устраивает сетка!
Сначала Контейнер может показаться тривиальным или ненужным, но он очень важен для контроль
ширина макета. Контейнер также используется для равномерного выравнивания левого и правого краев
компоновка в области просмотра браузера.
Bootstrap 4 имеет 2 типа контейнеров. В своих примерах я использовал .container , но есть и
полная ширина .container-fluid . Вы можете использовать любой из них:
1 — Контейнер фиксированной ширины для размещения макета по центру:
<дел>
2 — Полноразмерный контейнер для макета, занимающего всю ширину:
<дел>
Контейнер .container уменьшается по ширине (по мере уменьшения ширины экрана), так что в конечном итоге
он становится полноразмерным, как .container-fluid на небольших устройствах.
Примечание. Контейнер может содержать любое содержимое, а не только строки и столбцы сетки. Но если ты
использовать строки и столбцы сетки, строки должны быть размещены внутри контейнера.
Попробуйте демо-контейнер на Codeply
При использовании сетки внутри контейнера будет размещена еще одна строка. Вы можете иметь несколько строк в
Container, и вы можете иметь несколько Containers на одной странице. Все зависит от того, какой макет вы пытаетесь
выполнить, но пока не слишком зацикливайтесь на этом.
Важно, чтобы контейнер использовался для хранения строк сетки (.row).
Строки имеют отрицательное левое/правое поле -15px. Отступ контейнера в 15 пикселей используется для противодействия отрицательным полям строки.
Это делается для того, чтобы содержимое было равномерно выровнено по краям макета. Если вы не поместите строку в контейнер, строка переполнится.
контейнер, вызывающий нежелательную горизонтальную прокрутку.
Обратите внимание, что я сгруппировал «Строки и столбцы» в одном разделе этой статьи. Это потому, что вы не можете иметь его без
другое, как объяснялось ранее в «Правилах сетки».
Какое-то время я хотел, чтобы Bootstrap .row на самом деле не назывался «строка».
Название «строка» часто вводит в заблуждение и скрывает истинное назначение .row .
Когда вы думаете «ряд», вы, вероятно, думаете, что горизонтальная линия , это нормально, НО лучше подумать о .row просто как родитель столбцов.
Думайте о строке как о группе столбцов
Это связано с тем, что столбцы внутри строки .row не всегда располагаются горизонтально в области просмотра. Иногда мы хотим, чтобы макет столбца был горизонтальным,
в то время как в других случаях мы хотим, чтобы столбцы располагались вертикально вниз в окне просмотра. Концепция горизонтальной и вертикальной компоновки является сутью
Отзывчивый дизайн. Единственная цель «строки» состоит в том, чтобы содержать 1 или более «столбцов».
НЕ РАЗМЕЩАЙТЕ КОНТЕНТ ПРЯМО ВНУТРИ СТРОКИ!
Опять же, только цель Ряда состоит в том, чтобы содержать столбцы.
⛔
<дел>
Это очень плохо, неправильно, нет буэно!!
<дел>
Это тоже очень плохо, неправильно!!
<дел>
И заголовков тоже нет! Это неправильный путь!!
столбца и только столбца размещаются внутри строки.
✅
<дел>
Счастливый :-) Это правильный путь.
Также важно отметить, что .row — это display:flex . Как дети Flexbox,
Столбцы в каждой строке имеют одинаковую высоту. Из-за Flexbox горизонтальное и вертикальное выравнивание (выравнивание по правому краю, по центру, по нижнему краю и т. д.)
легко выполняется с помощью классов Bootstrap 4 Flex и Auto-margin Utility.
Теперь пришло время более подробно рассмотреть строки и столбцы, а также ровно как они работают вместе.
Существуют разные «типы» столбцов и разные способы их использования в макете. Они волшебные.
Счастье это… Столбцы.
Все возможности Bootstrap 4 Columns…
Создание горизонтальных делений в окне просмотра.
Может иметь различную заданную ширину.
Может изменяться по ширине при разной ширине экрана.
Расположение горизонтально слева направо, затем вертикально вверх и вниз.
Может изменить положение (переупорядочить) относительно братьев и сестер в той же строке.
одного роста со своими братьями и сестрами в том же ряду.
Может «расти» или «сжиматься» в ширину.
Может автоматически «заворачиваться» или «складываться» по вертикали по мере необходимости или с разной шириной.
Может содержать больше строк и столбцов__, это называется «вложением».
Все, что вам нужно знать о столбцах Bootstrap…
Столбцы создают горизонтальные деления в окне просмотра.
Пространство между колоннами называется «желобом».
Классическая сетка Bootstrap состоит из 12 столбцов:
Примечание для чайников: Столбцы на самом деле не светло-розовые. Это используется только для того, чтобы вы могли видеть левую/правую границы столбцов.
В большинстве случаев вы не собираетесь использовать все 12 отдельных столбцов, как показано выше. Вместо этого вы будете использовать некоторые
комбинация 12, чтобы содержать содержимое страницы…
Таким образом, столбцы можно равномерно разделить на множители по 12. Например, 6 столбцов (12/6 = 2):
А посчитать можно…
Столбцы можно разделить, используя любую часть из 12 блоков. И можно использовать меньше, чем 12 . Также можно использовать больше, чем 12 , что я покажу вам позже.
При всей этой гибкости возможности компоновки кажутся безграничными…
Но сетка не всегда около 12. Благодаря Flexbox,
Bootstrap 4 имеет новые столбцы «Auto-layout».
Эти безразмерные столбцы обеспечивают еще большую гибкость при разработке макетов.
Теперь вы знаете, как использовать столбцы для создания горизонтального макета. Но подождите… это еще не все! Давайте поговорим о некоторых более причудливых вещах, которые могут делать столбцы.
Как вы видели ранее, столбцы могут быть разной ширины:
Знаете ли вы, что ширина столбца может измениться на в зависимости от ширины экрана ?
Это называется Адаптивный дизайн , и я очень скоро расскажу вам, как это работает.
Но обо всем по порядку, мне нужно закончить рассказывать вам о Columns. Помните раньше, когда я сказал
» Можно ли использовать более 12 столбцов подряд «?
Столбцы в одной и той же строке располагаются горизонтально по горизонтали, а затем складываются вертикально вниз.