От автора: я приветствую вас. В прошлых статьях мы рассмотрел подключение фреймворка Bootstrap и первые шаги работы с ним. Настал час затронуть самую важную тему. А именно, как работает в Bootstrap сетка. Именно понимание этого вопроса сильно упростит вам верстку сайтов.
Любой css-фреймворк имеет свою сетку. Практически, если мы рассматриваем, для чего вообще создается css-фреймворк, то во многом только для сетки, которая позволяет быстро и легко верстать адаптивные шаблоны. Остальные компоненты вроде кнопок, таблиц, форм и прочего можно сделать и самому, зачастую именно так и нужно.
Конечно, приятно, что Bootstrap есть все компоненты и можно использовать все готовое, но в первую очередь нас интересует именно сетка. Итак, давайте подробно рассмотрим сетку бутстрапа.
Итак, в сетке этого фреймворка по умолчанию 12 колонок. На самом деле при кастомизации фреймворка вы сможете выставить любое другое значение, но практически всегда вас будет устраивать 12 колонок. Число 12 делится на много других чисел, поэтому им очень удобно оперировать.
Если вы ранее создавали с помощью html тегов таблицы, то следующее сравнение будет для вас как нельзя кстати. Ведь сетку фреймворка можно сравнить с обычной таблицей.
Вся сетка должна располагаться в общем контейнере. Это должен быть блок с классом container или container-fluid. Отличие у классов в том, что первый имеет максимальные фиксированные размеры, а именно 1170 пикселей. То есть ширина сайта не будет больше этого значения.
Container-fluid – это полностью резиновый контейнер, который растягивается всегда на 100% ширины окна, поэтому если у вас полностью резиновый сайт, вам нужен именно такой контейнер. Если мы говорим о таблицах, то там тоже есть свой глобальный контейнер – table.
Внутри этого контейнера должен быть еще один блок с классом row, то есть одна строка сетки. И опять же, если сравниваем с таблицами, то там за вывод одного табличного ряда отвечает тег tr. Ряды сетки и таблицы очень похожи, потому что в обоих случаях они просто выступают контейнерами для основного содержимого – в них самих никакой контент не размещается, да и стили к ним не применяются.
Например, если мы говорим о простом сайте, то можно разделить его на три ряда – шапка сайта, блок для основного контента и боковая колонка и подвал. Заметьте, что контент и сайдбар мы поместили в один ряд, потому что это действительно так.
В самом ряду располагаются уже непосредственно ячейки ил колонки, как принято говорить при верстке на Bootstrap. Колонка имеет класс col-x-x, где первый x – обозначение устройства, а второй – кол-во колонок от 1 до 12. Как это работает, мы с вами сейчас посмотрим. Если вам удастся это понять, то вы также быстро поймете, почему так легко делать адаптивные сайты на Bootstrap.
Итак, разработчики фремворка при создании сетки выделили 4 основных типа устройств по ширине экрана. Хорошую таблицу с перечнем классов для сетки вы можете найти в русской документации, которая находится здесь — http://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 > |
Если вы внимательно читали предыдущий текст, то уже понимаете, что мы сейчас создаем свои первые блоки в сетке. Мы поместили в класс container 1 ряд, а в него, в свою очередь, 2 блока.
Как же работают классы типа col-x-x? Очень просто, откройте пока браузер и посмотрите на результат. Кстати, результата-то и не будет видно, потому что мы никак не стилизовали наши блоки. Давайте это исправим. Этот код можно вставить в style.css, который вы самостоятельно создадите и подключите:
div{ background: #8CC7D9; border: 1px solid #6B6ACD; }
div [ class ^= 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 4. Быстрый старт
Изучите основы Bootstrap 4 на практическом примере по верстке блога с нуля
Как видите, инструкция, которая действовала для 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 > |
То есть вообще для каждого типа устройств задать свое отображение. Тут вы уже сами можете понять, насколько широким будет блок на разной ширине экранов.
ВНИМАНИЕ! Никогда не допускайте ситуации, чтобы у вас в одном ряду было более 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 > Но ведь мы можем спокойно представить себе, что этот блок является тоже контейнером, почему нет? По сути, так и есть при разработке сайта. Есть общий контейнер для всего сайта, контейнер для контента, сайдбара, шапки и т.д. Можно представить, что этот блок – контейнер для основного блока с текстом на сайте, в него мы помещаем, в свою очередь, ряд (обязательно придерживайтесь в коде структуры – контейнер – ряд — ячейки). В этом ряду, как видите, 3 блока и для каждого задано поведение на разных устройствах. По сути, мы получили сетку внутри основной сетки! И эта вложенная сетка тоже будет иметь 12 колонок. Я вам скажу даже больше. Вложенных сеток может быть неограниченное количество. Например, эти три блока – это три карточки товара в интернет-магазине. Структура самой карточки может быть тоже достаточно сложной. Кто знает, может и там вы используете вложенную сетку. Таким образом, фреймворк Bootstrap попросту стирает перед вами любые препятствия при верстке веб-страниц: вы можете создать как простые типовые шаблоны, так и сложнейшие страницы с тысячей элементов на них. Ведь сетка – это не просто общий контейнер сайта, систему сетки можно применить даже при разметке очень незначительных блоков. Адаптивные утилитыЕще одна потрясающая возможность фреймворка – адаптивные утилиты. Сейчас объясню. Наверняка вы не планируете на мобильных устройствах отображать 100% элементов сайта, которые видны на больших десктопах – вам попросту некуда будеть все это впихнуть. Очень часто на мобильных устройствах полностью убирают боковую колонку, сворачивают меню, удаляют какие-то большие декоративные элементы и т.д. В Bootstrap все это очень легко делать с помощью классов, которые называют адаптивными утилитами. В документации ознакомиться с ними можно тут: http://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 4. Быстрый старт Изучите основы Bootstrap 4 на практическом примере по верстке блога с нуля |
Мощная система гибких сеток, предоставляющая преимущества для пользователей мобильных устройств, для удобной верстки и расположения элементов любых видов и размеров. Используется система «12 колонок», 5-ти адаптивных ярусов, препроцессоров Sass и предустановленных классов.
Система сеток Bootstrap 4 использует контейнеры, ряды и колонки, чтобы удобно располагать содержимое. Бутстрап реализован с помощью флексбокса и полностью адаптивен. Ниже приведен пример и глубокий взгляд на объединение сетки.
Одна из трёх колонок
Одна из трёх колонок
Одна из трёх колонок
В данном примере с помощью наших предустановленных классов сеток были созданы 3 колонки равной ширины для маленьких, средних и больших девайсов. Эти колонки выровнены с помощью родительского класса.container .
Вот небольшое объяснение работы Bootstrap 4:
Бутстрап использует em и rem для задания большинства размеров, а пиксели px – для «брейкпойнтов» сетки и ширин контейнеров. Это происходит потому, что ширина зоны видимости на каждом устройстве измеряется в пикселях и не изменяется с размером шрифта .
Посмотрим, как действуют некоторые аспекты системы сеток Bootstrap на разных «ручных» устройствах.
 Small ≥576px |
 ≥768px |
 Large ≥992px |
 ≥1200px |
||
|---|---|---|---|---|---|
| Максимальная ширина контейнера |
None (auto) | 540px | 720px | 960px | 1140px |
| Префикс класса | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- |
| Число колонок | 12 | ||||
| Ширина отступа | 30px (15px с каждой стороны столбца) | ||||
| Может быть вложенным | Да | ||||
| Упорядочивание колонок | Да | ||||
Используйте классы колонок со специальными контрольными точками (например, .col-sm-6) для легкого расположения колонок без использования явно обозначенных номеров классов.
Например, здесь мы видим две сетки, которые подойдут к любому устройству и зоне видимости, от xs до xl . Добавляйте любое количество простых классов для каждого брейкпойнта, и каждая колонка будет одинаковой ширины.
Колонки одинаковой ширины могут быть представлены в виде строк, но тут может помешать баг , который нуждается в добавлении аттрибута flex-basis или border . Наш пример работает благодаря установленному значению border ; вы можете сделать то же самое: .col { border: 1px solid transparent; } . Есть иной способ: вы можете добавить flex-basis к ширине колонки, т.е. .col { flex: 1 0 50%; } .
Авто-расположение колонок в сетке флексбокса также дает возможность установить ширину одной колонки, при этом остальные «родственные» колонки автоматически изменят свой размер вокруг нее. Вы можете использовать предустановленные классы сеток (как показано внизу), миксины или инлайн-ширину. Заметим, что другие колонки будут изменять размер независимо от ширины центральной колонки.
2 из 3 (широкая)
2 из 3 (широкая)
Используйте классы col-{breakpoint}-auto для создания колонок, изменяющих свою ширину по ширине содержимого.
Содержимое адаптивной ширины
Содержимое адаптивной ширины
Создавайте колонки одной ширины, которые охватывают множественные ряды, добавлением.w-100 туда, где необходимо сместить вниз на новую строку. Делайте их адаптивными, применяя.w-100 вместе с некоторыми адаптивными утилитами отображения .
Сетка Bootstrap включает 5 «ярусов» предопределенных классов, используемых для построения сложного адаптивного контента. Адаптируйте размеры своих колонок для правильного их отображения на всех видах и размерах устройств.
Для сеток, которые выглядят и располагаются одинаково на всех устройствах любого размера, используйте классы.col и.col-* . Определите именованный класс с цифрой, когда вам нужна колонка определенного размера, во всех остальных случаях свободно пользуйтесь.col .
Используя один набор из классов.col-sm-* , вы можете создать базовую сетку, которая вначале сложена по вертикали, а потом ее колонки становятся горизонтальными (на экстрамалых девайсах).
Не хотите, чтобы ваши колонки шли в одном порядке? Используйте комбинацию разных классов для каждого яруса. Смотрите пример внизу.
Col-12 .col-md-8
Col-6 .col-md-4
Col-6 .col-md-4
Col-6 .col-md-4
Col-6 .col-md-4
Используйте утилиты гибкой центровки для вертикальной и горизонтальной центровки колонок.
Одна из трёх колонок
Одна из трёх колонок
Одна из трёх колонок
Одна из трёх колонок
Одна из трёх колонок
Одна из трёх колонок
Одна из трёх колонок
Одна из трёх колонок
Одна из трёх колонок
Одна из трёх колонок
Одна из трёх колонок
Одна из трёх колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Пробелы между колонками в наших предустановленных классах можно удалить с помощью класса.no-gutters , который удаляет отрицательный марждин margin из.row и горизонтальный паддинг padding из всех колонок.
Здесь исходный код для создания этих стилей. Заметим, что переопределения колонок действуют только в первых наследуемых колонках и определяются через селектор атрибута . Этот метод создает более подробный селектор, и паддинг колонки может быть изменен через spacing utilities .
Нужно создать дизайн «edge-to-edge» (контент плотно прилегает к краям девайса)? Уберите родительский класс.container или.container-fluid .
.no-gutters { margin-right : 0 ; margin-left : 0 ; > .col , > [ class *= "col-" ] { padding-right : 0 ; padding-left : 0 ; } }Вот как это работает на практике. Заметьте, что вы можете продолжить использовать это со всеми остальными предустановленными классами сеток (включая ширину колонок, «отзывчивые» ярусы, переопределения и прочее).
Col-12 .col-sm-6 .col-md-8
Col-6 .col-md-4
Если больше 12-ти колонок разместить в одном ряду, каждая дополнительная колонка обернется в новую строку.
Col-4
Пооскольку 9 + 4 = 13 > 12, этот div шириной 4 колонки «обернется» в новую строку как смежный юнит.
Col-6
Последующие столбцы продолжаются вдоль новой строки.
Чтобы сместить колонки на новую строку в гибком контейнере, нужно сделать следующее: добавьте элемент с width: 100% туда, где вы хотите обернуть ваши колонки новой строкой. В норме это достигается с помощью множественных.row , но не каждый исполнительный метод может это поддержать.
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
Используйте классы.order- - для контроля над визуальным порядком вашего контента. Эти классы «отзывчивы», так что вы можете задать порядок с помощью order брейкпойнта (например, .order-1.order-md-2). Он поддерживает 1 для 12 через все 5 ярусов.
Первый, но неупорядоченный
Второй, но последний
Третий, но первый
Также существует отзывчивый класс.order-first , который быстро измеяет порядок одного элемента применением свойства order: -1 . Этот класс также может применяться с нумерованными классами order-* .
Первый, но неупорядоченный
Второй, но неупорядоченный
Третий, но первый
Вы можете смещать колонки сетки двумя путями: с помощью отзывчивых классов.offset- и с помощью наших утилит марджинов . Классы сетки созданы так, чтобы совпадать с колонками, а марджины удобней для быстрого расположения элементов там, где ширина офсета непостоянна.
Двигайте колонки вправо, используя классы.offset-md-* . Они увеличивают левый марджин колонки на * колонок. Например, класс.offset-md-4 двигает.col-md-4 на 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.col-sm-6.col-md-5.col-lg-6
Col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0
В БС4, по сравнению с БС3, больше нет офсетных классов v3. Вместо них используйте утилиты марджина, такие как.mr-auto , чтобы заставить «детские» колонки отодвинуться одна от другой.
Используя исходные файлы Sass препроцессоров БС, вы имеете возможность использования переменных и «смесей» Sass для создания понятных и «отзывчивых» страниц. Наши предустановленные классы сеток используют эти же файлы и «миксины», получая готовые классы для быстрой адаптивной верстки.
Переменные и карты определяют число колонок, ширину отступа и контрольную точку медиа-вызова, на которой колонки начинают вести себя как плавающие. Мы используем эти фичи, чтобы генерировать предустановленные классы сетки, которые описаны выше, и миксины, описанные ниже.
$grid-columns : 12 ; $grid-gutter-width : 30px ; $grid-breakpoints : ( // Extra small screen / phone xs : 0 , // Small screen / phone sm : 576px , // screen / tablet md : 768px , // Large screen / desktop lg : 992px , // Extra large screen / wide desktop xl : 1200px ); $container-max-widths : ( sm : 540px , md : 720px , lg : 960px , xl : 1140px );Миксины используются в сочетании с переменными сеток для генерации семантического CSS для колонок индивидуальных сеток.
// Creates a wrapper for a series of columns @include make-row (); // Make the element grid-ready (applying everything but the width) @include make-col-ready (); @include make-col ($size , $columns : $grid-columns ); // Get fancy by offsetting, or changing the sort order @include make-col-offset ($size , $columns : $grid-columns );Вы можете изменять переменные как вам надо, или просто использовать миксины со значениями по умолчанию. Вот пример использования миксинов, настроенных по умолчанию, для создания двух-колоночного содержимого с разрывом между колонками.
.example-container { width : 800px ; @include make-container (); } .example-row { @include make-row (); } .example-content-main { @include make-col-ready (); @include media-breakpoint-up (sm ) { @include make-col (Изменяя встроенные переменные SASS и карты сеток, возможно полностью перенастроить предопределенные классы сеток. Изменяйте количество ярусов, расширения медиаочередей, ширину контейнеров – компилируйте и пользуйтесь.
Число колонок сетки может быть изменено через переменные SASS. Используйте $grid-columns для генерации ширины (в %) каждой отдельной колонки, а $grid-gutter-width позволяет создавать особые ширины для точек брейкпойнтов отступов колонок, которые разделены ровно через padding-left и padding-right .
$grid-columns : 12 ! default ; $grid-gutter-width : 30px ! default ;Вы может также настроить число ярусов сеток. Если вы хотите, к примеру, 4 яруса, настройте $grid-breakpoints и $container-max-widths так:
$grid-breakpoints : ( xs : 0 , sm : 480px , md : 768px , lg : 1024px ); $container-max-widths : ( sm : 420px , md : 720px , lg : 960px );Внося изменения в переменные SASS или карты, вам необходимо сохранять изменения и компилировать заново. Это позволит создать абсолютно новый набор предустановленных классов сеток с новыми параметрами ширины и порядка колонок. Инструменты «отзывчивой» видимости также обновятся. Обязательно задайте значения сетки в px (не в rem или em и не в %).
Стремительно развивающиеся технологии заставляют нас идти в ногу со временем. Если раньше дизайн создавался на чистом HTML и CSS коде, то сегодня время библиотек кода.
Многие фронт энд разработчики, которые ценят свое время, давно уже используют шаблонизаторы, сетчастые структуры, SESS, LESS, Bootstrap и другие решения. Это правильно, зачем усложнять себе жизнь, когда есть готовые коллекции и реализации задач.
Сегодня мы рассмотрим, как просто можно создавать блочные сетки на bootstrap 3.0. Хотя с уверенностью могу сказать, через пол года, нужно будет вникать в новую 4 версию бутстрапа.
Bootstrap - это библиотека CSS кода, предоставлена компанией Твиттер и распространяется бесплатно. Значительно упрощает жизнь веб дизайнеру. В архиве прилагается небольшое дополнение в виде js файла. Подробнее об установке и использовании можно узнать на официальном сайте.
Примеры решений: http://getbootstrap.com/components/ - табы, стилизация таблиц, всплывающие окна, навигация, менюшки, вертикальные списки, кнопки, иконки и другие прелести. Тоже на англ. языке.
Ранее, во второй версии бутстрапа, были лишь некоторые дополнения для мобильных решений. В третей версии — весь фреймверк изначально адаптирован под различные устройства: мобильные, планшеты, десктопы. Сейчас проясниться:)
Почти весь функционал бутстрапа осуществляется через использование элементарных классов.
Весь код body контента содержится в специальном div блоке. Он может быть фиксированной ширины .container , или полноэкранным.container-fluid .
Состоит из 12 ячеек, каждая из которых является div блоком, в строке.row.
Теперь посмотрите таблицу ниже, чтобы было легче понимать следующие куски кода.
В зависимости от префикса, мы будет создавать сетку для необходимого устройства.
Внимание! Можно создавать сетку изначально ориентируясь на несколько устройств одновременно. Достигается это путем комбинирования префиксов.
Пример 1. Создадим некие сетки только для десктопных устройств:
Пример 2 . А теперь скомбинируем сетку для десктопа и мобильного одновременно:
Данный туториал предоставляет информацию о «грид» системе фреймворка Bootstrap 3.
Сеточная система Twitter Bootstrap предлагает быстрый и простой способ создавать разметку веб-страниц. Twitter Bootstrap 3 идет в комплекте с адаптивной мобильной плавающей системой сеток, которая структурируется вплоть до 12 колонок в зависимости от увеличения размера устройства или экрана. Давайте посмотрим, как она работает.
Чтобы правильно выравнять и задать внутренний отступ сетки, блоки с классом.row нужно располагать внутри блоков с классом.container (фиксированная ширина) или.container-fluid (по ширине странице).
Блоки с классом.row необходимо использовать для создания горизонтальных групп колонок.
Предопределенные классы сеток, например.row и.col-xs-4, позволяют быстро создавать разметку сеток. Также можно использовать миксины языка стилей less для увеличения количества типов семантической разметки.
Колонки создают промежутки (gutters) (разрывы между содержанием колонок) через внутренний отступ (padding). Этот внутренний отступ (padding) смещается для первой и последней колонок из-за отрицательного значения внешнего отступа (margin) блоков с классом.row.
Колонки сеток создаются путем указания требуемого числа из двенадцати доступных колонок. Например, для трех одинаковых колонок нужно использовать три контейнера с классом.col-xs-4.
Классы сеток применяются к устройствам, в которых ширина больше или равна контрольным размерам, и переопределяют классы сеток, предназначенных для меньших устройств. Таким образом, применение любого класса.col-md- к элементу задаст стиль не только для средних, но и для больших устройств в том случае, если не используется класс.col-lg- .
Twitter Bootstrap 3 включает предопределенные классы сеток, чтобы быстро верстать сеточную разметку для различных типов устройств, например мобильные телефоны, планшеты, компьютеры и т.п. Например, можно использовать класс.col-xs- , чтобы создавать сеточные колонки для очень маленьких устройств, как, например, мобильный телефон; таким же образом класс.col-sm- употребляется для маленьких устройств ~ планшетов, класс.col-md- для средних устройств ~ компьютеров и.col-lg- для больших экранов компьютеров. Ниже приводятся виды разметки системы сеток Bootstrap .
Очень маленькие устройства ~ телефоны (<768px)
Маленькие устройства ~ планшеты (≥768px)
Средние устройства ~ компьютеры (≥992px)
Большие устройства ~ компьютеры (≥1200px)
Пожалуйста, ознакомьтесь со следующей таблицей для более детальной информации:
Применение класса.col-sm- к элементу повлияет на стиль не только для маленьких устройств, например планшетов, но также для средних и больших устройств с шириной экрана больше или равной 768px (т.е. ≥768px), если не употребляются классы.col-md- и.col-lg- . Подобным образом, класс.col-md- повлияет не только на стиль для средних устройств, но также и для больших, если не употребляется класс.col-lg- .
Приведем примеры:
Пример кода:
Fluid container (Подвижный контейнер) . Превратите любую сеточную разметку с фиксированной шириной в подвижную, изменив класс контейнера с.container на.container-fluid.
Mobile and desktop (Мобильные устройства и компьютер) . Можно использовать классы сеток для очень маленьких и средних устройств, добавляя.col-xs-* .col-md-* в колонки.
Пример кода:
Mobile, tablet, desktops (Мобильный, планшет, компьютеры). Постройте еще более динамичную разметку для планшета при помощи класса.col-sm-* , используя предыдущий пример.
Пример кода:
Column wrapping (Перенос колонок) . Если в одном блоке с классом.row находится больше 12 колонок, каждая группа дополнительных колонок будет переходить на новою строку как единое целое.
Пример кода:
Responsive column resets (Исправление адаптивных колонок) . При использовании четырех доступных сеток, вы столкнетесь с проблемой, когда в определенных точках колонки выглядят неправильно из-за разницы высоты. Чтобы это исправить, используйте комбинацию блока с классом.clearfix и адаптивных служебных классов.
Пример кода:
Offsetting columns (Смещение колонок) . Двигайте колонки вправо при помощи классов.col-md-offset-* . Эти классы увеличивают отступ слева от блока на * количество колонок. Например, класс.col-md-offset-4 подвинет блок с классом.col-md-4 на четыре колонки.
Пример кода:
Nesting columns (Вложенные колонки) . Чтобы вложить содержание в основную сетку, добавьте новый блок с классом.row и набор колонок.col-sm-* внутри существующей колонки.col-sm-*. Вложенные блоки с классом row должны включать набор из 12 или менее колонок (не рекомендуется использовать все 12 доступных колонок).
Пример кода:
Column ordering (Порядок отображения колонок) . Порядок отображения встроенных сеточных колонок можно изменить при помощи модифицированных классов.col-md-push-* and .col-md-pull-*.
Пример кода:
Используйте следующие адаптивные классы, чтобы управлять видимостью элементов на устройствах, чьи размеры экранов подпадают под определенный тип. В версии v3.2.0, классы.visible-*-* для каждого контрольного размера представляются в трех вариантах, по одному на каждое значение свойства CSS display: inline, block и inline-block.
Подобным образом можно использовать служебные классы для скрытия, чтобы прятать элементы на определенных устройствах:
Можно использовать следующие служебные классы, чтобы показать или убрать определенные элементы при печати страницы.
Bootstrap включает в себя мощную mobile-first блочная система макетов здания любых форм и размеров. Он основан на столбец 12 разметка и имеет несколько уровней, по одному для каждой медиа диапазона запроса . Вы можете использовать его с Sass примесей или наших предопределенных классов.
На высоком уровне, блочная система работает так:
Звучит хорошо? Отлично, давайте перейдем к видя все это в пример.
Если вы используете Bootstrap скомпилированный CSS, в этом примере вы хотите, чтобы начать с.
One of three columns
One of three columns
One of three columns
Приведенный выше пример создает три равные ширины столбцов на малых, средних, больших, и очень больших устройств, используя наш . Эти столбцы по центру страницы с родителем.container .
При Bootstrap использует em s или rem s для определения большинства размеров, px s применяются для грид точки останова и ширины контейнера. Это происходит потому, что Ширина области просмотра в пикселях и не меняется с размером шрифта .
Смотри как аспекты Bootstrap блочная система работают на нескольких устройствах с таблица.
|
Сверхмалые <544px |
Небольшой ≥544px |
Средний ≥768px по |
Большие ≥992px |
Очень большой ≥1200px |
|
|---|---|---|---|---|---|
| Поведение разметки | Horizontal at all times | Collapsed to start, horizontal above breakpoints | |||
| Ширина контейнера | None (auto) | 576px | 720px | 940px | 1140px |
| Класс префикса | .col-xs- | .col-sm- | .col-md- | .col-lg- | .col-xl- |
| # колонок | 12 | ||||
| Промежуточная ширина | 1.875rem / 30px (15px on each side of a column) | ||||
| Вкладка | Yes | ||||
| Отступ | Yes | ||||
| Выравнивание столбцов | Yes | ||||
При использовании Bootstrap источник Sass файлов, у вас есть возможность использования Sass переменных и миксинов для создания пользовательских семантических, aдаптивный страница разметки. Наш использовать те же переменные и миксины представить целый набор готовых классов для быстрого aдаптивный разметки.
Переменные и карты определить количество столбцов, ширину промежутка, а медиа запросов точки, с которой начинается плавающие столбцы. Мы используем их, чтобы создать предопределенный грид классов, описанных выше, а также для пользовательских миксины, перечисленных ниже.
$grid-columns : 12 ; $grid-gutter-width : 30px ; $grid-breakpoints : ( // Extra small screen / phone xs : 0 , // Small screen / phone sm : 544px , // Medium screen / tablet md : 768px , // Large screen / desktop lg : 992px , // Extra large screen / wide desktop xl : 1200px ); $container-max-widths : ( sm : 576px , md : 720px , lg : 940px , xl : 1140px );Смешивания используются в сочетании с переменных разметкок, чтобы образовать семантические CSS для отдельных столбцов разметки.
// Создает оболочку для ряда столбцов @mixin make-row ($gutter : $grid-gutter-width ) { @if $enable-flex { display : flex ; flex-wrap : wrap ; } @else { @include clearfix (); } margin-left : ($gutter / -2 ); margin-right : ($gutter / -2 ); } // Делаем элемент грид-готов (применив все, но Ширина) @mixin make-col-ready ($size , $columns : $grid-columns , $gutter : $grid-gutter-width ) { position : relative ; min-height : 1px ; // Предотвращения коллапса padding-right : ($gutter / 2 ); padding-left : ($gutter / 2 ); // Предотвращения столбцов становится слишком узким, когда за меньший грид уровни // всегда установка Ширина: 100%;`. Это работает, потому что мы используем Флекс значения // позже, чтобы переопределить это начальная Ширина. @if $enable-flex { width : 100% ; } } @mixin make-col ($size , $columns : $grid-columns , $gutter : $grid-gutter-width ) { @if $enable-flex { flex : 0 0 percentage ($size / $columns ); // Добавить `Макс-ширина по обеспечению содержания в каждом столбце не задуть // Ширина столбца. Применяется для ie10+ и Firefox. Chrome и Safari // не нуждаются в этом. max-width : percentage ($size / $columns ); } @else { float : left ; width : percentage ($size / $columns ); } } // Получить фантазии с помощью взаимозачета или изменить порядок сортировки @mixin make-col-offset ($columns ) { margin-left : percentage (($columns / $grid-columns )); } @mixin make-col-push ($columns ) { left : percentage (($columns / $grid-columns )); } @mixin make-col-pull ($columns ) { right : percentage (($columns / $grid-columns )); }Вы можете изменить переменные на собственные значения, или просто использовать миксины с их значениями по умолчанию. Вот пример с использованием параметров по умолчанию, чтобы создать два столбца разметка с зазором между ними.
.container { max-width : 60em ; @include make-container (); } .row { @include make-row (); } .content-main { @include make-col-ready (); @media (max-width : 32em ) { @include make-col (6 ); } @media (min-width : 32 .1em ) { @include make-col (8 ); } } .content-secondary { @include make-col-ready (); @media (max-width : 32em ) { @include make-col (6 ); } @media (min-width : 32 .1em ) { @include make-col (4 ); } }Помимо семантической примеси, Bootstrap включает в себя широкий набор встроенных классов для быстрого создания грид колонн. Она включает в себя опции для аппаратной калибровки поля, переупорядочивание столбцов, и многое другое.
Используя единый набор.col-md-* грид классов, вы можете создать базовую блочная система что начинается сложены на мобильных устройствах и планшет устройств (экстра малый в небольшом диапазоне), прежде чем стать горизонтально на столе (средних) устройства. Место грид столбцов в любой.row .
Не хотите, чтобы ваши колонки просто сложить в небольших устройствах? Использовать дополнительные малые и средние устройства грид классов путем добавления.col-xs-* и.col-md-* в столбцах. Смотрите пример ниже для более полного представления о том, как все это работает.
Col-xs-12 .col-md-8
Col-xs-6 .col-md-4
Col-xs-6 .col-md-4
Col-xs-6 .col-md-4
Col-xs-6 .col-md-4
Постройте предыдущий пример, создав еще более динамичные и мощные макеты для планшета.col-sm-* класса.
Col-xs-12 .col-sm-6 .col-md-8
Col-xs-6 .col-md-4
Col-xs-6 .col-sm-4
Col-xs-6 .col-sm-4
Col-xs-6 .col-sm-4
Если более 12 колонок размещены в одной строке, каждая группа дополнительных столбцов будет, как единое целое, переносится на новую строку.
Col-xs-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
Col-xs-6
Subsequent columns continue along the new line.
С четырьмя ярусами сеток доступны вы обязаны столкнуться с проблемами, где в определенные точки останова, столбцы не понятно совсем правильно, как один выше другого. Чтобы исправить это, используйте комбинацию.clearfix и наш адаптивные служебные классы .
Col-xs-6 .col-sm-3
Col-xs-6 .col-sm-3
Col-xs-6 .col-sm-3
Col-xs-6 .col-sm-3
В дополнение к очистке столбца на адаптивных точках, вам может понадобиться сброс offsets, pushes, или pulls . Смотрите это в действии на
