Мощная система гибких сеток, предоставляющая преимущества для пользователей мобильных устройств, для удобной верстки и расположения элементов любых видов и размеров. Используется система «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 и не в %).
Доброго времени суток, дорогие подписчики, а также гости данного блога. В одной из прошлых статей я подробно рассказывал о том, как организовывается . Сегодня же я объясню, как правильно рассчитывать размеры колонок для страниц сайтов, покажу, где можно найти готовые макеты веб-сервисов, а также сверстать шаблон самому.
Отдельное внимание я хочу уделить рассмотрению преимуществ верстки с помощью фреймворка для девайсов с разными размерами экрана. Ну и конечно же не оставлю вас без примера программного кода. Поехали!
Для разбора дальнейшего материала стоит вспомнить, что в . Если вы хотите увидеть на своих веб-страницах аккуратно выполненный и не поплывший дизайн, то придерживайтесь главного правила: сумма всех колонок в одной строке должна ровняться четко 12. Ни больше, ни меньше.
Для реализации описываемого механизма можно воспользоваться двумя встроенными классами, которые определяют вид разметки макета. К ним относится .container и .container-fluid . Второй класс определяет так называемые плавающие сетки.
Часто слышу вопросы: «А как легко запомнить раз и навсегда разницу между этими двумя контейнерами?». Дорогие читатели, на самом деле все очень просто:
.container – фиксированная ширина (fixed-width), т.е. такой макет будет растягиваться только до определенной ширины и по бокам от края окна будут отступы.
. container- fluid – максимальная ширина (full-width), т.е. в этом случае веб-страница будет занимать всю возможную ширину экрана и отступов никаких не будет.
Также стоит вспомнить, что есть классы, создающий строки – . row – и колонки – . col- X- Y , где вместо X указывается расширение экрана устройства (при помощи специальных классов), а вместо Y – количество колонок.
Чтобы аккуратно распределить информацию по , нужно для начала определить, сколько место необходимо выделить для того или иного объекта. И в гридах деление на колонки можно сравнить с объединениями ячеек в таблицах html.
К примеру, если вам нужно выделить место для бокового меню с левой стороны и основного контента с правой, то задайте навигации класс . col- md-3 , а главному блоку – . col- md-9 .
И запомните, даже если для контента вам необходимо использовать всю возможную ширину окна, т.е. 12 колонок, не вставляйте его в блок строк. По правилам контент должен располагаться в пределах блока колонок, а они в свою очередь должны быть вложены в блоки строк.
Ну а теперь я могу перейти к описанию шаблонов. На основе системы Grid было создано огромное количество различных макетов, большинство которых выложены в в публичный доступ. Я хочу посоветовать вам одну ссылку с готовыми шаблонами и открытым кодом, примеры с которой отлично подойдут для обучения. Это http://www.w3schools.com/bootstrap/bootstrap_templates.asp .
Перейдя по ней, вы найдете 8 готовых решений различных типов . Программную реализацию каждого из них желательно проанализировать, видоизменить и после сверстать свой собственный Дизайн.
И вот тут стоит обратить внимание на главное преимущество верстки в . Его создатели предусмотрели множество полезных классов и других плюшек, которые обеспечивают сайт отзывчивостью. Это решает множество проблем, благодаря чему вам достаточно создать одну версию веб-сервиса и она будет корректно отображаться как на мобильных устройствах, так и на десктопах.
Если вы изучали css, то там существуют медиазапросы, с помощью которых определяется внешний вид дизайна в зависимости от размера экрана. «А что же обеспечивает отзывчивость в Bootstrap?» – спросят некоторые из вас. Ответ: все те же медиазапросы. Однако в этом случае они уже прописаны во встроенных классах, которых всего 4. Давайте подробнее рассмотрим их.
Экстра-маленькие девайсы (Смартфоны) | Маленькие девайсы (Планшеты) | Средние девайсы (Персональные компьютеры) | Большие девайсы (Персональные компьютеры) | |
Разрешение | <=767px | >767px | >991px | >1199px |
Ширина контейнера | None (auto) | 750px | 970px | 1170px |
Класс | -xs- | -sm- | -md- | -lg- |
Ширина колонки | auto | ~62px | ~81px | ~97px |
А теперь вспомните, как я выше прописывал . col- X- Y . Так вот название одного их этих классов нужно подставлять вместо X.
Как же функционируют данные классы? Если вы зададите, например, col- lg-6 , то при уменьшении ширины экрана начиная сразу с 1199px все колонки выстроятся одна под другой и займут все 12 ячеек.
Если же вы выберете класс sm , то такое произойдет, начиная с 767px. При этом данные параметры можно комбинировать и менять переменную Y.
Для закрепления рассмотрите пример с использованием -sm- .
Вы можете запустить пример в любом онлайн-редакторе кода. На экране у вас отобразится макет сайта с навигационной панелью с левой стороны и основным блоком с выделенными статьями с правой.
Однако вы можете видоизменить дизайн и разместить меню сверху, а контент по центру, или же подобрать другие варианты в существующих в сети генераторах. Обязательно поиграйтесь с четырьмя выше перечисленными классами и сравните поведение сайта при разных параметрах.
Если вам понравился материал публикации, то подписывайтесь на мой блог и рассказывайте о нем друзьям. До скорой встречи! Пока-пока!
Система сетки Bootstrap позволяет до 12 столбцов по всей странице.
Если вы не хотите использовать все 12 столбцов по отдельности, можно сгруппировать столбцы вместе, чтобы создать более широкие столбцы:
span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 |
span 4 | span 4 | span 4 | |||||||||
span 4 | span 8 | ||||||||||
span 6 | span 6 | ||||||||||
span 12 |
Система сетки Bootstrap реагирует, и столбцы будут переупорядочены в зависимости от размера экрана: на большом экране он может выглядеть лучше с содержанием организованы в трех колонках, но на маленьком экране было бы лучше, если содержание элементов были сложены на вершине e другие.
Совет: Помните, что столбцы сетки должны добавлять до двенадцати строк. Более того, столбцы будут складываться независимо от видового экрана.
Система Grid Bootstrap имеет четыре класса:
Приведенные выше классы можно комбинировать для создания более динамичных и гибких макетов.
Совет: Каждый класс масштабируется вверх, так что если вы хотите установить одинаковую ширину для XS и SM, вам нужно только указать XS.
Некоторые правила системной сетки Bootstrap:
Ниже приведена базовая структура сетки Bootstrap:
Таким образом, чтобы создать макет, необходимо создать контейнер (
В следующей таблице приведены сводные сведения о том, как система Grid Bootstrap работает на нескольких устройствах.
Extra small <768px |
Small >=768px |
Medium >=992px |
Large >=1200px |
|
---|---|---|---|---|
Class prefix | .col-xs- | .col-sm- | .col-md- | .col-lg- |
Suitable for | Phones | Tablets | Small Laptops | Laptops & Desktops |
Grid behaviour | Horizontal at all times | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | |
Container width | None (auto) | 750px | 970px | 1170px |
# of columns | 12 | 12 | 12 | 12 |
Column width | Auto | ~62px | ~81px | ~97px |
Gutter width | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) | |
Nestable | Yes | Yes | Yes | Yes |
Offsets | Yes | Yes | Yes | Yes |
Column ordering | Yes | Yes | Yes | Yes |
В следующих главах показаны примеры систем Grid для различных устройств.
Здравствуйте, уважаемые читатели блога сайт. В первой части статьи по мы познакомились с возможностями этого фреймворка, узнали о том, что такое отзывчивый дизайн и почему он так важен в нашу эпоху повального роста популярности различных мобильных гаджетов. Там мы также во всех подробностях рассмотрели вопросы подключения Бутстрапа к Html странице (подключение файлов стилей, скриптов и библиотеки jQuery).
Сегодняшняя статья посвящена сеточной системе, используемой в Bootstrap 3. Вы узнаете, какие размеры сеток можно применять, как они себя будут вести на устройствах с разным размером экрана и как самим создавать ряды и ячейки на основе одной или нескольких сеток. Все это будет рассказано на примерах, что, надеюсь, улучшит восприятие.
Bootstrap 3 идет в комплекте с двенадцатиколоночной сеточной системой , которая рассчитана в основном на мобильные устройства. Т.е. она разработана с прицелом в первую очередь именно на маленькие дисплеи, в уже во вторую — на широкие экраны. В новой версии этого фреймворка есть четыре размера сетки. Всю эту информацию можно подробно изучить на официальном сайте GetBootstrap.com , перейдя на вкладку «CSS» из верхнего меню и выбрав пункт «Grid system» в правом.
Там вы получите полное объяснение принципов работы системы, относящихся к ней медиа запросов и т.п. Тот ряд Html элементов (например, анонсы статей на главной странице), который вы захотите позиционировать в сетке, нужно будет окружить контейнером (например, заключить в теги Div) и прописать для него класс.row (выглядеть открывающий тег в этом случае будет как
Ну, а сами элементы внутри ряда вы сможете распределить по одной или сразу по нескольким типам сеток с помощью прописывания атрибута class со значением, например, .col-xs-цифра (в этом случае используется только сверхмалая сетка).
Для примера, если вам нужно получить в результате три равные по размеру колонки, то нужно разделить 12 (размерность сетки в Bootstrap 3) на 3 (требуемое число колонок). Значит для каждого Html элемента внутри ряда (это опять же могут быть контейнеры Div) нужно будет прописать одинаковые классы —
Чуть ниже в области «Grid options» вы найдет объяснение упомянутых выше четырех размеров сетки современного Бутстрапа.
Последние три сетки будут горизонтальными лишь при размерах экрана по ширине больше точки, при которой наступает «коллапс» (слом). Например, для большой сетки на экранах размером меньше 1200 пикселей она перестанет быть горизонтальной и превратится в вертикальную. На странице официального сайта GetBootstrap.com , которую мы сейчас рассматриваем, приведены примеры и пояснения по этому поводу. Однако, на мой взгляд, там все несколько путано и сложно.
Попробую пояснить все это на готовом примере. Вам нужно будет лишь скопировать файлик setka.html (для этого и выберите из контекстного меню пункт «Сохранить по ссылке как...»). Если этот файлик вы напрямую откроете в браузере (кликнув по приведенной ссылке левой кнопкой мыши), то ничего не получится, ибо не подключится фреймворк Бутстрап.
Скачанный файлик setka.html поместите в папку Bootstrap, о которой мы говорили в . Он должен находиться на том же уровне, что и созданный нами ранее файл index.html.
Теперь откройте этот файлик setka.html в любом удобном для вас браузере и произведите ряд экспериментов с размером окна вашего обозревателя, чтобы увидеть работу Bootstrap 3 в действии и понять работу сеточной системы. Каких именно? Сейчас объясню.
У меня разрешение экрана монитора по ширине составляет 1280 пикселей, что больше точки слома в 1200 пикселей, заданной для большой сетки. Что мы видим в результате? Примерно такую картину:
Здесь приведены пять примеров макета сайта, построенных на разных типах сеток:
Таким образом мы сможете пронаблюдать и сравнить, как эти сетки из арсенала Bootstrap 3 работают вместе и как работают по отдельности (при использовании только одного типа). Т.к. мой браузер при снятии предыдущего скриншота был развернут на весь экран (по ширине больший, чем 1200 пикселей), то все эти пять примеров макета сайта развернуты по горизонтали (колонки расположены рядом друг с другом по ширине экрана).
Теперь давайте чуток сузим размер окна браузера, чтобы по, и пронаблюдаем произошедший слом (коллапс).
Текст над верхним рядом и префиксы класса в его ячейках поменялись (для этого использовались классы видимости, о которых еще будем говорить). Теперь уже используется средняя сетка, которая по-прежнему отображается по горизонтали. В это же время самый нижний ряд (который иллюстрирует применение только крупной сетки ) сложился вертикально, т.е. соседние блоки отображаются теперь не друг рядом с другом по ширине, а друг под другом (по высоте).
Получается, что крупная сетка в отсутствии какого-либо внешнего влияния ведет себя именно таким образом — складывается по вертикали на всех устройствах, размер экрана которых по ширине меньше 1200 пикселей. При этом все остальные, используемые в примере сетки, отображаются горизонтально. В первом ряду используется комбинация сеток, поэтому сейчас он контролируется средней сеточной системой (крупная система уже эффекта не имеет).
Давайте еще раз уменьшим размер окна браузера по ширине так, чтобы оно стало. Произойдет очередной слом:
Теперь (исходя из размера экрана) мы работаем с маленькой сеткой. Соответственно, уже не только крупная, но и средняя сетка тоже сложилась вертикально. Ну, а в первом ряду, где используется комбинация сеток, сейчас все контролируется малой сеточной системой Бутстрапа. При этом, в файле setka.html меняется еще и распределение колонок в этом первом ряду, что вовсе не обязательно, но так вполне можно делать для удовлетворения каких-то своих нужд в плане верстки (причем на «раз-два», вообще без проблем).
Продолжаем уменьшать ширину окна браузера до значений. Происходит очередной слом:
В результате, уже не только крупная и средние сетки идут по странице вертикально, но к ним еще присоединилась и малая. Единственной горизонтальной осталась очень маленькая сетка , которая остается таковой (как мы смогли только что убедиться) при любых обстоятельствах. Даже если заузить страницу до сверхмалой ширины, сверхмалая сетка не превратится в вертикальную (даже когда контент не будет помещаться в ячейках).
Этот пример (файлик setka.html) сделан именно. Про то, как там все устроены, мы еще будем подробно говорить. Но пока я хочу обратить ваше внимание лишь на некоторые нюансы, которые вы сможете заметить в исходном коде файла setka.html.
Вверху с помощью добавлены стили для визуального оформления макетов (отступы, цвета сеток и т.п.), которые особой смысловой нагрузки не несут. Если прокрутите исходный код вниз, то заметите такой вот блок:
Здесь четыре контейнера, для которых назначены разные классы (читайте про ). Они позволяют отображать конкретный контент в зависимости от медиазапросов, соответствующих различным размерам сетки. Как это работает? Все четыре заголовка загружаются в браузер (если посмотреть исходный код), но только один заголовок отображается в зависимости от текущего разрешения экрана или размера окна браузера.
Это мастер-сетка , где скомбинированы все четыре сеточные системы (вы это можете видеть по атрибутам ячеек подобным class="col-lg-4 col-md-1 col-sm-5 col-xs-5" , в которых перечислены префиксы классов всех четырех сеток). Сам ряд, как уже упоминалось выше, задается с помощью помещения всех составляющих его элементов в контейнер с классом class="row" (в нашем примере это контейнер на основе div).
Обратите внимание, что мастер-сетка у нас состоит из трех ячеек (колонок) и если вы сложите все цифры, которые приписаны для каждой из колонок, например, для префиксов сверхмалой сетки Бутстрапа (col-xs), то получите в сумме 12. То же самое будет справедливо и для цифр, стоящих после префиксов всех остальных систем. Оно и понятно, ибо этот фреймворк, как уже говорилось выше, имеет 12 колоночную структуру, т.е. по горизонтали все доступное для макета пространство разделено на двенадцать равных по ширине колонок (невидимых на сайте — они подобны клеточкам в школьных тетрадях).
Ну и с помощью цифр после префиксов классов вы просто задаете пропорции для каждой из ячеек (реальных колонок) своего макета. Т.е. пропорции могут быть например, такими:
Вообще, можно использовать как одну, так и две, три или все четыре сеточные системы в одном макете (строке). Все это зависит от ваших предпочтений в дизайне и того, что вы пытаетесь добиться от свой вебстраницы (как это должно все выглядеть при разных расширениях экрана). На официальном сайте приведен пример:
Давайте теперь для наилучшего понимания создадим Html страницу, чем-то напоминающую реальную вебстраницу (с хедером, текстовым и графическим содержимым, а также футером) и разметим ее с помощью сеточной системы Bootstrap 3.
Точнее, создам заготовку я сам, а вам лишь предложу по аналогии с предыдущим примером скачать файлик sait.html (для этого и выберите из контекстного меню пункт «Сохранить как...»), чтобы уже потом вместе дописывать к этой «рыбе» нужные классы бутстрапа. Его также нужно будет поместить в папку Bootstrap на тот же уровень, что и созданный нами в первой статье файлик index.html (и setka.html, с которым мы работали чуть выше).
Если вы посмотрите исходный код файла sait.html, то увидите, что в нем уже подключен Бутстрап и jquery, а также добавлен контент для имитации внешнего вида среднестатистической вебстраницы. Да, еще папочка с используемыми на этой странице изображениями вам понадобится. Скачать ее можно отсюда — img.zip . Просто распакуйте архив и поместите папку img (проверьте, чтобы внутри нее лежали файлы изображений, а не еще одна папка img) в папку Bootstrap на один уровень с файлом sait.html. Структура получится такая:
Теперь, (из папки Bootstrap) в браузере, вы увидите ту вебстраницу, которую я использовал в качестве примера. Бросается в глаза то, что все блоки на странице расположены друг под другом, а это сильно мешает правильному визуальному восприятию информации. Было бы логично разместить их в колонки и чтобы при уменьшение размера экрана «дизайн отзывался» на это, изменяя число колонок для создания удобства просмотра на устройствах с разной шириной видимой области.
В исходном Html коде файла sait.html я использовал , чтобы показать границы предполагаемых мною рядов (строк), для которых мы будем настраивать отображение колонок с использование каких-то сеточных систем Бутстрапа. Рядов всего четыре (они пронумерованы на приведенном скриншоте) — хедер (шапка с названием сайта и логотипом), заголовок и описание страницы, содержательная часть (основной контент, состоящий из анонсов четырех статей) и футер.
Теперь нам нужно будет добавить в файл sait.html разметку Бутстрапа, которая. Для создания рядов, как вы помните, достаточно будет заключить все его содержимое в контейнер (чаще всего это теги Div, хотя могут быть и другие) и прописать в нем класс class="row" . Для первого ряда это будет выглядеть так:
То же самое нужно проделать и для всех остальных рядов (строк) — поставить открывающий тег
Теперь давайте займемся формированием ячеек в тех строках (рядах), где это имеет смысл делать. Вполне логичным будет разместить анонсы статей (из третьего ряда) в четыре колонки, а при уменьшении ширины экрана пусть эти четыре колонки преобразуются в две. Как это сделать? Давайте посмотрим.
Итак, в Bootstrap 3 имеет место быть 12-ти колоночная сетка, о которой мы говорили выше. Раз мы задумали сделать четыре колонки с анонсами, то было бы логичным сделать их равными по ширине, а значит каждая из колонок будет шириной в три клетки (ячейки) нашей невидимой сеточной системы (вне зависимости от того, какую по размеру сетку мы выберем — сверхмалую, малую, среднюю или большую).
Какую сетку выбрать для работы? Давайте возьмем для начала среднюю, как компромиссный вариант. В этом случае в контейнеры всех четырех ячеек нужно будет добавить класс «col-md-3» —
После сохранения произведенных изменений вы увидите, что наша вебстраница приобрела уже гораздо более юзабельный вид:
Правда, при уменьшении окна браузера до ширины меньшей точки слома (в случае используемой нами средней сетки это будет 992 пикселя), все анонсы опять выстроятся в столбик, что не есть хорошо, ибо юзабилити в этом случае снижается (разрешение в почти 1000 пикселей позволяет более плотно располагать информацию). Для исправления этой ситуации можно добавить еще одну сетку из арсенала Бутстрапа для тех же самых ячеек с анонсами. Как это сделать? Давайте посмотрим.
Давайте с помощью префиксов «col-xs-6» к названию класса в каждую ячейку с анонсом (в результате получится составной класс class="col-md-3 col-sm-6"). Выглядеть это будет так (на примере одной ячейки):
Текст анонса.
Как видите, мы здесь нарушили недавно озвученное правило, что числа после префиксов одной сетки во всех ячейках в сумме должны давать 12. У нас же получилось 24 (четыре раза по шесть). Но сделали мы это специально, чтобы добиться желаемого результата — получить вместо четырех две колонки при проходе точки срыва для средней сеточной системы Bootstrap (это 992 пиксела). Т.е. ячейки расположатся в двух строках по две штуки в каждой:
Т.к. мы выбрали сверхмалую сеточную систему, то при дальнейшем уменьшении ширины окна браузера вертикального расположения блоков с анонсами друг под другом (размещения в одну колонку) не произойдет, ибо эта система всегда остается горизонтальной.
Если же вы хотите, чтобы четыре колонки при уменьшении ширины экрана превращались в две, а потом уже в одну колонку, то следует использовать вместо «col-xs-6» малую сеточную систему с помощью «col-sm-6» :
Тогда, при уменьшении ширины окна браузера ниже 768 пикселей, вы увидите слом, при котором две колонки с анонсами преобразуются в одну. Просто поэкспериментируйте и почувствуйте разницу.
Давайте еще поэкспериментируем и попробуем, в котором имеется по сути две потенциальные ячейки — название сайта с описанием, а также логотип. Собственно, их и будем позиционировать. Давайте используем на этот раз большую сетку с помощью «col-lg-6» , чтобы получились две равные колонки.
Все о создании сайтов, блогов, форумов, интернет-магазинов, их продвижении в поисковых системах и заработке на сайте
Правда при использовании большой сетки слом происходит на довольно-таки больших разрешениях экрана (окна браузера, в нашем случае, ибо мы там имитируем устройства с различной шириной экрана). После чего ячейки складывают по вертикали. Чтобы этого избежать, мы добавим еще одну сетку Bootstrap 3 для первого ряда . Думаю, что подойдет малая сеточная система (префикс класса col-sm). Тогда код будет выглядеть примерно так:
Все о создании сайтов, блогов, форумов, интернет-магазинов, их продвижении в поисковых системах и заработке на сайте
Однако, я не стал делать для малой сетки ячейки с названием сайта и логотипом одинаковыми, ибо логотип существенно Уже (в смысле, узкий) названия с описанием. При меньшей ширине экрана выделять им равные ячейки было бы не логично. Поэтому я и сделал первую колонку с названием и описанием сайта при активации малой сеточной системы Бутстрапа в два раза больше колонки с логотипом.
В итоге, при уменьшении окна браузера, эти ячейки будут сближаться вплоть до момента слома для малой сеточной системы Бутстрапа, который наступит при ширине менее 768 пикселей, и тогда обе ячейки расположатся друг под другом.
Наверное, вы заметили, что текст страницы врезается в левый край экрана, что вызывает . Можно добавить для исправления данной ситуации в тег body, что позволит. А можно все решить стандартными средствами Bootstrap 3.
Для этого нужно будет все содержимое вебстраницы (все, что заключено в тегах Body) обернуть в контейнер Div с одноименным классом — Также вы можете видеть, что картинки анонсов наезжают друг на друга при уменьшении ширины экрана. Дело в том, что они пока еще «неотзывчивые», но мы их сделаем таковыми в следующих статьях этой рубрики. А также мы продолжим разбирать работу с сеточной системой Bootstrap 3, научимся оформлять кнопки, таблицы, Html формы, создавать выпадающие меню, навигацию и многое другое. Поэтому не переключайтесь и следите за новыми публикациями. Продолжение следует >>> (Вы можете подписаться на рассылку , чтобы его не пропустить)
А вот и продолжение вышло: (но вы все равно подписывайтесь — будет еще много интересного и полезного). Система сеток Twitter Bootstrap 3 - это быстрый и легкий путь для создания макета сайта.
Сетки Bootstrap применяют при разработке макетов веб-страниц и для создания разметки блоков, в которых необходимо обеспечить правильное расположение элементов. Разрабатывать сетку начинают с контейнера, который имеет фиксированную или плавающую ширину. Контейнер с фиксированной шириной ( Контейнер с плавающей шириной ( Следующим этапом является размещение рядов (блоки div с классом.row) внутри контейнера. Ширина рядов ( Внутри ряда помещаются блоки с классом col-*-* , внутри которых размещается содержимое или другие ряды. Ширина блоков с классом col-*-* задаётся в относительной форме с помощью указания количества колонок Bootstrap. Так как ряд в Bootstrap по умолчанию состоит из 12 колонок, то минимальная ширина блока col-*-* равна одной колонке Bootstrap, а максимальная ширина блока col-*-* равна 12 колонкам Bootstrap. Например, если мы хотим создать в ряду 3 блока с одинаковой шириной, то нам необходимо установить ширину этих блоков равным 4 колонкам Bootstrap ( Например: Рассчитать ширину блока в пикселях можно следующим образом: [Ширина колонки Bootstrap] = 970 / 12 = 81px. Для создания макетов веб-страниц под различные устройства (смартфоны, планшеты, ноутбуки и персональные компьютеры) необходимо воспользоваться предопределенными классами сеток Twitter Bootstrap 3. Например, вы можете использовать класс.col-xs-* для создания сетки для устройств с маленьким экраном, таких как смартфоны. Точно так же класс. col-sm-* - для устройств с небольшим экраном, таких как планшеты, класс.col-md-* - для устройств с экраном средних размеров, таких как персональные компьютеры и ноутбуки, а так же, класс.col-lg-* - для устройств с большим экраном. Следующая таблица обобщает некоторые ключевые особенности новой системы сеток Bootstrap 3. Примечание: Если вы применяете класс.col-sm-* к блоку, то это повлияет не только на разметку для устройств, с маленьким экраном (планшеты), но также на устройства со средним и большим экранами, если Вы не указали классы.col-md-* и.col-lg-* . Аналогично, класс.col-md-* будет влиять на разметку не только для устройств со средним экраном, но и на устройства с большим экраном, если класс.col-lg-* не указан. С новой системой сеток Twitter Bootstrap 3 вы можете легко контролировать отображение макета сайта на различных устройствах, которые имеют различную ширину экрана. В качестве примера рассмотрим процесс разработки макета сайта, состоящего из 3 блоков для всех устройств. Разрабатываемый макет на различных устройствах (смартфоны, планшеты, ноутбуки, персональные компьютеры) будет выглядеть по-разному. Например, на смартфонах эти блоки располагаются вертикально, а на большом экране персонального компьютера они размещаются горизонтально. То есть наш макет будет автоматически изменяться при достижении предельных значений ширины окна браузера. Макет сайта для устройства с большим экраном (width >=1200px) состоит из трёх блоков, расположенных горизонтально, которые занимают всю ширину контейнера. Первый блок имеет ширину равную половине ширины контейнера (col-lg-6), второй блок занимает одну четвертую от ширины контейнера (col-lg-3), и третий блок тоже занимает одну четвертую от ширины контейнера (col-lg-3). Макет сайта для устройства со средним экраном (width >=992px и <1200) состоит из трёх блоков, два из которых расположены в одной строке и один в другой. Первый блок имеет ширину равную 8 колонкам Bootstrap (col-md-8), второй блок занимает оставшуюся ширину, т.е. 12 - 8 = 4 колонки (col-md-4). Так как третий блок должен располагаться с новой строки, то необходимо перед ним поместить дополнительный пустой блок с классом.clearfix , который не будет обтекать предыдущие блоки. Также необходимо иметь в виду, что это надо сделать только для экранов со средней шириной. Для этого необходимо к пустому блоку дополнительно добавить класс.visible-md-block . Ширина 3 блока равна ширине контейнера (col-md-12).Описание системы сеток Twitter Bootstrap 3
Контейнер с фиксированной шириной
Контейнер с плавающей шириной
Размещение рядов внутри контейнера
Размещение блоков внутри рядов Bootstrap
Расчёт ширины блоков
[Ширина блока] = [Ширина колонки Bootstrap]*[Количество колонок, из которых состоит блок],
где: [Ширина колонки Bootstrap] = [Ширина ряда (row)] / 12.
[Ширина блока] = 81 * 4 = 324px.Система сеток под различные устройства
Особенности системы сеток Bootstrap 3
Крохотная ширина экрана
Смартфоны
(<768px)
Маленькая ширина экрана
Планшеты
(≥768px и <992)
Средняя ширина экрана
Ноутбуки
(≥992px и <1200px)
Большая ширина экрана
Компьютеры
(≥1200px)
Ширина контейнера
фиксированного
макета
(.container)
750px
970px
1170px
Ширина контейнера плавающего макета (.container-fluid)
Равна ширине рабочей области окна браузера
Префикс класса
.col-xs-
.col-sm-
.col-md-
.col-lg-
Максимальная ширина колонки Bootstrap для контейнера с фиксированной шириной (.container)
~62px (750px / 12)
~81px (970px / 12)
~97px (1170px / 12)
Максимальная ширина колонки Bootstrap для контейнера с плавающей шириной (.container-fluid)
Ширине рабочей области окна браузера / 12
Внутренние отступы для содержимого блоков, состоящих из колонок Bootstrap
15px с левой и правой стороны блока
Создание макета сайта с помощью системы сеток Twitter Bootstrap 3
Создание макета для устройства с большим экраном
Настройка макета для устройства со средним экраном
Настройка макета для устройств с маленьким и крохотным размерами экранов
Аналогичным образом настроим макет для остальных устройств. Макет сайта для устройства с маленьким экраном (width >=768px и <992px) состоит из 3 блоков, первый блок занимает всю ширину контейнера, остальные 2 блока расположены под ним и занимают каждый ширину, равную 6 колонкам Bootstrap.
<div class ="container" > <div class ="row" > <div class ="col-lg-6 col-md-8" style ="height:300px; background:green;" > Блок №1div > <div class ="col-lg-3 col-md-4" style ="height:100px; background:orange;" > Блок №2div > <div class ="clearfix visible-md-block" >Макет сайта для устройства с крохотным экраном (width <768px) состоит из 3 блоков, которые расположены вертикально и занимают всю ширину контейнера.
<div class ="container" > <div class ="row" > <div class ="col-lg-6 col-md-8 col-sm-12 col-xs-12" style ="height:300px; background:green;" >Примечание: Для устройств с очень маленькой шириной экрана (<768px) блоки по умолчанию всегда занимают всю ширину рабочей области экрана (col-xs-12) и располагаются один под другим как в нашем примере. Настраивать макет для таких устройств имеет смысл, если макет отличается от вышесказанного.
<div class ="container" > <div class ="row" > <div class ="col-lg-6 col-md-8 col-sm-12" style ="height:300px; background:green;" > Блок №1Twitter Bootstrap 3 содержит адаптивные служебные классы, которые позволяют включить отображение элементов только на определённых устройствах, размеры экранов которых попадают в соответствующий диапазон.
В Twitter Bootstrap 3.2 добавлена поддержка свойства CSS display для класса.visible . Новая возможность позволяет задавать видимость таким элементам, как inline , block и inline-block на различных экранах. Например, класс.visible-md-block включает видимость элемента, если он является блочным (block) и текущая ширина рабочей области окна браузера соответствует диапазону md (width >=992px и <1200px).
Описание | |
---|---|
.visible-xs-* | Делает элемент видимым только на устройствах с очень маленьким экраном, у которых ширина экрана меньше 768px. На других устройствах эти элементы не видимы. |
.visible-sm-* | Делает элемент видимым только на устройствах, имеющих экран шириной больше или равно 768px (т.е. ≥768px), и меньше чем 992px. На других устройствах эти элементы не видимы. |
.visible-md-* | Делает элемент видимым лишь на устройствах, имеющих экран шириной больше или равно 992px (т.е. ≥992px), и меньше 1200px. На других устройствах эти элементы не видимы. |
.visible-lg-* | Делает элемент видимым только на устройствах, имеющих экран шириной больше или равно 1200px (т.е. ≥1200px). На других устройствах эти элементы не видимы. |
Примечание: Вы также можете совместно использовать эти классы для того, чтобы элементы были видны на нескольких устройствах. Например, вы можете применить класс.visible-xs-* и.visible-md-* на любой блок, чтобы сделать его видимым на устройствах и с очень маленьким и с средним экраном.
Подобным образом, вы можете использовать ниже перечисленные служебные классы, чтобы скрыть отображение элементов на определенных устройствах.
Совет: Вы также можете совместно использовать эти классы, чтобы блоки не были видны на нескольких устройствах. Например, вы можете применить классы.hidden-xs и.hidden-md к блоку на веб-странице, чтобы сделать этот блок невидимым на устройствах с очень маленьким и средним экраном.
<p class ="visible-xs-block" > Это параграф будет виден только на смартфонах. p > <p class ="visible-sm-block" > Это параграф будет виден только на планшетах. p > <p class ="visible-md-block" > Это параграф будет виден только на устройствах со средним размером экрана. p > <p class ="visible-lg-block" > Это параграф будет виден только на устройствах с большим экраном. p >Подобно обычным адаптивным классам Twitter Bootstrap 3, можно использовать следующие служебные классы, чтобы отображать или скрывать определенные блоки при печати веб-страниц.