Стремительно развивающиеся технологии заставляют нас идти в ногу со временем. Если раньше дизайн создавался на чистом HTML и CSS коде, то сегодня время библиотек кода.
Многие фронт энд разработчики, которые ценят свое время, давно уже используют шаблонизаторы, сетчастые структуры, SESS, LESS, Bootstrap и другие решения. Это правильно, зачем усложнять себе жизнь, когда есть готовые коллекции и реализации задач.
Сегодня мы рассмотрим, как просто можно создавать блочные сетки на bootstrap 3.0. Хотя с уверенностью могу сказать, через пол года, нужно будет вникать в новую 4 версию бутстрапа.
Кто еще не знаком с Bootstrap?Bootstrap - это библиотека CSS кода, предоставлена компанией Твиттер и распространяется бесплатно. Значительно упрощает жизнь веб дизайнеру. В архиве прилагается небольшое дополнение в виде js файла. Подробнее об установке и использовании можно узнать на официальном сайте.
Примеры решений: http://getbootstrap.com/components/ - табы, стилизация таблиц, всплывающие окна, навигация, менюшки, вертикальные списки, кнопки, иконки и другие прелести. Тоже на англ. языке.
Что нужно знать прежде о сетках bootstrap?Ранее, во второй версии бутстрапа, были лишь некоторые дополнения для мобильных решений. В третей версии — весь фреймверк изначально адаптирован под различные устройства: мобильные, планшеты, десктопы. Сейчас проясниться:)
Почти весь функционал бутстрапа осуществляется через использование элементарных классов.
Весь код body контента содержится в специальном div блоке. Он может быть фиксированной ширины .container , или полноэкранным.container-fluid .
Сеточная системаСостоит из 12 ячеек, каждая из которых является div блоком, в строке.row.
Теперь посмотрите таблицу ниже, чтобы было легче понимать следующие куски кода.
В зависимости от префикса, мы будет создавать сетку для необходимого устройства.
Внимание! Можно создавать сетку изначально ориентируясь на несколько устройств одновременно. Достигается это путем комбинирования префиксов.
Пример 1. Создадим некие сетки только для десктопных устройств:
.col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-8 .col-md-4 .col-md-4 .col-md-4 .col-md-4 .col-md-6 .col-md-6
Пример 2 . А теперь скомбинируем сетку для десктопа и мобильного одновременно:
.col-xs-12 .col-md-8 .col-xs-6 .col-md-4 .col-xs-6 .col-md-4 .col-xs-6 .col-md-4 .col-xs-6 .col-md-4 .col-xs-6 .col-xs-6
Система сетки BootstrapСистема сетки 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 (для телефонов-экранов менее 768px широкий)
- sm (для планшетов-экранов, равных или больше, чем 768px широкий)
- md (для небольших ноутбуков-экранов, равных или больше, чем 992пкс широкий)
- lg (для ноутбуков и настольных компьютеров-экраны, равные или превышающие 1200px ширину)
Приведенные выше классы можно комбинировать для создания более динамичных и гибких макетов.
Совет: Каждый класс масштабируется вверх, так что если вы хотите установить одинаковую ширину для XS и SM, вам нужно только указать XS.
Системные правила сеткиНекоторые правила системной сетки Bootstrap:
- Строки должны быть размещены в пределах.container (фиксированной ширины) или.container-fluid (полная ширина) для правильного выравнивания и заполнения
- Использование строк для создания горизонтальных групп столбцов
- Содержимое должно быть помещено в столбцы, и только столбцы могут быть непосредственными потомками строк
- Предопределенные классы.row , как и.col-sm-4 доступны для быстрого создания макетов сетки
- Столбцы создают водосточные желоба (промежутки между содержимым столбцов) с помощью заполнения. Это заполнение смещение в строках для первого и последнего столбца с помощью отрицательного поля на.rows
- Столбцы сетки создаются путем указания числа 12 доступных столбцов, которые необходимо охватить. Например, три равных столбца будут использовать три.col-sm-4
- Ширина столбцов в процентах, поэтому они всегда являются жидкими и имеют размер относительно родительского элемента
Ниже приведена базовая структура сетки Bootstrap:
...
Таким образом, чтобы создать макет, необходимо создать контейнер (). Затем создайте строку (). Затем добавьте нужное количество столбцов (тегов с соответствующими.col-*-* классами). Обратите внимание, что числа в.col-*-* должны всегда добавлять до 12 для каждой строки.
Параметры сеткиВ следующей таблице приведены сводные сведения о том, как система Grid Bootstrap работает на нескольких устройствах.
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 для различных устройств.
Система сеток Twitter Bootstrap 3 - это быстрый и легкий путь для создания макета сайта.
Описание системы сеток Twitter Bootstrap 3Сетки Bootstrap применяют при разработке макетов веб-страниц и для создания разметки блоков, в которых необходимо обеспечить правильное расположение элементов. Разрабатывать сетку начинают с контейнера, который имеет фиксированную или плавающую ширину.
Контейнер с фиксированной ширинойКонтейнер с фиксированной шириной ( … ) имеет строго определенную ширину, которая изменяется при изменении ширины рабочей области окна браузера и ориентируется в горизонтальном направлении по центру, с помощью свойств margin-left:auto и margin-right:auto . Также, контейнер задает внутренние отступы слева и справа по 15рх (padding-left:15px и padding-right:15px) для содержимого, которое в него помещено.
Контейнер с плавающей ширинойКонтейнер с плавающей шириной ( … ) занимает всю ширину окна браузера и задает внутренние отступы слева и справа по 15рх (padding-left:15px и padding-right:15px) для содержимого, которое в него помещено.
Размещение рядов внутри контейнераСледующим этапом является размещение рядов (блоки div с классом.row) внутри контейнера. Ширина рядов ( … ) будет равна ширине контейнера, т.к. данный блок имеет отрицательные внешние отступы слева и справа по 15рх (margin-left:-15px и margin-right:-15px).
Размещение блоков внутри рядов BootstrapВнутри ряда помещаются блоки с классом col-*-* , внутри которых размещается содержимое или другие ряды. Ширина блоков с классом col-*-* задаётся в относительной форме с помощью указания количества колонок Bootstrap. Так как ряд в Bootstrap по умолчанию состоит из 12 колонок, то минимальная ширина блока col-*-* равна одной колонке Bootstrap, а максимальная ширина блока col-*-* равна 12 колонкам Bootstrap.
Например, если мы хотим создать в ряду 3 блока с одинаковой шириной, то нам необходимо установить ширину этих блоков равным 4 колонкам Bootstrap ( ... ).
Расчёт ширины блоковНапример: Рассчитать ширину блока в пикселях можно следующим образом:
[Ширина блока] = [Ширина колонки Bootstrap]*[Количество колонок, из которых состоит блок],
где: [Ширина колонки Bootstrap] = [Ширина ряда (row)] / 12.
[Ширина колонки Bootstrap] = 970 / 12 = 81px.
[Ширина блока] = 81 * 4 = 324px.
Для создания макетов веб-страниц под различные устройства (смартфоны, планшеты, ноутбуки и персональные компьютеры) необходимо воспользоваться предопределенными классами сеток Twitter Bootstrap 3.
Например, вы можете использовать класс.col-xs-* для создания сетки для устройств с маленьким экраном, таких как смартфоны. Точно так же класс. col-sm-* - для устройств с небольшим экраном, таких как планшеты, класс.col-md-* - для устройств с экраном средних размеров, таких как персональные компьютеры и ноутбуки, а так же, класс.col-lg-* - для устройств с большим экраном.
Следующая таблица обобщает некоторые ключевые особенности новой системы сеток Bootstrap 3.
Экстра-маленькие девайсы (Смартфоны) | Маленькие девайсы (Планшеты) | Средние девайсы (Персональные компьютеры) | Большие девайсы (Персональные компьютеры) | |
Разрешение | 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- .
Вы можете запустить пример в любом онлайн-редакторе кода. На экране у вас отобразится макет сайта с навигационной панелью с левой стороны и основным блоком с выделенными статьями с правой.
Однако вы можете видоизменить дизайн и разместить меню сверху, а контент по центру, или же подобрать другие варианты в существующих в сети генераторах. Обязательно поиграйтесь с четырьмя выше перечисленными классами и сравните поведение сайта при разных параметрах.
Если вам понравился материал публикации, то подписывайтесь на мой блог и рассказывайте о нем друзьям. До скорой встречи! Пока-пока!
Top