Содержание
Как работает в Bootstrap сетка и что это вообще такое?
От автора: я приветствую вас. В прошлых статьях мы рассмотрел подключение фреймворка Bootstrap и первые шаги работы с ним. Настал час затронуть самую важную тему. А именно, как работает в Bootstrap сетка. Именно понимание этого вопроса сильно упростит вам верстку сайтов.
Любой css-фреймворк имеет свою сетку. Практически, если мы рассматриваем, для чего вообще создается css-фреймворк, то во многом только для сетки, которая позволяет быстро и легко верстать адаптивные шаблоны. Остальные компоненты вроде кнопок, таблиц, форм и прочего можно сделать и самому, зачастую именно так и нужно.
Конечно, приятно, что Bootstrap есть все компоненты и можно использовать все готовое, но в первую очередь нас интересует именно сетка. Итак, давайте подробно рассмотрим сетку бутстрапа.
12-ти колоночная сетка Bootstrap
Итак, в сетке этого фреймворка по умолчанию 12 колонок. На самом деле при кастомизации фреймворка вы сможете выставить любое другое значение, но практически всегда вас будет устраивать 12 колонок. Число 12 делится на много других чисел, поэтому им очень удобно оперировать.
Фреймворк Bootstrap 5. Быстрый старт
Изучите основы Bootstrap 5 на практическом примере по верстке интернет-магазина с нуля
Узнать подробнее
Если вы ранее создавали с помощью html тегов таблицы, то следующее сравнение будет для вас как нельзя кстати. Ведь сетку фреймворка можно сравнить с обычной таблицей.
Вся сетка должна располагаться в общем контейнере. Это должен быть блок с классом container или container-fluid. Отличие у классов в том, что первый имеет максимальные фиксированные размеры, а именно 1170 пикселей. То есть ширина сайта не будет больше этого значения.
Container-fluid – это полностью резиновый контейнер, который растягивается всегда на 100% ширины окна, поэтому если у вас полностью резиновый сайт, вам нужен именно такой контейнер. Если мы говорим о таблицах, то там тоже есть свой глобальный контейнер – table.
Внутри этого контейнера должен быть еще один блок с классом row, то есть одна строка сетки. И опять же, если сравниваем с таблицами, то там за вывод одного табличного ряда отвечает тег tr. Ряды сетки и таблицы очень похожи, потому что в обоих случаях они просто выступают контейнерами для основного содержимого – в них самих никакой контент не размещается, да и стили к ним не применяются.
Например, если мы говорим о простом сайте, то можно разделить его на три ряда – шапка сайта, блок для основного контента и боковая колонка и подвал. Заметьте, что контент и сайдбар мы поместили в один ряд, потому что это действительно так.
В самом ряду располагаются уже непосредственно ячейки ил колонки, как принято говорить при верстке на Bootstrap. Колонка имеет класс col-x-x, где первый x – обозначение устройства, а второй – кол-во колонок от 1 до 12. Как это работает, мы с вами сейчас посмотрим. Если вам удастся это понять, то вы также быстро поймете, почему так легко делать адаптивные сайты на Bootstrap.
Итак, разработчики фремворка при создании сетки выделили 4 основных типа устройств по ширине экрана. Хорошую таблицу с перечнем классов для сетки вы можете найти в русской документации, которая находится здесь — //www.oneskyapp.com/ru/docs/bootstrap/css#grid.
Вот скриншот этой таблицы. Итак, мы видим, что для самых маленьких устройств, у которых ширина экрана менее 768 пикселей, префикс класса – col-xs- или если отбросить col, просто xs. Далее идет sm (small-devices, ширина от 768 до 991 пикселей), md (medium-devices, ширина от 992 до 1199 пикселей) и large-devices, с шириной более 1200 пикселей.
Как же все это работает? Разбор на примерах
Пока, возможно, вы ничего не поняли, но это нормально. Сейчас я предлагаю вам попрактиковаться: открыть редактор кода, браузер и начать писать код. Естественно, перед этим подключите к html-файлу фреймворк Bootstrap, в прошлых статьях этот вопрос подробно рассматривался.
Итак, давайте рассмотрим этот кусок кода:
<div class = «container»>
<div class = «row»>
<div class = «col-md-3 col-sm-6»>Первый</div>
<div class = «col-md-1 col-sm-6»>Первый</div>
</div>
</div>
<div class = «container»> <div class = «row»> <div class = «col-md-3 col-sm-6»>Первый</div> <div class = «col-md-1 col-sm-6»>Первый</div> </div> </div> |
Если вы внимательно читали предыдущий текст, то уже понимаете, что мы сейчас создаем свои первые блоки в сетке.=col]{
background: #8CC7D9;
border: 1px solid #6B6ACD;
}
Отлично, вот что мы видим в браузере:
Отмечу, что я просматриваю результат на своем компьютере, у которого ширина экрана более 1200 пикселей, а значит Bootstrap классифицирует его как large-устройство.
Итак, первый блок занимает 25% ширины контейнера (если 12 колонок считается за 100% ширины, то 3, соответственно, за 25%). Ну а второй примерно 8-8,5%, точные расчеты нам ни к чему. Остальные 66% ширины контейнера будут пусты. Конечно, на скриншоте вы этого не видите, так как я просто не могу запихнуть в статью скриншот всего моего экрана, так как он слишком велик, поэтому я и советовал вам повторять все за мной.
А теперь давайте проверим, как поведут себя блоки на ширине менее 992 пикселя. Начните сужать окно. В Google Chrome после нажатия F12 при сужении вы будете видеть в правом верхнем углу точную ширину окна.
Ну а я, пожалуй, воспользуюсь браузером Internet Explorer. Вот так блоки выглядят на ширине чуть-чуть больше 768 пикселей, то есть на small-экранах.
Как видите, вместо 25% и 8% каждый блок занимает теперь ровно по 50% ширины ряда. А все благодаря этим инструкциям:
col-md-3 col-sm-6
col-md-1 col-sm-6
col-md-3 col-sm-6 col-md-1 col-sm-6 |
То есть с помощью этих классов мы как бы говорим бутстрапу: на средних и больших устройствах дай первому блоку ширину в 3 колонки из 12, а второму – 1 из 12. А вот на маленьких, будь добр, оба блока показать на 50% ширины ряда.
А что же произойдет на самых маленьких экранах? Вот я совсем сузил окно, как будто мы смотрим сайт с телефона:
Фреймворк Bootstrap 5. Быстрый старт
Изучите основы Bootstrap 5 на практическом примере по верстке интернет-магазина с нуля
Узнать подробнее
Как видите, инструкция, которая действовала для small-устройств, отменилась для extra-small и каждый блок стал занимать по 100% ширины в ряде. Запомните, что это поведение блоков по умолчанию – занимать 100% ширины в своем контейнере.
Из этого всего следует несколько выводов, можете перечитать их несколько раз, потому что понять эти вещи крайне важно:
Если мы задаем, например, col-sm-6, то такая ширина сохраниться у блока и на md и lg, если для этих устройств ничего не прописано.
Возьмем этот же пример (col-sm-6). А вот на xs, то есть на экстра-маленьких устройствах, ширина блока будет 100%, а не 50%. То есть наследование прописанной ширины происходит только для больших устройств, но ни в коем случаев не для меньших. Например, если вы напишите такой класс: col-lg-6, то такая ширина у блока будет только на экранах более 1200 пикселей. На md, sm, xs устройствах будет другая ширина.
Вы можете указывать блоку не один, а несколько классов. Например, col-xs-6 col-md-4. Попробуйте сами в уме ответить, какой будет ширина блока на разных устройствах? Не читайте дальше)
А ответ таков:
На xs-экранах будет 50%, то есть половина ширины контейнера
На sm то же самое – 50%. Почему? Как я уже сказал выше, значение наследуется для устройств с большей шириной.
На md блок займет треть ширины.
На самых больших экранах тоже треть. Опять же, значение наследуется из md.
Но Bootstrap ничем вас не ограничивает и вы можете прописать даже так:
<div class = «col-xs-10 col-sm-8 col-md-6 col-lg-4»></div>
<div class = «col-xs-10 col-sm-8 col-md-6 col-lg-4»></div> |
То есть вообще для каждого типа устройств задать свое отображение. Тут вы уже сами можете понять, насколько широким будет блок на разной ширине экранов.
ВНИМАНИЕ! Никогда не допускайте ситуации, чтобы у вас в одном ряду было более 12-ти колонок, иначе ваш сайт может развалиться.
Дальше – интереснее! Вложенные сетки
Но мощь сетки Bootstrap не только в том, что вы можете задать разное отображение блоков на разной ширине. А еще в том, что можно вкладывать сетку в какой-угодно блок. Давайте рассмотрим такой пример кода:
<div class = «container»>
<div class = «row»>
<div class = «col-sm-8 col-md-6»>
<div class = «row»>
<div class = «col-sm-4 col-md-3»>1</div>
<div class = «col-sm-4 col-md-3»>2</div>
<div class = «col-sm-4 col-md-3»>3</div>
</div>
</div>
</div>
</div>
<div class = «container»> <div class = «row»> <div class = «col-sm-8 col-md-6»> <div class = «row»> <div class = «col-sm-4 col-md-3»>1</div> <div class = «col-sm-4 col-md-3»>2</div> <div class = «col-sm-4 col-md-3»>3</div> </div> </div> </div> </div> |
Итак, у нас есть общий контейнер, а в нем один ряд. В ряд вложен блок, который занимает половину ширины контейнера на средних и больших экранах, две трети на маленьких и 100% на самых маленьких.
Но ведь мы можем спокойно представить себе, что этот блок является тоже контейнером, почему нет? По сути, так и есть при разработке сайта. Есть общий контейнер для всего сайта, контейнер для контента, сайдбара, шапки и т.д.
Можно представить, что этот блок – контейнер для основного блока с текстом на сайте, в него мы помещаем, в свою очередь, ряд (обязательно придерживайтесь в коде структуры – контейнер – ряд — ячейки).
В этом ряду, как видите, 3 блока и для каждого задано поведение на разных устройствах. По сути, мы получили сетку внутри основной сетки! И эта вложенная сетка тоже будет иметь 12 колонок.
Я вам скажу даже больше. Вложенных сеток может быть неограниченное количество. Например, эти три блока – это три карточки товара в интернет-магазине. Структура самой карточки может быть тоже достаточно сложной. Кто знает, может и там вы используете вложенную сетку.
Таким образом, фреймворк Bootstrap попросту стирает перед вами любые препятствия при верстке веб-страниц: вы можете создать как простые типовые шаблоны, так и сложнейшие страницы с тысячей элементов на них. Ведь сетка – это не просто общий контейнер сайта, систему сетки можно применить даже при разметке очень незначительных блоков.
Адаптивные утилиты
Еще одна потрясающая возможность фреймворка – адаптивные утилиты. Сейчас объясню. Наверняка вы не планируете на мобильных устройствах отображать 100% элементов сайта, которые видны на больших десктопах – вам попросту некуда будеть все это впихнуть. Очень часто на мобильных устройствах полностью убирают боковую колонку, сворачивают меню, удаляют какие-то большие декоративные элементы и т.д.
В Bootstrap все это очень легко делать с помощью классов, которые называют адаптивными утилитами. В документации ознакомиться с ними можно тут: //www.oneskyapp.com/ru/docs/bootstrap/css#responsive-utilities
Вот список этих классов. Чтобы скрыть элемент на нужном устройстве, достаточно всего лишь использовать один из четырех классов: hidden-xs|sm|md|lg. Хочу отметить, что элемент будет скрыт только на указанной ширине экрана, на всех остальных он останется видимым.
Если вам нужно сделать элемент видимым только на одном из четырех типов устройств, удобнее использовать классы visible-xs|sm|md|lg- block|inline|inline-block.
Кроме самого ключевого слова и типа устройств тут еще нужно указать, как именно отображать элемент: как блочный, строчный или блочно-строчный. Примеры:
visible-xs-inline – элемент будет виден только на самых маленьких экранах и будет отображаться как строка;
visible-lg-block – будет виден только на самых больших экранах и будет блочным;
Адаптивные утилиты позволяют как угодно трансформировать сайт на всех типах устройств. Используйте их по мере необходимости в своей верстке.
Другие возможности сетки и итог
Друзья, очень много еще можно написать о сетке бутстрапа, потому что мы рассмотрели примерно только половину теории. С остальными классами и примерами вы можете ознакомиться в документации.
Почему я настоятельно вам его рекомендую? Потому что теория, это теория. Вы можете прочитать эту статью вместе с документацией хоть по 10 раз, но если не закрепите все примеры на практике, это будет практически бесполезно. Мы обожаем практику и считаем, что именно она – залог успеха. Даже если из теории что-то вы не поймете, то потом, во время верстки реального макета вы увидите своими глазами, как работает сетка, и уже никто из вас это понимание не выбьет.
Мало того, в курсе не просто объясняется теория и верстается простой макет. Наша с вами цель – стать профессиональными разработчиками, а для этого нужно верстать уже макеты повышенного уровня сложности, чем мы с вами и займемся во второй части курса, сверстав интернет-магазин и лендинг.
В общем, осваивать Bootstrap на профессиональном уровне или нет – это решать вам. Моя цель была в том, чтобы объяснить вам основы функциониования сетки в Бутстрапе. Надеюсь, у меня это получилось и вы прочитали эту публикацию с пользой для себя. В ближайшее время ждем вас в кругу профессиональных веб-разработчиков, использующих Bootstrap для верстки макетов любого, абсолютно любого уровня сложности!
Фреймворк Bootstrap 5. Быстрый старт
Изучите основы Bootstrap 5 на практическом примере по верстке интернет-магазина с нуля
Узнать подробнее
Фреймворк Bootstrap 5. Быстрый старт
Изучите основы Bootstrap 5 на практическом примере по верстке интернет-магазина с нуля!
Смотреть
Колонки · Bootstrap v5.0
Как они работают
Колонки основаны на архитектуре 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-md-4
.col-md-4 .offset-md-4
.col-md-3 .offset-md-3
.col-md-3 .offset-md-3
<div>
<div>
<div>.col-md-4</div>
<div>.col-md-4 .offset-md-4</div>
</div>
<div>
<div>.col-md-3 .offset-md-3</div>
<div>.col-md-3 .offset-md-3</div>
</div>
<div>
<div>.col-md-6 .offset-md-3</div>
</div>
</div>
В дополнение к очистке колонки в адаптивных контрольных точках Вам может потребоваться сбросить смещения. См. это в действии в пример сетки.
.col-sm-5 .col-md-6
.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0
<div>
<div>
<div>.col-sm-5 .col-md-6</div>
<div>.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>
<div>
<div>.col-sm-6 .col-md-5 .col-lg-6</div>
<div>.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>
</div>
Утилиты полей
С переходом на flexbox в v4 Вы можете использовать утилиты полей, такие как .me-auto
, чтобы отодвинуть одноуровневые столбцы друг от друга.
.col-md-4
.col-md-4 .ms-auto
.col-md-3 .ms-md-auto
.col-md-3 .ms-md-auto
.col-auto .me-auto
.col-auto
<div>
<div>
<div>.col-md-4</div>
<div>.col-md-4 .ms-auto</div>
</div>
<div>
<div>.col-md-3 .ms-md-auto</div>
<div>.col-md-3 .ms-md-auto</div>
</div>
<div>
<div>.col-auto .me-auto</div>
<div>.col-auto</div>
</div>
</div>
Автономные классы колонок
Классы .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 сетка за 15 минут
Bootstrap является сейчас самым используемым фреймворком. Когда он только появился, он стал отличным выбором как для разработчиков сайтов так и для любителей, благодаря своей простоте.
Любой человек который знает, хотя бы в общих чертах, HTML и CSS может начать использовать данный фреймворк уже сейчас.
В данной статье рассмотрим такое базовое понятие как, bootstrap сетка — она является фундаментом данного фреймворка.
1. Rows и Columns
Часть заголовка я специально оставил на английском языке, чтобы возникало меньше путаницы (rows — ряды, columns — колонки)
Сетка состоит и строк и колонок, что позволяет на позиционировать элементы на странице как угодно.
Rows (ряды) — это один уровень блоков. Это означает, что когда мы создаем новый ряд (row) он занимает всю ширину элемента внутри которого он находится.
Горизонтальное выравнивание осуществляется с помощью колонок (Columns). Дочерними элементами ряда может являться только колонка. Размещение контента в row без колонки — может привести к нарушению макета
<!-- Не правильно-->
<div>
Ваш контент
</div>
<!-- Правильно-->
<div>
<div>Правильно размещенный контент</div>
</div>
Замечание: Колонки и ряды имеют особые отношения. Каждая колонока имеют отступ — padding — в 15px слева и справа, таким образом контент внутри имеет равные отступы по краям. Такие правила «отодвигают» колонки от ряда на 15px , а это может нарушить макет, чтобы этого не происходило для row заданы отрицательные отступы что позволяет размещать крайние элементы без отступов от родителя, и именно поэтому колонку всегда следует оборачивать в row.
2. Row разделены 12
Ряд поделен на 12 равных частей. Когда мы собираемся разместить внутри ряда колонку — нам необходимо указать ее ширину — ширину которую займет колонка. Это делается путем добавления в блоку div класса col-md-номер , где номер может быть целым числом от 1 до 12. В зависимости от данного числа, столбец будет занимать определенный процент от полной щирины строки. Например: 6 это 50% от ширину ряда так как 6/12 = 0,5, 3 — 25% (3/12) и т.д.
<div>
<div>Вся ширина ряда</div>
</div>
<div>
<div>25%</div>
<div>25%</div>
<div>50%</div>
</div>
3. Обертывание колонок
Всегда нужно иметь ввиду тот факт, что в ряду есть только 12 свободных колонок. Если разместить в ряде элементы, которые суммарно превышают 12, то последние неуместившиеся колонки будут перенесены на следующую строку.
В примере первые 2 колонки имеют ширину 8 и 4 соотвественно, что в сумме дает 12. Таким образом первая строка становится заполненной и следующий за ними элемент будет перенесен на следующую строку.
<div>
<div></div>
<div></div>
<div>Эта колонка шириной 9 будет перенесена на следующую строчку</div>
</div>
4. Классы для размеров экрана
Помните мы писали .col-md-номер во втором шаге? Этот -md- означает средние размеры экрана (от слова medium — средние). В bootstrap заложены стандартные классы для использования на разных размерах экрана:
xs — (Extra small) — Экстра маленькие экраны, такие как у смартфонов, Используйте их так: .col-xs-номер
sm — (Small Screens) — Маленькие экраны, такие как у планшетов. Использование: .col-sm-номер
md — (Medium) — Средние размеры экранов, это экраны с низким количеством точек на дюйм и ноутбуки. Использование такое же как и в предыдущих примерах: .col-md-номер
lg — (Large) — Большие экраны с высоким разрешением. .col-lg-номер
Bootstrap высчитывает разрешение экрана и dpi (количество точек на дюйм или плотность пикселей) и в соответствии с этим вычислением указывает какой класс активен в данный момент. Это полноценный способ контролировать как положение, так и отображение контента в целом для любых устройств.
<div>
<div><p>Данный блок на среднем экране займет половину, на очень маленьком - всю ширину</p></div>
<div><p>Данный блок на среднем экране займет половину, на очень маленьком - всю ширину</p></div>
</div>
5. Clearfix
В некоторых случаях бывает так что две колонки планируются разной высоты, и заставить отображаться следующий элемент, который должен быть под ними бывает проблематично. Что бы это предотвратить существует класс clearfix. Он помещает все следующие колонки на новую строку.
<div>
<div>Эта колонка выше чем все остальныне</div>
<div></div>
<div></div>
<div></div>
</div>
6. Offsets (Смещения) — ваши друзья
Изначально все колонки выравнены по левому краю и следуют строго друг за другом. Если количество колонок будет меньше 12, то справа останется свободное место.
Чтобы создать отступы слева и/или справа. Применение к любому блоку с колонкой класса .col-md-offset-2 сместит данный блок вправо на размер двух пустых колонок . Это же правило действует и ля других размеров экрана т.е. col-xs-2, col-sm-2 и прочие .
7. Классы Push и Pull
Классы .push и .pull позволяют нам переназначить привязку блоков в зависимости от экрана устройства. Класс .push двигает колонку к правому краю, а класс .pull — к левому. Отличие данного класса от offset в том что они имеют position:relative, таким образовам не сдвигая остальные блоки.
Классы push и pull имеют следущий синткасис: .col-размер-push(pull)-число. Размеры такие же как и в 4 пункте — xs, sm, md, lg. Номер это количество колонок, которые мы хотим подвинуть.
<div>
<div>На ноутбуках этот текст будет отображаться справа от картинки, на XS экранах картинка будет справа а текст слева</div>
<div><img src="city.jpg"></div>
</div>
Заключение
Вот и все основы, которые необходимо знать, чтобы начать использовать bootstrap сетку в своих проектах. На основе этих семи пунктов вы с легкостью можете сделать разметку для любого мобильного устройства без использования media запросов.
Но помимо данных правил существует еще ряд других, более расширенных,которые также часто используются.. Для их изучение посмотрите на русскоязычный портал о bootstrap http://bootstrap-3.ru/
Nothing found for Assets Img Bootstrap Mdo Sfmoma 01 Jpg
SHAPER EXTREME — адаптивный коммерческий шаблон для Joomla
Shaper Extreme November 12 template is a stylish and feature-rich Joomla 2.5 responsive template with Twitter Bootstrap integration. It is a multi-purpose template that’s simply perfect for business, portfolio and business websites! Extreme has six color styles
Demo: http://demo.joomshaper.com/?template=extreme
Подробнее…
NICANIAN 2 — Bootstrap шаблон для Joomla 3.0
As a continuation of the first released Nicanian with Joomla 2.5. Nicanian II is continued to be improved based on the the idea of a photography studio. For the first time, it is introduced as a responsive Joomla template with TZ Portfolio v3 and T3 Framework v3, integrating well with Joomla 3 and Bootstrap
Demo: http://demo.templaza.com/joomla-template/2013/nicanian-ii
Подробнее…
COMMANDER — Адаптивный Bootstrap универсальный шаблон WordPress
Powerful WP Theme designed in a clean and minimalistic style. This theme is very flexible, easy for customizing and well documented, approaches for personal and professional use. COMMANDER has been coded in HTML5 & CSS3 and jQuery. It has a solid flexible responsive layout that scales from 320px to 1260px width all Bootstrap features.
Demo: http://themeforest.net/item/commander-responsive-multipurpose-theme/3034314
Подробнее…
ALGARIDA V3.0 -Адаптивный Bootstrap шаблон WordPress для СМИ/журнала
Algarida news is A wordpress responsive theme for news websites and magazine, Algarida built with HTML CSS3, and Twitter Bootstrap with maximum features to build your wordpress news or magazine website.
Demo: http://themeforest.net/item/algarida-responsive-wordpress-news-and-magazine/3973248
Подробнее…
TRUSTME — Адаптивный Bootstrap шаблон WordPress для журнала (блога)
TrustMe is a Responsive WordPress Theme, best suited for Magazines, News and Blog websites. It comes with 23 awesome widgets and 18 widget areas and 4 post formats (image, audio, video & gallery) and tons of theme options. TrustMe is developed on the Bootstrap — beautifull boilerplate for responsive development so it look beautiful at any size, be it a 17” laptop screen or an iPad, iPhone.
Demo: http://themeforest.net/item/trustme-responsive-wordpress-magazine-blog/3796526
Подробнее…
MORPHOLOGY — Адаптивный Bootstrap шаблон для Joomla
Morphology is a responsive Joomla! template that incorporates and takes advantage of Twitter’s very own Bootstrap framework. So for anyone who enjoys their iPad, Android, or even the newer iPhone5, Morphology will adapt to your viewing needs and will still look great as you surf online! As for features, Morphology brings you a huge array of built-in features…including the ability to create UNLIMITED colours! Let’s showcase some more key features of Morphology…
Demo: http://themeforest.net/item/morphology-responsive-joomla-business-template/3214036
Подробнее…
DRIVE — Адаптивный Bootstrap шаблон для Drupal
Drive is a Modern HTML5 Drupal THeme created using Twitter Bootstrap. It is fully Responsive which means it can scale from 320px to 1200px. Drive comes with unlimited colors and 20+ predefined color variations. And it contains manny unique pages and having lots of features as follows.
Demo: http://themeforest.net/item/drive-responsive-drupal-theme/3688654
Подробнее…
VALERA — Адаптивный шаблон Bootstrap для WordPress
Мощный шаблон Bootstrap для WOrdPress, разработанный в чистом и минималистичном стиле. Эта тема очень гибкая, легкая в настройке и хорошо документирована, подходит как для личного блога, так и для корпоративного сайта. Valera использует HTML5 & CSS3 и JQuery. Шаблон имеет гибкую адаптивную сетку, которая изменяется в масштабах от 320px до 1260px по ширине сайте, включая все функции Bootstrap.
Демо: http://themeforest.net/item/valera-responsive-wordpress-theme/full_screen_preview/2344228
Подробнее…
Сетка — Bootstrap: Основы верстки
Сетка — главный компонент фреймворка Bootstrap. Разные проекты подключают Bootstrap только для возможности использовать сетку. Действительно, система сеток уже давно отработана на сотнях проектов и отлажена.
Понимание работы сетки в Bootstrap — важнейший навык при работе. Поняв хитрости построения шаблонов, вы сможете делать сложные макеты и не прибегать к ненужным дописываниям стилей.
Из курса по Grid вы знаете, что сетка — система линий, по которым выстраивается контент внутри шаблона. Эти линии являются невидимыми. Взгляните на шаблон блога Хекслета. На изображении указана сетка проекта. Тёмными линиями обозначены колонки, а оранжевыми отступы между колонками. Изучите этот пример и найдите закономерности того, как выстроен контент внутри блога.
Сетки в Bootstrap отвечают за раскладку блоков и за адаптивность. Сетка определяет, как на разных разрешениях будут отображаться контентные блоки.
Сетку можно разбить на три составные части:
- Контейнер;
- Строки;
- Колонки.
В качестве примера используем код с использованием сетки Bootstrap:
<div>
<div>
<div>
<p>Хекслет — практические курсы по программированию. Мы помогаем новичкам стать профессиональными программистами, а опытным разработчикам получать новые знания и расти профессионально.</p>
<p>Мы считаем, что настоящий программист должен понимать, как работает компьютер, и обладать вычислительным мышлением. Он должен видеть проблему, а не задание. Должен уметь анализировать и рассуждать на уровне проблемы и выше, а не только на уровне кода.</p>
<p>При сегодняшнем обилии учебных материалов, курсов и книг, главный вопрос, который встает перед новичком, это не «где учиться?», а «что и в каком порядке учить?». Существует множество мнений по этому поводу. Кто-то советует начинать с математики, кто-то советует конкретные языки и технологии.</p>
</div>
</div>
</div>
В этой разметке демонстрируется подход контейнер → строка → колонка. Добавив текст в колонку с классом .col, получится следующий макет:
Визуально кажется, что ничего особого не произошло, а текст вывелся так, как если бы не добавлялись контейнеры, строки, столбцы. Но это не так! Уже запущен механизм адаптивной сетки и выстраивание колонок. Добавим ещё одну колонку с тем же текстом:
<div>
<div>
<div>
<p>Хекслет — практические курсы по программированию. Мы помогаем новичкам стать профессиональными программистами, а опытным разработчикам получать новые знания и расти профессионально.</p>
</div>
<div>
<p>Мы считаем, что настоящий программист должен понимать, как работает компьютер, и обладать вычислительным мышлением. Он должен видеть проблему, а не задание. Должен уметь анализировать и рассуждать на уровне проблемы и выше, а не только на уровне кода.</p>
</div>
</div>
</div>
Получились две колонки одинаковой ширины. Настало время повнимательнее изучить те классы, которые описаны в HTML.
container
Контейнер является ключевым элементом сетки Bootstrap. Главная задача контейнера — ограничение ширины контента. По умолчанию, контент в Bootstrap имеет максимальную ширину в 1140 пикселей. Это условие обуславливается доступностью: в этих рамках текст органично располагается по ширине и вмещает примерно 120 символов. Большее количество символов труднее читать, так как глазу сложнее перемещаться между строчками.
Это ограничение можно обойти. Для этого в Bootstrap используется класс .container-fluid, который не ограничивает ширину контента внутри себя. Двухколоночный макет из примера выше при использовании .container-fluid будет выглядеть следующим образом:
Внутри себя контейнер хранит элементы любых видов. Это не обязательно должны быть строки. Если для элементов сетка не нужна, то не стоит создавать строку с одним единственным элементом внутри.
Важно: не вкладывайте контейнер внутри контейнера. Это плохая практика. При необходимости в нескольких контейнерах, вместо вкладывания друг в друга разделите их. Если в процессе разметки заметили, что нужен контейнер в контейнере, то успокойтесь, попейте кофе и пересмотрите подход.
row
Как и в таблицах, строки — неотъемлемый атрибут столбцов. В Bootstrap строка берёт на себя роль flex-контейнера, внутри которой будут располагаться flex-элементы столбцы. Если пропустить обёртку, то столбцы перестанут работать.
Класс .row имеет следующие стили:
.row {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
Интересным здесь является использование отрицательных внешних отступов. Данный приём используется по причине того, что колонки внутри Bootstrap имеют внутренние отступы, которые отделяют колонки друг от друга на фиксированное значение в 30 пикселей. Чтобы компенсировать отступы слева и справа и не образовать лишние отступы у первого и последнего элемента в строке используются отрицательные отступы у контейнера, которым является .row.
Внутри .row содержатся только колонки! Это гарантирует правильную вложенность и возможность создавать адаптивность. Сторонние элементы выносятся за пределы .row.
Так как .row flex-контейнер, то к нему возможно применять доступные свойства, описанные в курсе Flex
col и col-*
В примере с двухколоночным макетом использовался класс .col, который равномерно распределяет пространство между колонками с такими классами внутри контейнера .row. В макетах такая операция часто не нужна, а необходимо дать блокам своё количество колонок. Bootstrap — 12-колоночная система. Из этого следует, что помимо класса .col при создании сетки доступны 12 классов вида .col-*, где * — количество колонок, которые займёт элемент.
<div>
<div>
<div>
<p>Хекслет — практические курсы по программированию. Мы помогаем новичкам стать профессиональными программистами, а опытным разработчикам получать новые знания и расти профессионально.</p>
</div>
<div>
<p>Мы считаем, что настоящий программист должен понимать, как работает компьютер, и обладать вычислительным мышлением. Он должен видеть проблему, а не задание. Должен уметь анализировать и рассуждать на уровне проблемы и выше, а не только на уровне кода.</p>
<p>При сегодняшнем обилии учебных материалов, курсов и книг, главный вопрос, который встает перед новичком, это не «где учиться?», а «что и в каком порядке учить?». Существует множество мнений по этому поводу. Кто-то советует начинать с математики, кто-то советует конкретные языки и технологии.</p>
</div>
</div>
</div>
В этом примере первая часть текста получила 4 колонки из 12, вторая же часть текста получила 8 колонок из 12. Bootstrap автоматически переносит колонки, если суммарно они занимают больше 12 частей. Если в строке меньше колонок, то при добавлении нового элемента можно забыть этот момент.
Можно комбинировать класс .col с классами .col-*. Это позволит ограничивать только необходимую часть, автоматически просчитывая место для колонки с классом .col. Например, создавая двухколоночный макет, указывается col-* для сайдбара и .col для контентной части.
<div>
<div>
<aside>
<!-- Боковая панель -->
</aside>
<main>
<!-- Основной контент -->
</main>
</div>
</div>
Внутри колонок, как вы можете догадаться, может лежать абсолютно любой контент. В роли колонки так же может выступать любой элемент.
Важно: Такая структура, как контейнер → строка → колонка обязательна. Держите это в голове каждый раз, как создаёте сетку с помощью Bootstrap. Распространённая ошибка — исключение контейнера из этой цепочки. Хоть строка .row и не зависит напрямую от стилей контейнера, но не указав контейнер пропадёт одна из компенсаций внутренних отступов, так же вы потеряете равномерное выравнивание контента на различных размерах viewport.
Дополнительное задание
В созданном в прошлом уроке проекте создайте структуру вида:
- Шапка проекта
- Меню с подкатегориями товаров.
- Основной контент. В нём будут содержаться карточки товаров.
Варианты построения сетки Bootstrap 4
Совсем необязательно использовать только один класс для построения сетки Bootstrap 4. Их можно сочетать в различных вариантах, для того чтобы на одном разрешении экрана (бОльшем, как правило) было, например, 4 колонки, а на меньшем разрешении оставалось 2 колонки.
Комбинация классов
Рассмотрим приведенный выше пример. Для экранов с разрешением от 768px будет действовать класс col-md-3, формирующий 4 колонки. Когда экран станет менее 768px, внешний вид перестроится, сформировав 2 колонки в 2 ряда. И для экранов с разрешением менее 576px колонки разместятся по вертикали друг под другом.
<div>
<div>
<h4>.col-md-3+.col-sm-6</h4>
</div>
<div>
<h4>.col-md-3+.col-sm-6</h4>
</div>
<div>
<h4>.col-md-3+.col-sm-6</h4>
</div>
<div>
<h4>.col-md-3+.col-sm-6</h4>
</div>
</div><!— /.row —>
<div> <div> <h4>.col-md-3+.col-sm-6</h4> </div> <div> <h4>.col-md-3+.col-sm-6</h4> </div> <div> <h4>.col-md-3+.col-sm-6</h4> </div> <div> <h4>.col-md-3+.col-sm-6</h4> </div> </div><!— /.row —> |
See the Pen Bootstrap 4 Different Cols by Elen (@ambassador) on CodePen.dark
Второй блок колонок в примере выше имеет несколько разные соотношения на экранах с разрешением от 768px
(9 и 3 из 12 колонок), а на экранах от 576px до 768px
колонки распределяются как 8+4. Как видно из скриншота Инспектора свойств, ширина большей колонки меняется с 75% до 66.67%.
<div>
<div>
<h4>.col-md-9+.col-sm-8</h4>
</div>
<div>
<h4>.col-md-3 + .col-sm-4</h4>
</div><!— /.row —>
<div> <div> <h4>.col-md-9+.col-sm-8</h4> </div> <div> <h4>.col-md-3 + .col-sm-4</h4> </div><!— /.row —> |
Третий блок колонок в примере вообще не имеет цифры после класса col-sm
, формируя 3 одинаковые колонки на экранах с разрешением от 576px. Для меньших экранов внешний вид перестраивается в 2 колонки сверху (класс col-6
) и одну колонку внизу (col-12
).
<div>
<div>
<h4>.col-sm + .col-6</h4>
</div>
<div>
<h4>.col-sm+.col-6</h4>
</div>
<div>
<h4>.col-sm+.col-12</h4>
</div>
</div><!— /.row —>
<div> <div> <h4>.col-sm + .col-6</h4> </div> <div> <h4>.col-sm+.col-6</h4> </div> <div> <h4>.col-sm+.col-12</h4> </div> </div><!— /.row —> |
Предупреждение
Не указывайте несколько классов с одной цифрой для одного и того же элемента, т.к. это не имеет смысла: все классы имеют одну и ту же ширину в своих свойствах, но для разных разрешений экранов:
Поэтому выберите то разрешение экрана, на котором колонки должны перестроится в вертикальный ряд и оставьте только его взамен перечисления нескольких, например:
See the Pen Используем один класс вместо нескольких by Elen (@ambassador) on CodePen.dark
Основой этого примера является следующий код:
<div>
<div>
.col-lg-6 .col-md-6 .col-sm-6
</div>
<div>
.col-lg-6 .col-md-6 .col-sm-6
</div>
</div><!— /.row —>
<div>
<div>
.col-md-4 + .col-sm-12
</div>
<div>
.col-md-4 + .col-12
</div>
<div>
.col-md-4
</div>
</div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <div> <div> .col-lg-6 .col-md-6 .col-sm-6 </div> <div> .col-lg-6 .col-md-6 .col-sm-6 </div> </div><!— /.row —> <div> <div> .col-md-4 + .col-sm-12 </div> <div> .col-md-4 + .col-12 </div> <div> .col-md-4 </div> </div> |
При изменение ширины экрана визуально разницы между использованием одного класса и нескольких НЕТ. И добавлять класс .col-*-12
не имеет смысла, т.к. если посмотреть на свойства этих классов, то один из вариантов назначения ширины (width, max-width или flex
) имеет значение 100%
.
Установка ширины одной колонки
Еще одна фишка Bootstrap 4 — это возможность создать колонки, в которых явно (с помощью соответствующего класса) указывается только ширина одной из колонок, а другие колонки имеют ширину, которая рассчитывается браузером автоматически.
<div>
<h3>Установка ширины одной колонки</h3>
<div>
<div>
1 из 3
</div>
<div>
2 из 3 (широкая) .col-8
</div>
<div>
3 из 3
</div>
</div><!— /.row —>
<div>
<div>
1 из 3
</div>
<div>
2 из 3 (широкая) .col-6
</div>
<div>
3 из 3
</div>
</div><!— /.row —>
<div>
<div>
1 из 3
</div>
<div>
2 из 3 (широкая) .col-5
</div>
<div>
3 из 3
</div>
</div><!— /.row —>
</div><!— /.container —>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <div> <h3>Установка ширины одной колонки</h3> <div> <div> 1 из 3 </div> <div> 2 из 3 (широкая) .col-8 </div> <div> 3 из 3 </div> </div><!— /.row —> <div> <div> 1 из 3 </div> <div> 2 из 3 (широкая) .col-6 </div> <div> 3 из 3 </div> </div><!— /.row —> <div> <div> 1 из 3 </div> <div> 2 из 3 (широкая) .col-5 </div> <div> 3 из 3 </div> </div><!— /.row —> </div><!— /.container —> |
В примере явно прослеживается, что средняя колонка становится меньше при уменьшении цифры после префикса col-
в используемом класса.
See the Pen Bootstrap 4 .col-auto-* class by Elen (@ambassador) on CodePen.dark
Если мы поменяем класс .col на один из классов с префиксами (-lg-, -md-, -sm-
), то колонки будут перестраиваться в зависимости от разрешений экранов в одну колонку. Но на больших разрешениях визуально примеры выглядят одинаково.
See the Pen Bootstrap 4 wide column by Elen (@ambassador) on CodePen.dark
Использование колонок адаптивной ширины
В Bootstrap 4 появился классcol-{breakpoint}-auto
, который имеет следующие css-правила:
.col-md-auto {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto;
max-width: none;
}
.col-md-auto { -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: none; } |
Т.е. его можно использовать для создания колонок, изменяющих свою ширину по ширине содержимого. Но при этом необходимо следить за количеством контента, который будет находится в такой колонке, т.к. свойство max-width: none
подразумевает, что ограничения по ширине нет. Поэтому большое количество текста изменит внешний вид колонок не в лучшую сторону. А вот для небольшого количества контента этот класс отлично подходит.
See the Pen Bootstrap 4 .col-*-auto class by Elen (@ambassador) on CodePen.dark
Перенос колонок с помощью класса w-100
Для того чтобы колонки размещались по горизонтали, необходимо помещать классы .col-
в <div>
. Фактически класс row формирует строку или ряд с колонками. И для создания нового ряда нужно опять-таки создавать для классов .col-*
обертку из класса .row
. Если же вы не хотите это делать, можно использовать класс w-100
для переноса следующего блока колонок на новую строку (ряд).
Класс w-100
имеет одно единственное свойство width: 100% !important;
, которое работает «на разрыв» ряда колонок.
<div>
<h3>Разрыв колонок с помощью класса w-100</h3>
<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> <h3>Разрыв колонок с помощью класса w-100</h3> <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> |
Вот как это выглядит на примере:
See the Pen Разрыв колонок Bootstrap 4 by Elen (@ambassador) on CodePen.dark
Просмотров:
809
Bootstrap Бутстрап 4 Grid Examples
Ниже мы собрали несколько примеров схем Bootstrap 4 Grid.
Три равные колонки
Используйте .col
класс на заданном количестве элементов, и Bootstrap распознает количество элементов (и создает столбцы с одинаковой шириной). В приведенном ниже примере мы используем три элемента Col, который получает ширину 33,33% каждый.
Пример
<div>
<div>col</div>
<div>col</div>
<div
class=»col»>col</div>
</div>
Три равных столбца с использованием чисел
Можно также использовать числа для управления шириной столбцов. Просто убедитесь, что сумма добавляет до 12 или меньше (это не обязательно, что вы используете все 12 доступных столбцов):
Пример
<div>
<div>col-4</div>
<div>col-4</div>
<div
class=»col-4″>col-4</div>
</div>
Три неравные колонки
Для создания неравных столбцов необходимо использовать числа. В следующем примере будет создано 25% 50% от 25% Сплита:
Пример
<div>
<div>col-3</div>
<div>col-6</div>
<div
class=»col-3″>col-3</div>
</div>
Установка ширины одной колонки
Тем не менее, достаточно установить ширину одного столбца и автоматически изменять размер столбцов. В следующем примере будет создано 25% 50% от 25% Сплита:
Пример
<div>
<div>col-3</div>
<div>col-6</div>
<div
class=»col»>col-3</div>
</div>
Более равные столбцы
1 of 4
2 of 4
3 of 4
4 of 4
1 of 6
2 of 6
3 of 6
4 of 6
5 of 6
6 of 6
Пример
1 of 2
2 of 2
<!— Four equal columns —>
<div>
<div>1 of 4</div>
<div>2 of 4</div>
<div>3
of 4</div>
<div>4 of 4</div>
</div>
<!— Six equal columns —>
<div>
<div>1 of 6</div>
<div>2 of 6</div>
<div>3
of 6</div>
<div>4 of 6</div>
<div>5
of 6</div>
<div>6 of 6</div>
</div>
Больше неравных столбцов
1 of 4
2 of 4
3 of 4
4 of 4
1 of 4
2 of 4
3 of 4
4 of 4
Пример
1 of 2
2 of 2
<!— Four Unequal Columns —>
<div>
<div>1 of 4</div>
<div>2 of 4</div>
<div>3
of 4</div>
<div>4 of 4</div>
</div>
<!— Setting two column widths —>
<div>
<div>1 of 4</div>
<div>2 of 4</div>
<div>3
of 4</div>
<div>4 of 4</div>
</div>
Одинаковая высота
Если один из столбцов выше, чем другой (из-за текста или CSS высота), остальное будет следовать:
Lorem ipsum dolor sit amet, cibo sensibus interesset no sit. Et dolor possim volutpat qui. No malis tollit iriure eam, et vel tale zril blandit, rebum vidisse nostrum qui eu. No nostrud dolorem legendos mea, ea eum mucius oporteat platonem.Eam an case scribentur, ei clita causae cum, alia debet eu vel.
col
col
Пример
<div>
<div>Lorem ipsum…</div>
<div>col</div>
<div>col</div>
</div>
Вложенные столбцы
В следующем примере показано, как создать компоновку двух столбцов с двумя столбцами внутри одного из столбцов:
Пример
<div>
<div>
.col-8
<div>
<div>.col-6</div>
<div>.col-6</div>
</div>
</div>
<div>.col-4</div>
</div>
Адаптивные классы
Система Grid Bootstrap 4 имеет пять классов:
.col-
(дополнительные малые устройства-ширина экрана менее 576пкс).col-sm-
(малые устройства-ширина экрана равна или больше, чем 576пкс).col-md-
(средние устройства-ширина экрана, равная или превышающая 768px).col-lg-
(большие устройства-ширина экрана равна или больше, чем 992пкс).col-xl-
(XLarge устройства-ширина экрана, равная или превышающая 1200px)
Приведенные выше классы можно комбинировать для создания более динамичных и гибких макетов.
Совет: Каждый класс масштабируется вверх, так что если вы хотите установить одинаковую ширину sm
и md
, вы только должны указать sm
.
Укладываются в горизонтальную
В следующем примере показано, как создать макет столбца, который начинается с стека на дополнительных малых устройствах, прежде чем стать горизонтальным на больших устройствах (SM, MD, LG и XL):
Пример
<div>
<div>col-sm-9</div>
<div>col-sm-3</div>
</div>
<div>
<div
class=»col-sm»>col-sm</div>
<div>col-sm</div>
<div>col-sm</div>
</div>
Смешивать и сочетать
col-6 col-sm-9
col-6 col-sm-3
col-7 col-lg-8
col-5 col-lg-4
col-sm-3 col-md-6 col-lg-4
col-sm-9 col-md-6 col-lg-8
Пример
col-6 col-sm-9
col-6 col-sm-3
<!— 58%/42% split
on extra small, small and medium devices and 66.3%/33.3% split on large and
xlarge devices —>
<div>
<div>col-7
col-lg-8</div>
<div>col-5
col-lg-4</div>
</div>
<!— 25%/75% split on small devices, a 50%/50% split
on medium devices, and a 33%/66% split on large and xlarge devices. On extra
small devices, it will automatically stack (100%) —>
<div
class=»row»>
<div>col-sm-3
col-md-6 col-lg-4</div>
<div>col-sm-9 col-md-6 col-lg-8</div>
</div>
Нет водосточных желобов
Добавьте .no-gutters
класс в .row
контейнер для удаления водосточных желобов (дополнительное пространство):
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Пример
<div>
столбцов · Bootstrap v5.0
Внимание! Обязательно прочтите страницу «Сетка», прежде чем погрузиться в то, как изменять и настраивать столбцы сетки.
Как они работают
Столбцы построены на архитектуре flexbox сетки. Flexbox означает, что у нас есть возможности для изменения отдельных столбцов и модификации групп столбцов на уровне строк. Вы выбираете, как столбцы увеличиваются, сжимаются или изменяются иным образом.
При построении макетов сетки все содержимое размещается в столбцах. Иерархия сетки Bootstrap идет от контейнера к строке, столбцу и содержимому. В редких случаях вы можете комбинировать содержимое и столбец, но имейте в виду, что это может иметь непредвиденные последствия.
Bootstrap включает предопределенные классы для создания быстрых и отзывчивых макетов. Имея шесть точек останова и дюжину столбцов на каждом уровне сетки, у нас есть десятки классов, уже созданных для вас, чтобы создавать желаемые макеты. При желании это можно отключить через Sass.
Выравнивание
Используйте утилиты выравнивания flexbox для вертикального и горизонтального выравнивания столбцов.
Вертикальное выравнивание
Один из трех столбцов
Один из трех столбцов
Один из трех столбцов
Один из трех столбцов
Один из трех столбцов
Один из трех столбцов
Один из трех столбцов
Один из трех столбцов
Один из трех столбцов
Один из трех столбцов
Один из трех столбцов
Один из трех столбцов
Один из трех столбцов
Один из трех столбцов
Один из трех столбцов
Один из трех столбцов
Один из трех столбцов
Один из трех столбцов
Один из трех столбцов
Один из трех столбцов
Один из трех столбцов
Один из трех столбцов
Один из трех столбцов
Один из трех столбцов
Горизонтальное выравнивание
Один из двух столбцов
Один из двух столбцов
Один из двух столбцов
Один из двух столбцов
Один из двух столбцов
Один из двух столбцов
Один из двух столбцов
Один из двух столбцов
Один из двух столбцов
Один из двух столбцов
Один из двух столбцов
Один из двух столбцов
Один из двух столбцов
Один из двух столбцов
Один из двух столбцов
Один из двух столбцов
Один из двух столбцов
Один из двух столбцов
Один из двух столбцов
Один из двух столбцов
Один из двух столбцов
Один из двух столбцов
Один из двух столбцов
Один из двух столбцов
Обмотка колонн
Если в одной строке помещается более 12 столбцов, каждая группа дополнительных столбцов будет как одно целое переноситься на новую строку.
.col-9
.col-4
Поскольку 9 + 4 = 13> 12, этот div шириной 4 столбца переносится на новую строку как один непрерывный блок.
.col-6
Последующие столбцы продолжаются до новой строки.
.col-9
.col-4
Поскольку 9 + 4 = 13 & gt; 12, этот div шириной в 4 столбца переносится на новую строку как один непрерывный блок.
.col-6
Последующие столбцы продолжаются до новой строки.
Обрыв столбца
Разбиение столбцов на новую строку в flexbox требует небольшого взлома: добавьте элемент с шириной : 100%
везде, где вы хотите перенести столбцы на новую строку. Обычно это достигается с помощью нескольких .row
s, но не каждый метод реализации может это учитывать.
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
Вы также можете применить этот перерыв в определенных точках останова с помощью наших утилит адаптивного отображения.
.col-6.col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
Повторный заказ
Классы заказа
Используйте .order-
классы для управления визуальным порядком вашего контента. Эти классы являются адаптивными, поэтому вы можете установить порядок
по точке останова (например, .order-1.order-md-2
). Включает поддержку от 1
до 5
на всех шести уровнях сети.
Сначала в DOM, порядок не применяется
Второй в DOM, с большим порядком
Третий в DOM, с порядком 1
Сначала в DOM, порядок не применяется
Второй в DOM, с большим порядком
Третий в DOM, с порядком 1
Есть еще и отзывчивые .order-first
и .order-last
классы, которые изменяют order
элемента, применяя order: -1
и order: 6
, соответственно. Эти классы также могут быть при необходимости смешаны с пронумерованными классами .order- *
.
Сначала в DOM, заказывается последним
Второй в DOM, неупорядоченный
Третий в DOM, заказывается первым
Сначала в DOM, заказывается последним
Второй в DOM, неупорядоченный
Третий в DOM, заказывается первым
Колонны компенсационные
Вы можете смещать столбцы сетки двумя способами: наш отзывчивый .смещение -
классов сети и наши маржинальные коммунальные услуги. Классы сетки имеют размер, соответствующий столбцам, в то время как поля более полезны для быстрых макетов, где ширина смещения является переменной.
Классы смещения
Переместите столбцы вправо, используя классы .offset-md- *
. Эти классы увеличивают левое поле столбца на *
столбца. Например, .offset-md-4
перемещает .col-md-4
по четырем столбцам.
.col-md-4
.col-md-4 .offset-md-4
.col-md-3 .offset-md-3
.col-md-3 .offset-md-3
.col-md-4
.col-md-4 .offset-md-4
.col-md-3 .offset-md-3
.col-md-3 .offset-md-3
.col-md-6 .offset-md-3
В дополнение к очистке столбца в ответных точках останова вам может потребоваться сбросить смещения.Посмотрите это в действии на примере сетки.
.col-sm-5 .col-md-6
.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0
.col-sm-5 .col-md-6
.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
.col-sm-6.col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0
Маржинальные коммунальные услуги
С переходом на flexbox в v4 вы можете использовать утилиты полей, такие как .me-auto
, чтобы отодвинуть одноуровневые столбцы друг от друга.
.col-md-4
.col-md-4 .ms-auto
.col-md-3 .ms-md-auto
.col-md-3 .ms-md-auto
.col-auto .me-auto
.col-auto
.col-md-4
.col-md-4 .ms-auto
.col-md-3 .ms-md-auto
.col-md-3 .ms-md-auto
.col-auto .me-auto
.col-auto
Классы автономных столбцов
Модель .col- *
классы также могут использоваться вне .row
, чтобы задать элементу определенную ширину. Когда классы столбцов используются как непрямые дочерние элементы строки, отступы опускаются.
.col-3: ширина 25%
.col-sm-9: ширина на 75% выше точки останова sm
.col-3: ширина 25%
.col-sm-9: ширина на 75% выше точки останова sm
Классы могут использоваться вместе с утилитами для создания гибких плавающих изображений.Обязательно заверните содержимое в оболочку .clearfix
, чтобы очистить float, если текст короче.
Заполнитель Адаптивное плавающее изображение
Абзац текста-заполнителя. Мы используем его здесь, чтобы показать использование класса clearfix. Мы добавляем здесь довольно много бессмысленных фраз, чтобы продемонстрировать, как столбцы здесь взаимодействуют с плавающим изображением.
Как видите, абзацы изящно обтекают плавающее изображение. А теперь представьте, как это будет выглядеть с фактическим содержанием здесь, а не просто с этим скучным текстом-заполнителем, который продолжается и продолжается, но на самом деле не передает никакой осязаемой информации.Он просто занимает место, и его не стоит читать.
И все же вы здесь, все еще упорно читаете этот текст-заполнитель, надеясь получить еще какие-то идеи или скрытое пасхальное яйцо с содержанием. Возможно, шутка. К сожалению, здесь ничего этого нет.
Абзац текста-заполнителя. Мы используем его здесь, чтобы показать использование класса clearfix. Мы добавляем здесь довольно много бессмысленных фраз, чтобы продемонстрировать, как столбцы здесь взаимодействуют с плавающим изображением.
Как видите, абзацы изящно обтекают плавающее изображение. А теперь представьте, как это будет выглядеть с фактическим содержанием здесь, а не просто с этим скучным текстом-заполнителем, который продолжается и продолжается, но на самом деле не передает никакой осязаемой информации. Он просто занимает место, и его не стоит читать.
И все же вы здесь, все еще упорно читаете этот текст-заполнитель, надеясь получить еще какие-то идеи или скрытое пасхальное яйцо с содержанием.Возможно, шутка. К сожалению, здесь ничего этого нет.
Bootstrap 4-сеточная система
Bootstrap 4-сеточная система
Сетка
Bootstrap позволяет размещать до 12 столбцов на странице.
Если вы не хотите использовать все 12 столбцов по отдельности, вы можете сгруппировать столбцы вместе для создания более широких столбцов:
пролет 1 | пролет 1 | пролет 1 | пролет 1 | пролет 1 | пролет 1 | пролет 1 | пролет 1 | пролет 1 | пролет 1 | пролет 1 | пролет 1 |
пролет 4 | пролет 4 | пролет 4 | |||||||||
пролет 4 | пролет 8 | ||||||||||
пролет 6 | пролет 6 | ||||||||||
пролет 12 |
Система сеток Bootstrap адаптивна, и столбцы будут переупорядочены
в зависимости от размера экрана: на большом экране может выглядеть лучше с
контент организован в три столбца, но на маленьком экране лучше, если
элементы содержимого были наложены друг на друга.
Классы сетки
Грид-система Bootstrap 4 имеет пять классов:
-
.col-
(сверхмалые устройства — ширина экрана менее 576 пикселей) -
.col-sm-
(маленькие устройства — ширина экрана не менее 576 пикселей) -
.col-md-
(средние устройства — ширина экрана не менее 768 пикселей) -
.col-lg-
(большие устройства — ширина экрана не менее 992 пикселей) -
.col-xl-
(устройства xlarge — ширина экрана не менее 1200 пикселей)
Приведенные выше классы можно комбинировать для создания более динамичных и гибких макетов.
Совет: Каждый класс масштабируется, поэтому, если вы хотите установить одинаковую ширину для
sm
и md
, нужно только указать sm
.
Правила сетевой системы
Некоторые правила сеточной системы Bootstrap 4:
- Строки должны быть помещены в
.контейнер
(фиксированной ширины) или.container-fluid
(полная ширина) для надлежащего выравнивания и заполнения - Используйте строки для создания горизонтальных групп столбцов
- Содержимое должно быть помещено в столбцы, и только столбцы могут быть непосредственными дочерними элементами строк
- Предопределенные классы, такие как
.row
и.col-sm-4
, доступны для быстрого создания макетов сетки. - Столбцы создают промежутки (промежутки между содержимым столбца) посредством заполнения. Это заполнение смещено в строках для первого и последнего столбца через отрицательное поле на
.ряды
- Столбцы сетки создаются путем указания количества из 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:
Попробуй сам »
Первый пример: создать строку (
.col - * - *
классы). Первая звезда (*)представляет отзывчивость: sm, md, lg или xl, а вторая звезда
представляет собой число, которое всегда должно составлять до 12 для каждой строки.
Второй пример: вместо добавления числа к каждому столбцу col
позвольте загрузочному дескриптору
макет, чтобы создать столбцы одинаковой ширины: два элемента "col"
= 50% ширины для
каждый столбец. три столбца = 33,33% ширины каждого столбца.четыре столбца = 25% ширины и т. д.
также можно использовать .col-sm | md | lg | xl
, чтобы сделать столбцы адаптивными.
Параметры сети
В следующей таблице показано, как грид-система Bootstrap 4 работает в
разные размеры экрана:
Очень маленький (<576 пикселей) | Маленький (> = 576 пикселей) | Средний (> = 768 пикселей) | Большой (> = 992px) | Очень большой (> = 1200 пикселей) | |
---|---|---|---|---|---|
Префикс класса | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- |
Поведение сетки | Постоянно горизонтально | Свернут, чтобы начать, горизонтально над контрольными точками | Свернут, чтобы начать, горизонтально над контрольными точками | Свернут, чтобы начать, горизонтально над контрольными точками | Свернут, чтобы начать, горизонтально над контрольными точками |
Ширина контейнера | Нет (авто) | 540 пикселей | 720 пикселей | 960 пикселей | 1140 пикселей |
Подходит для | Портретные телефоны | Горизонтальные телефоны | Таблетки | Ноутбуки | Ноутбуки и настольные компьютеры |
Кол-во столбцов | 12 | 12 | 12 | 12 | 12 |
Ширина желоба | 30 пикселей (по 15 пикселей с каждой стороны столбца) | 30 пикселей (по 15 пикселей с каждой стороны столбца) | 30 пикселей (по 15 пикселей с каждой стороны столбца) | 30 пикселей (по 15 пикселей с каждой стороны столбца) | 30 пикселей (по 15 пикселей с каждой стороны столбца) |
Nestable | Есть | Есть | Есть | Есть | Есть |
Смещения | Есть | Есть | Есть | Есть | Есть |
Заказ колонки | Есть | Есть | Есть | Есть | Есть |
Примеры
В следующих главах показаны примеры систем сеток для различных устройств и разной ширины экрана:
Понимание системы сеток Bootstrap 4
Сетка Bootstrap — это самый быстрый и простой способ создания адаптивного макета веб-страницы.
Что такое Bootstrap Grid System
Сетка
Bootstrap обеспечивает быстрый и удобный способ создания адаптивных макетов веб-сайтов. В последней версии Bootstrap 4 представлена новая система гибких сеток, ориентированная на мобильные устройства, которая соответствующим образом масштабирует до 12 столбцов по мере увеличения размера устройства или области просмотра.
Bootstrap 4 включает предопределенные классы сетки для быстрого создания макетов сетки для различных типов устройств, таких как сотовые телефоны, планшеты, ноутбуки, настольные компьютеры и т. Д.Например, вы можете использовать классы .col- *
для создания столбцов сетки для мобильных телефонов с очень маленькими устройствами в портретном режиме, аналогично вы можете использовать классы .col-sm- *
для создания столбцов сетки для устройств с маленьким экраном. как мобильный телефон в альбомном режиме, классы .col-md- *
для устройств со средним экраном, например планшеты, классы .col-lg- *
для больших устройств, таких как настольные компьютеры, и классы .col-xl- *
классы для очень больших экранов рабочего стола.
В следующей таблице приведены некоторые ключевые особенности новой системы координатной сетки.
Функции Bootstrap 4 Grid System | Очень маленький <576px | Маленький ≥576px | Средний ≥768px | Большой ≥992px | Очень большой ≥1200px |
---|---|---|---|---|---|
Макс.ширина контейнера | Нет (авто) | 540 пикселей | 720 пикселей | 960 пикселей | 1140 пикселей |
Идеально для | Мобильный (вертикальный) | Мобильный (горизонтальный) | Таблетки | Ноутбуки | Ноутбуки и настольные ПК |
Префикс класса | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- |
Количество столбцов | 12 | ||||
Ширина желоба | 30 пикселей (по 15 пикселей с каждой стороны столбца) | ||||
Nestable | Есть | ||||
Заказ колонки | Есть |
Приведенная выше таблица демонстрирует одну важную вещь, применяя любой .col-sm- *
класс элемента будет влиять не только на его стиль на небольших устройствах, но также на средних, больших и очень больших устройствах с шириной экрана больше или равной 540 пикселей, если .col-md- *
, .col-lg- *
или .col-xl- *
класса нет. Точно так же класс .col-md- *
будет влиять не только на стили элементов на средних устройствах, но также на больших и очень больших устройствах, если .col-lg- *
или .col-xl-
класса нет.
Теперь возникает вопрос, как создавать строки и столбцы с помощью этой адаптивной сеточной системы с 12 столбцами. Ответ довольно прост: сначала создайте контейнер, который действует как оболочка для ваших строк и столбцов, используя любые классы контейнеров, такие как .container
, после этого создайте строки внутри контейнера, используя класс .row
, и создайте столбцы внутри любой строки вы можете использовать .col- *
, .col-sm- *
, .col-md- *
, .col-lg- *
и .col-xl- *
классы. Столбцы — это фактическая область содержимого, в которую мы будем помещать наше содержимое. Давайте применим все это на практике и посмотрим, как это работает на самом деле:
Создание макетов с двумя столбцами
В следующем примере показано, как создать макеты с двумя столбцами для средних, больших и очень больших устройств, таких как столы, ноутбуки, настольные компьютеры и т. Д. Однако на мобильных телефонах (ширина экрана менее 768 пикселей) столбцы автоматически станут горизонтальными (2 ряды, 1 столбец).
Столбец слева
Столбец справа
Столбец слева
Столбец справа
Столбец слева
Столбец справа
Примечание: В макете сетки содержимое должно быть размещено внутри столбцов (.col
и .col- *
), и только столбцы могут быть непосредственными дочерними элементами строк ( .row
). Кроме того, ряды следует размещать внутри контейнера (фиксированного или жидкого) для надлежащего заполнения и выравнивания.
Совет: Ширина столбцов сетки задается в процентах, поэтому они всегда гибкие и имеют размер относительно их родительского элемента.Кроме того, каждый столбец имеет горизонтальный отступ (называемый желобом) для управления пространством между отдельными столбцами.
Поскольку система сеток Bootstrap основана на 12 столбцах, поэтому, чтобы столбцы оставались в одной строке (т. Е. Рядом), сумма номеров столбцов сетки в одной строке не должна быть больше 12. Если вы пройдете через в приведенном выше примере кода внимательно вы найдете количество столбцов сетки (т.е. col-md- *
) добавьте до двенадцати (6 + 6, 4 + 8 и 3 + 9) для каждого ряда.
Создание макетов с тремя столбцами
Точно так же вы можете создавать другие макеты на основе вышеуказанного принципа. Например, в следующем примере обычно создаются макеты с тремя столбцами для экранов ноутбуков и настольных компьютеров. Он также работает в планшетах в ландшафтном режиме, если разрешение экрана больше или равно 992 пикселей (например, Apple iPad). Однако в портретном режиме столбцы сетки, как обычно, будут горизонтальными.
Столбец слева
В середине столбца
Столбец справа
Столбец слева
В середине столбца
Столбец справа
Столбец слева
В середине столбца
Столбец справа
Примечание: Если более 12 столбцов сетки помещаются в одну строку, каждая группа дополнительных столбцов в целом переносится на новую строку.См. Поведение переноса столбцов.
Колонки авто-компоновки бутстрапа
Вы также можете создать столбца с одинаковой шириной для всех устройств (очень маленькие, маленькие, средние, большие и очень большие), просто используя класс .col
без указания номера столбца.
Давайте попробуем следующий пример, чтобы понять, как это работает:
Первый столбец
Вторая колонка
Первый столбец
Вторая колонка
Третий столбец
Кроме того, вы также можете установить ширину одного столбца и позволить соседним столбцам автоматически изменять размер вокруг него одинаково.Вы можете использовать предопределенные классы сетки или встроенную ширину.
Если вы попробуете следующий пример, вы найдете столбцы в строке с классом . Col
имеет одинаковую ширину.
Первый столбец
Вторая колонка
Первый столбец
Вторая колонка
Третий столбец
Поведение при переносе столбца
Теперь мы собираемся создать более гибкие макеты, которые изменяют ориентацию столбцов в зависимости от размера области просмотра.В следующем примере создается макет из трех столбцов на больших устройствах, таких как ноутбуки и настольные компьютеры, а также на планшетах (например, Apple iPad) в альбомном режиме, но на средних устройствах, таких как планшеты, в портретном режиме (768 пикселей ≤ ширина экрана <992 пикселей), он изменится на макет из двух столбцов, где третий столбец перемещается внизу первых двух столбцов.
Первый столбец
Вторая колонка
Третий столбец
Как вы можете видеть в приведенном выше примере, сумма номеров столбцов средней сетки (т.е. col-md- *
) равно 3 + 9 + 12 = 24> 12
, поэтому третий элемент
.col-md-12
, который добавляет дополнительные столбцы сверх максимального 12 столбцов в строке .row
переносятся на новую строку как один непрерывный блок на устройствах среднего размера экрана.Точно так же вы можете создавать еще более адаптируемые макеты для своих веб-сайтов, используя функцию переноса столбцов сетки в Bootstrap. Вот несколько готовых к использованию примеров сетки Bootstrap.
Создание макетов с несколькими столбцами с помощью Bootstrap
С новой системой гибких сеток Bootstrap 4 mobile first flexbox вы можете легко управлять тем, как макет вашего веб-сайта будет отображаться на разных типах устройств с разными размерами экрана или области просмотра, таких как мобильные телефоны, планшеты, настольные компьютеры и т. Д. Давайте рассмотрим следующую иллюстрацию.
На приведенной выше иллюстрации всего 12 блоков содержимого на всех устройствах, но их размещение зависит от размера экрана устройства, как и в мобильном устройстве, макет отображается как макет сетки из одного столбца, в котором 1 столбец и 12 строк расположены друг над другом. , тогда как на планшете он отображается как двухколоночная сетка с 2 столбцами и 6 строками.
Кроме того, на устройствах с большим размером экрана, таких как ноутбуки и настольные компьютеры, он отображается в виде трехколоночной сетки, которая имеет 3 столбца и 4 строки, и, наконец, в устройствах с очень большим экраном, таких как большие рабочие столы, она отображается как четырехколоночная сетка, которая имеет 4 столбца и 3 ряда.
Теперь вопрос в том, как мы можем создавать такие отзывчивые макеты, используя эту новую сеточную систему Bootstrap. Начнем с основного целевого устройства. Предположим, что наше основное целевое устройство — ноутбук или обычный настольный компьютер.Поскольку наш макет ноутбука имеет 3 столбца и 4 строки, то есть макет сетки 3×4, поэтому HTML-код для создания такой структуры сетки будет выглядеть примерно так.
Вставка 1
Вставка 2
Вставка 3
Вставка 4
Вставка 5
Вставка 6
Вставка 7
Вставка 8
Вставка 9
Вставка 10
Вставка 11
Вставка 12
Если вы видите результат вышеприведенного примера на ноутбуке или настольном компьютере с шириной экрана или области просмотра, превышающей или равной 992 пикселей, но менее 1200 пикселей, вы обнаружите, что макет имеет 4 строки, каждая из которых имеет 3 равных столбца, что дает 3 x 4 Макет сетки.
Теперь пришло время настроить наш макет для других устройств. Давайте сначала настроим его для планшетного устройства. Поскольку внутри планшета наш макет отображается как сетка 2×6 (т.е. 2 столбца и 6 строк). Итак, добавьте класс .col-md-6
в каждый столбец.
Вставка 1
Вставка 2
Вставка 3
Вставка 4
Вставка 5
Вставка 6
Вставка 7
Вставка 8
Вставка 9
Вставка 10
Вставка 11
Вставка 12
Совет: Для удобства выберите основное целевое устройство и сначала создайте макет для этого устройства, после чего добавьте классы, чтобы оно реагировало на другие устройства.
Точно так же вы можете настроить макет для очень больших устройств, таких как большой экран рабочего стола, добавив класс .col-xl-3
в каждый столбец, поскольку каждая строка в нашем макете очень большого устройства содержит 4 столбца. Вот окончательный код после объединения всего процесса.
Вставка 1
Вставка 2
Вставка 3
Вставка 4
Вставка 5
Вставка 6
Вставка 7
Вставка 8
Вставка 9
Вставка 10
Вставка 11
Вставка 12
Совет: Как показано на рисунке выше, нет необходимости настраивать макет для мобильных телефонов; поскольку столбцы на сверхмалых устройствах автоматически станут горизонтальными и будут отображаться в виде сетки столбцов 1×12 при отсутствии .col- *
или .col-sm- *
классы.
Вложение столбцов сетки
Столбцы сетки Bootstrap также могут быть вложенными, что означает, что вы можете помещать строки и столбцы внутри существующего столбца. Однако формула размещения столбцов будет такой же, т.е. сумма номеров столбцов должна быть равна 12 или меньше в пределах одной строки.
Столбец слева
Создание столбцов переменной ширины
Вы можете использовать классы col- {breakpoint} -auto
для изменения размера столбцов на основе естественной ширины их содержимого.Попробуйте следующий пример, чтобы увидеть, как это работает:
Столбец слева
Столбец переменной ширины
Столбец справа
Столбец слева
Столбец переменной ширины
Столбец справа
Выравнивание столбцов сетки
Вы можете использовать утилиты выравнивания flexbox для вертикального и горизонтального выравнивания столбцов сетки внутри контейнера.Попробуйте следующие примеры, чтобы понять, как это работает:
Вертикальное выравнивание колонн сетки
Вы можете использовать классы .align-items-start
, .align-items-center
и .align-items-end
для выравнивания столбцов сетки по вертикали вверху, посередине и внизу контейнера, соответственно.
Первый столбец
Вторая колонка
Третий столбец
Первый столбец
Вторая колонка
Третий столбец
Первый столбец
Вторая колонка
Третий столбец
Отдельные столбцы внутри строки также можно выровнять по вертикали.Вот пример:
Первый столбец
Вторая колонка
Третий столбец
Примечание: Вы можете пропустить номер в .col- *
класса сетки и просто используйте класс .col
, чтобы создать столбцы одинакового размера для всех устройств (очень маленькие, маленькие, средние, большие и очень большие).
Горизонтальное выравнивание колонн сетки
Вы можете использовать классы .justify-content-start
, .justify-content-center
и .justify-content-end
для выравнивания столбцов сетки по горизонтали слева, по центру и справа от контейнера. соответственно.Давайте посмотрим на следующий пример, чтобы увидеть, как это работает:
Первый столбец
Вторая колонка
Первый столбец
Вторая колонка
Первый столбец
Вторая колонка
В качестве альтернативы можно использовать класс .justify-content-around
для равномерного распределения столбцов сетки с промежутками половинного размера на обоих концах, тогда как вы можете использовать класс .justify-content-between
для равномерного распределения столбцов сетки там, где первый столбец расположен в начале, а последний столбец помещается в конец. Попробуйте следующий пример, чтобы увидеть, как это работает на самом деле:
Первый столбец
Вторая колонка
Первый столбец
Вторая колонка
Пожалуйста, ознакомьтесь с руководством по css3 flexbox, чтобы узнать больше о выравнивании гибких элементов.
Изменение порядка столбцов сетки
Вы даже можете изменить визуальный порядок столбцов сетки, не меняя их порядок в реальной разметке. Используйте класс .order-last
, чтобы расположить столбец последним, тогда как используйте класс .order-first
, чтобы расположить столбец на первом месте. Рассмотрим пример:
Первый, но наконец заказанный
Второй, но неупорядоченный
Последний, но сначала заказанный
Вы также можете использовать .order- *
классы для упорядочивания столбцов сетки в зависимости от порядковых номеров. Столбец сетки с номером более высокого порядка идет после столбца сетки с номером более низкого порядка или столбца сетки без классов порядка. Он включает поддержку от 1 до 12 на всех пяти уровнях сетки.
Первый, но наконец заказанный
Второй, но сначала заказанный
Последний, но заказывается вторым
Смещение столбцов сетки
Вы также можете перемещать столбцы сетки вправо для выравнивания, используя классы смещения столбцов, такие как .offset-sm- *
, .offset-md- *
, .offset-lg- *
и т. д.
Эти классы смещают столбцы, просто увеличивая его левое поле на указанное количество столбцов. Например, класс .offset-md-4
в столбце .col-md-8
перемещает его вправо на четыре столбца от исходного положения. Попробуйте следующий пример, чтобы увидеть, как это работает:
Вы также можете смещать столбцы с помощью служебных классов маржи.Эти классы полезны в ситуациях, когда ширина смещения не фиксирована. Вот пример:
Примечание: Вы можете использовать класс .col-auto
для создания столбцов, которые занимают столько места, сколько необходимо, то есть размеры самих столбцов зависят от содержимого.
Создание компактных столбцов
Вы можете удалить желоба по умолчанию между столбцами для создания компактных макетов, добавив класс .no-gutters
в .row
. Этот класс удаляет отрицательные поля из строки и горизонтальное заполнение из всех непосредственных дочерних столбцов.Вот пример:
Первый столбец
Вторая колонка
Третий столбец
Разделение столбцов на новую строку
Вы также можете создать столбцы одинаковой ширины, охватывающие несколько строк, вставив
.w-100
класс, в котором вы хотите, чтобы столбцы разбивались на новую строку. Кроме того, вы можете сделать эти разрывы адаптивными, объединив класс .w-100
с вспомогательными классами адаптивного дисплея.
.col
.col
.col
.col
.col
.col
.col
.col
Мы надеемся, что вы поняли основы новой системы сеток Bootstrap 4.В следующих нескольких главах вы узнаете, как создавать базовые макеты веб-страниц, используя эту систему сеток flexbox.
Столбцов начальной загрузки
Обзор
В последние несколько лет и, безусловно, в следующие, мир Интернета распространяется все шире и шире на все виды устройств, поэтому сейчас почти половина просмотров страниц осуществляется не на экранах настольных компьютеров и ноутбуков, а с различных устройств. мобильные устройства со всевозможными небольшими размерами экрана.Таким образом, если страница не будет отображаться должным образом — то есть при изменении размера и автоматическом поиске наиболее подходящего для используемого устройства, скорее всего, она будет удалена и заменена удобной для мобильных устройств страницей, предлагающей аналогичный продукт или услугу. Кроме того, системы индексирования, такие как Google, проводят так называемый тест для мобильных устройств и показывают далеко внизу ваши страницы в результатах поиска. Это давление еще больше, если поиск осуществляется с мобильного устройства — поисковые системы относятся к этому вопросу достаточно серьезно.Таким образом, отсутствие страницы, оптимизированной для мобильных устройств, почти означает ее отсутствие.
Как применить столбцы Bootstrap:
Но то, что на самом деле страница является адаптивной, означает, как правило, соответствие всей ширине экрана, который отображается при представлении элементов в удобном и разборчивом виде любого размера. Чтобы позаботиться об этом, фреймворк Bootstrap использует так называемые столбцы и точки останова. В нескольких словах точки останова — это заранее заданные значения ширины экрана, при которых происходит изменение, и столбцы переупорядочиваются, чтобы они лучше подходили.В предыдущей версии использовалось 4 точки останова, а в самой последней версии Bootstrap 4 добавлена еще одна, так что фактически их было пять. Вот они с максимальным значением, до которого они растягиваются. Само точное число границ относится к следующему размеру экрана.
Extra small до 34em (или 544px) — до Bootstrap 4 Alpha 5 имел инфикс -xs-
. В Bootstrap 4 alpha 6 этот инфикс опущен, поэтому следует просто номер;
Small — от 34em до 48em (или 768px) — имеет инфикс -sm-
;
Medium — от 48em до 62em (или 992px) — имеет инфикс -md-
;
Large — от 62em до 75em (1200px) — -lg-
infix;
Очень большой — 75em и все, что выше него — новый размер в Bootstrap 4 — имеет инфикс -xl-
.
Дополнительная техника
Горизонтальное пространство в фреймворке Bootstrap 4 распределяется на 12 частей равной ширины — это так называемые столбцы — все они имеют префикс .col-
. Затем идет инфикс размера экрана, который определяет, до какого размера экрана элемент столбца будет охватывать указанное количество столбцов. Id размер экрана меньше — элемент столбца занимает всю ширину экрана — как если бы ему было присвоено .col-12
( .col-xs-12
до Bootstrap 4 alpha 5).
Столбцы с автоматической компоновкой
Примените классы столбцов, зависящие от точки останова, для столбцов одинаковой ширины. Включите любое количество классов без единиц для каждой точки останова, которая вам нужна, и каждый столбец, безусловно, будет иметь эквивалентную ширину.
Идентичная ширина
В качестве примера вот два стиля сетки, которые применяются для каждого гаджета и области просмотра, от xs
.
1 из 2
1 из 2
1 из 3
1 из 3
1 из 3
Установка ширины одного столбца
Автоматическая компоновка столбцов сетки flexbox дополнительно показывает, что вы можете установить ширину одного столбца, а остальные быстро изменят размер вокруг него.Вы можете использовать предопределенные классы сетки (указанные здесь), миксины сетки или встроенную ширину. Обратите внимание, что размер дополнительных столбцов изменится, несмотря на ширину центрального столбца.
1 из 3
2 из 3 (шире)
3 из 3
1 из 3
2 из 3 (шире)
3 из 3
Материал переменной ширины
Работая с классами col- breakpoint -auto
, столбцы могут иметь абсолютно собственный размер, основанный на обычной ширине их содержимого.Это очень удобно, потому что веб-контент в одну строку, такой как вводимые данные, числа и т. Д., Очень удобен. Это, вместе с классами горизонтального выравнивания, действительно полезно для централизации стилей вместе с неравными размерами столбцов по мере увеличения ширины области просмотра.
1 из 3
Содержимое переменной ширины
3 из 3
1 из 3
Содержимое переменной ширины
3 из 3
Многорядные одинаковой ширины
Генерируйте столбцы одинаковой ширины, которые растягиваются на несколько строк, просто добавляя .w-100
именно там, где вы хотите, чтобы столбцы разбивались на новую строку. Помогите сделать разделение отзывчивым, собрав воедино .w-100
, имея несколько утилит с адаптивным экраном.
col
col
col
col
Еще какая-то обновка
Еще одна новинка в последней сборке Bootstrap 4 Alpha 6 — добавление всего нескольких .col- ~ some number here ~
элемента, охватывающих менее 12 столбцов, они фактически будут распределять пропорционально, чтобы занять все пространство, доступное в строке, и останутся такими при любой ширине экрана — даже ниже 32em.
Выводы
Итак, теперь вы знаете, как элементы столбцов формируют структуру и адаптивное поведение фреймворка Bootstrap, и все, что вам осталось, — это создать что-то действительно замечательное с их помощью.
Посмотрите несколько обучающих видео о столбцах Bootstrap
Связанные темы:
Столбцы начальной загрузки авторитетные записи
Адаптивные столбцы в Bootstrap
Проблема с высотой колонок Bootstrap
Как использовать сетку начальной загрузки
Система сеток Bootstrap
используется для макета, в частности Адаптивные макеты . Понимание того, как это работает, жизненно важно для понимания Bootstrap.
Сетка состоит из групп строк и столбцов внутри одного или нескольких контейнеров .
Bootstrap Grid можно использовать отдельно, без Bootstrap JavaScript и других компонентов CSS. Вам просто нужно скачать и
обратитесь к "bootstrap-grid.css"
, который содержит классы Grid и Flexbox.Подробнее об использовании только
CSS-файл Bootstrap Grid находится здесь, в документации.
Базовый пример использования сетки:
Я ваш контент внутри сетки!
Это дает нам одну большую «колонку» по горизонтали во вьюпорте…
2 столбца…
Левый столбец
Правый столбец
3 столбца…
Левый столбец
Средний столбец
Правый столбец
Основные концепции Grid понятны быстро , но вам может быть интересно, почему все это
Разметка HTML необходима.У вас могут возникнуть вопросы, например…
Зачем мне нужен контейнер?
Можно ли сделать одну колонку шире других?
Нужно ли мне использовать строку?
Я отвечу на подобные вопросы по Grid чуть позже.
Но сначала я хочу сделать шаг назад, чтобы объяснить кое-что очень важное об использовании Grid.Понимание «правил сетки» сэкономит вам много времени и нервов.
Прочтите их внимательно…
1. Столбцы
должны быть непосредственными дочерними элементами строки.
2. Строки
, только содержат столбцы, ничего больше.
3. Строки должны быть помещены в контейнер.
Эти правила очень ВАЖНЫ.Строки и столбцы всегда работают вместе, и у вас никогда не должно быть одного без другого.
Плохие вещи произойдут, если вы точно не будете следовать этим 3 простым правилам Grid. Я ответил на бесчисленное количество вопросов по Bootstrap.
на Stack Overflow, просто применив эти правила. Сначала это может показаться сложным, но это действительно легко, если вы поймете, как работает Grid.
Есть
правильный способ использовать сетку начальной загрузки…
В базовых примерах вы могли заметить, что я использовал класс .container
для обертывания .row
.
Контейнер — это корневой (также известный как верхний уровень, самый внешний) элемент Bootstrap Grid.
Я доволен сеткой!
Контейнер можно использовать для хранения любых элементов и содержимого.Он используется не только для
Строки и столбцы сетки. Например, это вполне допустимая разметка Bootstrap:
Мой заголовок
Я доволен сеткой!
Поначалу Контейнер может показаться тривиальным или ненужным, но для контроля он очень важен.
ширина макета.Контейнер также используется для равномерного выравнивания левого и правого края
макет в области просмотра браузера.
Bootstrap 4 имеет 2 типа контейнеров. В своих примерах я использовал .container
, но есть также
полная ширина . контейнер для жидкости
. Вы можете использовать любой:
1 — Контейнер фиксированной ширины для центрирования макета посередине:
2 — Контейнер во всю ширину для макета, занимающего всю ширину:
Модель .контейнер
быстро масштабируется по ширине (по мере уменьшения ширины экрана), так что в конечном итоге
он становится во всю ширину, как .container-fluid
на небольших устройствах.
Примечание. Контейнер может использоваться для хранения любого содержимого, а не только строк и столбцов сетки. Но если ты
используйте строки и столбцы сетки, строки должны быть помещены внутри контейнера.Попробуйте демонстрацию контейнера на Codeply
При использовании сетки внутри контейнера будет размещена еще одна строка. У вас может быть несколько строк в
Контейнер, и вы можете иметь несколько Контейнеров на одной странице. Все зависит от того, какой макет вы пытаетесь создать.
достигнуть, но пока не слишком об этом беспокоиться.
Важно, чтобы контейнер использовался для хранения строк сетки (.строка).
Строки имеют отрицательное левое / правое поле -15 пикселей. Заполнение контейнера размером 15 пикселей используется для нейтрализации отрицательных полей строки.
Это сделано для того, чтобы содержимое было равномерно выровнено по краям макета. Если вы не поместите строку в контейнер, она переполнится.
контейнер, вызывающий нежелательную горизонтальную прокрутку.
Обратите внимание, что я сгруппировал «Строки и столбцы» в одном разделе этой статьи.Это потому, что вы не можете иметь его без
другое, как объяснялось ранее в «Правилах сетки».
Некоторое время мне хотелось, чтобы Bootstrap .row на самом деле не назывался «row».
Название «строка» часто вводит в заблуждение и скрывает истинное назначение .row
.
Когда вы думаете о строке, вы, вероятно, думаете, что горизонтальная линия , и это нормально, НО лучше подумать о
.строка
просто как родительский столбцов.
Думайте о строке как о группе столбцов
Это связано с тем, что столбцы внутри .row
не всегда располагаются горизонтально по области просмотра. Иногда мы хотим, чтобы расположение столбцов было горизонтальным,
в то время как в других случаях мы хотим, чтобы столбцы располагались вертикально вниз по области просмотра. Концепция горизонтальной и вертикальной компоновки — это суть
Адаптивный дизайн.Единственная цель «строки» — содержать 1 или более «столбцов».
НЕ СОДЕРЖИТЕ СОДЕРЖИМОЕ НАПРЯМУЮ ВНУТРИ РЯДА!
Опять же, только Row предназначены для сдерживания Coumns.
⛔Это очень плохо, неверно, никакого буэно !!Это тоже очень плохо, неверно !!
Заголовков тоже нет! Это неправильный путь !!
столбцов, а только столбца помещаются внутри строки.
✅Счастлив :-) Это правильный путь.
Также важно отметить, что .row
— это дисплей : flex
. Как дети Flexbox,
Столбцы в каждой строке имеют одинаковую высоту. Благодаря Flexbox, горизонтальное и вертикальное выравнивание (выравнивание по правому краю, центру, низу и т. Д.).)
легко достигается с помощью классов Bootstrap 4 Flex и Auto-margin Utility.
Теперь пора глубже взглянуть на Rows & Columns и , а именно на , как они работают вместе.
Существуют разные «типы» столбцов и разные способы их использования в макете. Они волшебные.
Счастье — это … Колонны.
Все, что может делать Bootstrap 4 Columns…
- Создайте горизонтальные деления на видовом экране.
- Может иметь различную заданную ширину.
- Может изменяться по ширине при разной ширине экрана.
- Макет горизонтально слева направо, затем вертикально вверх и вниз.
- Может изменять положение (переупорядочивать) относительно братьев и сестер в той же строке.
- Они того же роста, что и их братья и сестры в одном ряду.
- Может «увеличиваться» или «уменьшаться» в ширину.
- Может автоматически «оборачиваться» или «складываться» по вертикали по мере необходимости или с разной шириной.
- Может содержать больше строк и столбцов__, это называется «вложением».
Все, что вам нужно знать о столбцах Bootstrap …
Столбцы создают горизонтальные деления на видовом экране.Пространство между колоннами называется «желобом».
Классическая сетка Bootstrap состоит из 12 столбцов:
Примечание для чайников: Столбцы на самом деле не светло-розовые. Это используется только для того, чтобы вы могли видеть левую / правую границы столбцов.
В большинстве случаев вы не собираетесь использовать все 12 отдельных столбцов, как показано выше.Вместо этого вы будете использовать
комбинация 12 для содержания страницы…
Таким образом, столбцы можно равномерно разделить на коэффициенты по 12. Например, 6 столбцов (12/6 = 2):
И вы можете посчитать …
Столбцы можно разделить, используя любую часть из 12 блоков.И можно использовать меньше 12 . Также можно использовать вместо 12 , которые я покажу вам позже.
При всей этой гибкости возможности компоновки кажутся безграничными …
Но сетка не всегда около 12. Благодаря Flexbox,
Bootstrap 4 имеет новые столбцы «Автоматическая компоновка».Эти безразмерные столбцы обеспечивают еще большую гибкость при проектировании макетов .
Теперь вы знаете, как использовать столбцы для создания горизонтального макета. Но подождите … это еще не все! Давайте поговорим о некоторых более интересных вещах, которые умеют делать Columns.
Как вы видели ранее, столбцы могут быть разной ширины:
Знаете ли вы, что ширина столбца может изменять в зависимости от ширины экрана ?
Это называется Отзывчивый дизайн , и я очень скоро расскажу вам, как именно он работает.Но, обо всем по порядку, мне нужно закончить рассказ о столбцах. Помните, когда я сказал
« Можно использовать более 12 столбцов в строке »?
Столбцы в одном макете строки горизонтально, а затем складываются вертикально вниз. Это вертикальное «штабелирование» или «заворачивание»
происходит, когда количество столбцов в одной строке превышает 12.Это называется «переносом столбца»…
Столбцы в той же строке переносятся на следующую строку каждые 12 единиц:
Шириной столбца и «обтеканием» можно управлять с помощью различных уровней адаптивной сетки (также известных как «точки останова сетки»):
Столбцы могут изменять положение (переупорядочивать) относительно братьев и сестер в той же строке:
Столбцы могут содержать детские строки и столбцы.Это называется «вложением»:
Столбцы могут «увеличиваться» или «уменьшаться» в ширину. Это столбцы с автоматической компоновкой:
Теперь, когда вы понимаете основы использования системы сеток Bootstrap, теперь я покажу вам, что
средние значения
sm
, -md
, -lg
и -xl
. Я объясню больше
о том, как использовать сетку для адаптивного дизайна .
Понимание системы сеток Bootstrap | База знаний пары
Эта статья была обновлена для работы с Bootstrap v.4.2.
Bootstrap — это фреймворк для создания веб-сайтов. Это избавляет от необходимости создавать основу для сайта. Вместо этого вы можете загрузить файлы Bootstrap на свой сервер, а затем добавить шаблон Bootstrap. Инструкции о том, как это сделать, можно найти в нашей статье «Настройка Bootstrap».
Это даст вам базовый сайт. Однако что действительно делает Bootstrap впечатляющим, так это широкий спектр компонентов веб-сайта, которые можно добавить на сайт. Поскольку в Bootstrap уже есть встроенный CSS и Javascript, компоненты уже стилизованы и функциональны. Конечно, вы можете редактировать CSS и Javascript, чтобы настроить свой сайт по своему вкусу.
Сеточная система Bootstrap
Bootstrap использует сетку для правильного масштабирования компонентов для различных экранов просмотра.Это может показаться запутанным, но в этой статье мы подробно остановимся на том, как работает сетка.
Сетка Bootstrap состоит из контейнеров, строк и столбцов, которые используются для определения макета сайта.
Контейнеры
Контейнеры Bootstrap используются для определения ширины макета. Элементы добавляются внутри контейнеров и зависят от ширины контейнера. Контейнер — это элемент
Контейнеры по умолчанию имеют отступ в 15 пикселей, который смягчает его от конца страницы и от других контейнеров.
Внутри контейнеров будет добавлено
строк и столбцов.
Не вставляйте контейнер в контейнер.
Контейнеры фиксированной ширины
Контейнеры имеют фиксированную ширину по умолчанию, которая будет меняться в зависимости от размера устройства просмотра.Ширина устройства просмотра и соответствующая ширина контейнера указаны в таблице ниже:
Ширина устройства обзора | Ширина контейнера |
Менее 575 пикселей | Авто |
576–767 пикселей | 540 пикселей |
768–991px | 720 пикселей |
992–1199 пикселей | 960 пикселей |
1200px или выше | 1140 пикселей |
Контейнеры для жидкости
Если вы не хотите, чтобы размеры контейнеров менялись по фиксированной ширине, вы можете использовать class = «container-fluid» вместо class = «container».Это заставит контейнеры всегда соответствовать ширине экрана просмотра, а не изменять размер до фиксированной ширины.
Столбцы и строки
Сетка Bootstrap позволяет размещать до 12 столбцов на странице. Эти столбцы можно использовать по отдельности или сгруппировать. Чтобы сгруппировать столбцы вместе, вам нужно создать строки. Чтобы создать строки, добавьте div с class = «row», который заключает в себе код столбца.
Ряды всегда должны размещаться внутри контейнера.
Пример:
Содержимое столбца.
Рядов занимают всю ширину контейнера. В конце они имеют отрицательное поле в 15 пикселей, по существу удаляя поле в 15 пикселей, установленное его контейнером. Это связано с тем, что каждый столбец имеет собственное поле в 15 пикселей, которое заменяет поле контейнера.
Строки имеют отступ -15 пикселей, что сводит на нет отступ контейнера 15 пикселей.
Столбцы, выровненные рядом друг с другом, будут иметь поле 15 пикселей, в результате чего поле между двумя столбцами составит 30 пикселей. На содержимое в столбце будет влиять поле столбца в 15 пикселей.
Столбцы имеют отступ 15 пикселей. Столбцы, расположенные рядом друг с другом, будут иметь отступ 15 пикселей, в результате чего получится буфер 30 пикселей.
Добавление столбцов
Размер столбцов начальной загрузки можно различить по классам столбцов.Классы столбцов обычно задаются в формате «префикс столбца — Номер столбца », который будет напоминать этот пример:
КонтентКонтент
Столбцы необходимо разместить внутри ряда.
Замените префикс и ColumnNumber предпочтительным размером префикса и количеством столбцов.
Префиксы определяют, для какого устройства предназначена колонка. Например, см предназначен для маленьких экранов, таких как телефоны.
Размер | Префикс | Колонка | Для |
Очень маленький | Нет (по умолчанию) | .col- | <576 |
Малый (телефоны) | см | .col-sm- | ≥576px |
Средний (таблетки) | мкр | .col-md- | ≥768 пикселей |
Large (ноутбуки) | LG | .col-lg- | ≥992px |
Extra Large (настольные ПК) | xl | .col-xl- | ≥1200 пикселей |
ColumnNumber в конце класса сетки, например class = «col-md-4», устанавливает, сколько столбцов он должен охватывать. В примере class = «col-md-4» содержимое
Чтобы столбцы были выровнены бок о бок, включите их в одну строку.
КонтентКонтент
В конце концов, вы хотите, чтобы количество столбцов в ряду составляло двенадцать.
Регулировочные колонки для различных устройств
Вы также можете настроить столбцы так, чтобы они имели разную ширину столбцов в зависимости от размера устройства. Для этого вы просто включаете в свой класс еще один col-prefix-columnNumber. Это будет выглядеть примерно так:
Контент
В этом примере содержимое будет расположено в шести столбцах для очень маленьких экранов просмотра, в то время как на средних экранах просмотра содержимое будет отображаться в четырех столбцах.
Вложенные столбцы
Вы можете вкладывать столбцы, если настроили контейнер, строку и столбец. Для этого добавьте новую строку
Содержимое родительского столбцаСодержимое дочернего столбца
Bootstrap — это CSS-фреймворк с открытым исходным кодом, разрешенный под лицензией MIT.Bootstrap не является продуктом Pair Networks, Inc., и Pair Networks не предоставляет никаких гарантий на Bootstrap. Обратите внимание, что существует множество уровней фреймворков CSS. Проконсультируйтесь со своим ИТ-специалистом за советом и указаниями по подходящей структуре CSS. Этот конкретный продукт может соответствовать вашим потребностям, а может и не соответствовать. Компания Pair Networks, Inc. обеспечивает поддержку этого руководства для вашего удобства и не несет ответственности за производительность Bootstrap. Пожалуйста, внимательно прочтите условия и объем услуг для любой онлайн-услуги или продукта, которые вы собираетесь приобрести или использовать.
Как работает сетка Bootstrap 4. Что такое Flexbox Powered… | Кэрол Скелли
Я отвечу на подобные вопросы Grid через некоторое время. Но, первый Я хочу сделать шаг назад, чтобы объяснить кое-что очень важное об использовании сетки.
Поверьте мне. Понимание «правил сетки» сэкономит вам много времени и нервов. Внимательно прочтите …
___________________________________________________________________
- Столбцы должны быть непосредственным дочерним элементом строки.
- Строки только используются для столбцов, больше ничего .
- Строки должны быть помещены в контейнер.
Эти правила очень ВАЖНО . строк и столбцов всегда работают вместе , и у вас никогда не должно быть без одного .
Плохие вещи произойдут, если вы не будете следовать этим 3 простым правилам сетки: ровно . Я ответил на бесчисленные вопросы Bootstrap о Stack Overflow, просто применив эти правила.Сначала это может показаться сложным, но это действительно легко, если вы поймете, как работает Grid.
___________________________________________________________________
В базовом примере вы, возможно, заметили, что я использовал .container
, чтобы обернуть .row
. Контейнер — это корневой (также известный как верхний уровень, самый внешний) элемент Bootstrap Grid.
container ">
row ">
col "> Я доволен сеткой!
< / div>
Контейнер может использоваться для хранения любых элементов и содержимого. Это , а не , используется только для строк и столбцов сетки. Например, это вполне допустимая разметка Bootstrap:
My Heading
Я доволен сеткой!
Не игнорировать контейнер.
Поначалу Контейнер может показаться тривиальным или ненужным, но очень важно, чтобы управляла шириной макета.Контейнер также используется для равномерного выравнивания левого и правого краев макета в области просмотра браузера. Контейнер используется для нейтрализации отрицательных полей строки , которые я объясню ниже.
FYI: Viewport — видимая область внутри окна браузера.
Bootstrap 4 имеет 2 типа контейнеров . В моих примерах я использовал
.container
, но есть также полноразмерный.Контейнер с жидкостью
. Для центрирования макета по центру можно использовать один:1– Контейнер фиксированной ширины:
container ">
2– Контейнер полной ширины для макет занимает всю ширину:
container-fluid ">
. .container
масштабируется по ширине в ответ (по мере уменьшения ширины экрана), так что в конечном итоге он становится заполненным -ширина как. контейнер с жидкостью
на устройствах меньшего размера.
Напоминание: Контейнер может использоваться для хранения любого содержимого , а не только строк и столбцов сетки. Но, если вы все же используете Grid Rows & Columns, Rows следует разместить внутри контейнера. Попробуйте демонстрацию контейнера на Codeply
При использовании сетки еще одна строка будет размещена внутри контейнера.