Twitter Bootstrap сетка обеспечивает быстрый и простой способ создания макетов веб-страниц. В отличие от предыдущей сетки системы, которая фиксируется по умолчанию, новую версию Twitter Bootstrap 3 выделяет адаптивная мобильная верстка, расширение до 12 столбцов, при увеличении размера устройства или вида экрана.
Бутрстрап 3 включает предопределенные классы сетки для быстрого создания макета для различных типов устройств — сотовых телефонов, планшетов, настольных ПК и так далее. Например, вы можете использовать .col-xs- класс для создания сетки колонок для дополнительных небольших устройств, таких как сотовые телефоны. Класс .col-sm- для небольших экранов устройств, таких как карманные компьютеры. Класс .col-MD- для средних устройств, таких как десктопные компьютеры и .col-lg- для больших экранов настольных ПК. В следующей таблице приведены некоторые из ключевых особенностей новой системы сетки.
| Особенности Bootstrap 3 Grid System | Дополнительные небольшие устройства (телефоны) (<768px) | Небольшие устройства (таблетки) (≥768px) | Средние устройства (настольные компьютеры) (≥992px) | Большие устройства (настольные компьютеры )(≥1200px) |
|---|---|---|---|---|
| Максимальная ширина контейнера | Отсутствует (авто) | 750px |
970px |
1170px |
| Класс префикс | .col-xs- |
.col-sm- |
.col-md- | .col-lg- |
| Максимальная ширина колонки | Авто |
~ 62px |
~ 81px |
~ 97px |
| Ширина за пределами столбцов | 15 пикселей на каждой стороне столбца (т.е. 30 пикселей ) | |||
В приведенной выше таблице показана одна важная вещь — применяя любой .col-sm-класс, на стиль элемента он будет влиять не только на небольших устройствах, таких как таблетки, но и на средних и крупных устройствах, имеющих размер экрана больше или равным 768px, если .col-md- и .col-lg- класса нет. Аналогично .col-md-класс будет влиять не только на стиль элементов на средних устройствах, но и на больших устройствах, если .col-lg- класс не указан.
Создание сетки с Twitter Bootstrap 3 Grid System
С новым Twitter Bootstrap 3 сеткой можно легко управлять и смотреть, как ваш макет веб-сайта будет показываться на различных типах устройств, которые имеют различные размеры экрана. Давайте рассмотрим следующий пример.
В приведенной выше иллюстрации есть всего 12 колонок контента во всех устройствах, но их размещение меняется в зависимости от размера экрана устройства. В мобильном устройстве макет отображается в виде сетки, которая имеет 1 столбец и 12 строк размещены друг над другом, в то время в таблетке оно отображается как сетка, которая имеет 2 колонки и 6 рядов. Аналогично в устройствах со средним размером экрана, таких как ноутбук и рабочий стол ПК — она предоставляется в виде макета, который имеет 3 столбца и 4 строки. Наконец, в устройствах с большими экранами, макет представляет из себя сетку, которая имеет 4 колонки и 3 ряда.
Теперь возникает вопрос, как мы можем создавать такие адаптивные макеты, используя Twitter Bootstrap. Давайте начнем с средне-размерных устройств — ноутбук или обычный настольный ПК. Наш макет имеет 3 столбца и 4 строки (т.е. 3×4 макет сетки). Вводим следующую разметку:
<div class="container">
<div class="row">
<div class="col-md-4"><p>Box 1</p></div>
<div class="col-md-4"><p>Box 2</p></div>
<div class="col-md-4"><p>Box 3</p></div>
<div class="col-md-4"><p>Box 4</p></div>
<div class="col-md-4"><p>Box 5</p></div>
<div class="col-md-4"><p>Box 6</p></div>
<div class="col-md-4"><p>Box 7</p></div>
<div class="col-md-4"><p>Box 8</p></div>
<div class="col-md-4"><p>Box 9</p></div>
<div class="col-md-4"><p>Box 10</p></div>
<div class="col-md-4"><p>Box 11</p></div>
<div class="col-md-4"><p>Box 12</p></div>
</div>
</div>
Если мы посмотрим приведенный выше пример в ноутбуке или настольном ПК, имеющего экран или окно просмотра шириной больше или равной 992px и менее 1200px, мы увидим 4 строки, где каждая строка имеет 3 равные колонки.
В приведенном выше примере есть одна серьёзная проблема в выравнивании. Если высота любого столбца больше другого, то он не подстроиться под другой должным образом и целостность нарушится. Чтобы исправить это, используйте .clearfix класс и адаптивные служебные классы.
<div class="container">
<div class="row">
<div class="col-md-4"><p>Box 1</p></div>
<div class="col-md-4"><p>Box 2</p></div>
<div class="col-md-4"><p>Box 3</p></div>
<div class="clearfix visible-md-block"></div>
<div class="col-md-4"><p>Box 4</p></div>
<div class="col-md-4"><p>Box 5</p></div>
<div class="col-md-4"><p>Box 6</p></div>
<div class="clearfix visible-md-block"></div>
<div class="col-md-4"><p>Box 7</p></div>
<div class="col-md-4"><p>Box 8</p></div>
<div class="col-md-4"><p>Box 9</p></div>
<div class="clearfix visible-md-block"></div>
<div class="col-md-4"><p>Box 10</p></div>
<div class="col-md-4"><p>Box 11</p></div>
<div class="col-md-4"><p>Box 12</p></div>
</div>
</div>
Поскольку по умолчанию сетка имеет 12 столбцов и в нашем макете сумма каждых трёх столбцов (т.е. col-md-*) равна 12, мы очищаем столбцы после каждого третьего появления. В любом другом случае, где колонки col-md-*различны, мы должны использовать .clearfix после столбца, который делает полную сетку из 12 колонок. Адаптивный служебный класс .visible-md-block делает .clearfix класс действующим только на устройствах среднего размера и она скрытым на других устройствах.
Совет: Для начала нужно выбрать первичное целевое устройство и создать макет для этого устройства, после этого добавлять классы, чтобы сделать дизайн адаптивны для других устройств.
Теперь пришло время, чтобы настроить наш макет для других устройств. Настроим его для планшета. Поскольку на таблет-пк наша разметка отображается как 2×6 сетка (т.е. 2 колонки и 6 строк), нам нужно добавить класс .col-sm-6 на каждый столбец.
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4"><p>Box 1</p></div>
<div class="col-sm-6 col-md-4"><p>Box 2</p></div>
<div class="col-sm-6 col-md-4"><p>Box 3</p></div>
<div class="clearfix visible-md-block"></div>
<div class="col-sm-6 col-md-4"><p>Box 4</p></div>
<div class="col-sm-6 col-md-4"><p>Box 5</p></div>
<div class="col-sm-6 col-md-4"><p>Box 6</p></div>
<div class="clearfix visible-md-block"></div>
<div class="col-sm-6 col-md-4"><p>Box 7</p></div>
<div class="col-sm-6 col-md-4"><p>Box 8</p></div>
<div class="col-sm-6 col-md-4"><p>Box 9</p></div>
<div class="clearfix visible-md-block"></div>
<div class="col-sm-6 col-md-4"><p>Box 10</p></div>
<div class="col-sm-6 col-md-4"><p>Box 11</p></div>
<div class="col-sm-6 col-md-4"><p>Box 12</p></div>
</div>
</div>
Теперь, так как сумма каждых двух столбцов, т.е. col-sm-* равна 12, после каждого второго столбца, следующие другие располагаются ниже.
После очистки для небольших устройств наш окончательный код будет выглядеть так:
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4"><p>Box 1</p></div>
<div class="col-sm-6 col-md-4"><p>Box 2</p></div>
<div class="clearfix visible-sm-block"></div>
<div class="col-sm-6 col-md-4"><p>Box 3</p></div>
<div class="clearfix visible-md-block"></div>
<div class="col-sm-6 col-md-4"><p>Box 4</p></div>
<div class="clearfix visible-sm-block"></div>
<div class="col-sm-6 col-md-4"><p>Box 5</p></div>
<div class="col-sm-6 col-md-4"><p>Box 6</p></div>
<div class="clearfix visible-sm-block"></div>
<div class="clearfix visible-md-block"></div>
<div class="col-sm-6 col-md-4"><p>Box 7</p></div>
<div class="col-sm-6 col-md-4"><p>Box 8</p></div>
<div class="clearfix visible-sm-block"></div>
<div class="col-sm-6 col-md-4"><p>Box 9</p></div>
<div class="clearfix visible-md-block"></div>
<div class="col-sm-6 col-md-4"><p>Box 10</p></div>
<div class="clearfix visible-sm-block"></div>
<div class="col-sm-6 col-md-4"><p>Box 11</p></div>
<div class="col-sm-6 col-md-4"><p>Box 12</p></div>
</div>
</div>
Подобным образом мы можем настроить внешний вид для больших устройств, таких как экран рабочего стола персонального компьютера.
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-3"><p>Box 1</p></div>
<div class="col-sm-6 col-md-4 col-lg-3"><p>Box 2</p></div>
<div class="clearfix visible-sm-block"></div>
<div class="col-sm-6 col-md-4 col-lg-3"><p>Box 3</p></div>
<div class="clearfix visible-md-block"></div>
<div class="col-sm-6 col-md-4 col-lg-3"><p>Box 4</p></div>
<div class="clearfix visible-sm-block"></div>
<div class="clearfix visible-lg-block"></div>
<div class="col-sm-6 col-md-4 col-lg-3"><p>Box 5</p></div>
<div class="col-sm-6 col-md-4 col-lg-3"><p>Box 6</p></div>
<div class="clearfix visible-sm-block"></div>
<div class="clearfix visible-md-block"></div>
<div class="col-sm-6 col-md-4 col-lg-3"><p>Box 7</p></div>
<div class="col-sm-6 col-md-4 col-lg-3"><p>Box 8</p></div>
<div class="clearfix visible-sm-block"></div>
<div class="clearfix visible-lg-block"></div>
<div class="col-sm-6 col-md-4 col-lg-3"><p>Box 9</p></div>
<div class="clearfix visible-md-block"></div>
<div class="col-sm-6 col-md-4 col-lg-3"><p>Box 10</p></div>
<div class="clearfix visible-sm-block"></div>
<div class="col-sm-6 col-md-4 col-lg-3"><p>Box 11</p></div>
<div class="col-sm-6 col-md-4 col-lg-3"><p>Box 12</p></div>
</div>
</div>
Совет: В соответствии с приведенным выше кодом, нет необходимости настраивать расположение для дополнительных небольших устройств, таких как мобильные телефоны. Ведь колонки на дополнительных небольших устройствах всегда горизонтальные и отображаются как один столбец макета сетки по умолчанию.
Адаптивные служебные классы
Вы можете использовать следующие адаптивные классы для того, чтобы управлять видимостью элементов на некоторых устройствах, при уменьшении размеров экрана с определенного диапазона.
В версии фреймворка v3.2.0, класс .visible-*-* для каждой точки идёт в трех вариациях, по одному для каждого CSS отображения: inline, block и inline-block.
| Класс | Описание |
|---|---|
| .Visible-xs- * | Делает элемент видимым только на дополнительных небольших устройствах, имеющих экран шириной менее 768px. Скрытый на других. |
| .Visible-sm- * | Делает элемент видимым только на небольших устройствах, имеющих экран шириной больше или равный 768px (т.е. ≥768px), но меньше, чем 992px. Скрытый на других. |
| .visible-md-* | Делает элемент видимым только на средних устройствах, имеющих экран шириной больше или равный 992px (т.е. ≥992px), но меньше, чем 1200 пикселей. Скрытый на других. |
| .visible-lg-* | Делает элемент видимым только на крупных устройствах, имеющих экран шириной больше или равный 1200px (т.е. ≥1200px). Скрытый на других. |
Совет: Вы можете также смешать эти классы, чтобы сделать элементы видимыми на нескольких устройствах. Например, вы можете применить классы .visible-xs-* и .visible-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>
Подобным образом вы можете использовать эти скрытые служебные классы, чтобы скрыть элементы на некоторых устройствах.
| Класс | Описание |
|---|---|
| .hidden-xs | Скрыть элементы только на дополнительных небольших устройствах, имеющих экран шириной менее 768px. Видимый на других. |
| .hidden-sm | Скрыть элементы только на небольших устройствах, имеющих экран шириной более или равный 768px (т.е. ≥768px), но менее 992px. Видимый на других. |
| .hidden-md | Скрыть элементы только на средних устройствах, имеющих ширину экрана больше или равным 992px (т.е. ≥992px), но меньше, чем 1200px. Видимый на других. |
| .hidden-lg | Скрыть элементы только на крупных устройствах, имеющих экран шириной больше или равный 1200px (т.е. ≥1200px). Видимый на других. |
Совет: Вы можете также смешать эти классы, чтобы сделать элементы, скрытые на нескольких устройствах. Например, вы можете применить классы .hidden-xs и .hidden-md на любом элементе, чтобы сделать его скрытым на дополнительных малых и средних устройствах.
<p class="hidden-xs"> Этот пункт скрыт только на дополнительных небольших устройствах. </p> <p class="hidden-sm"> Этот пункт скрыт только на небольших устройствах. </p> <p class="hidden-md"> Этот пункт скрыт только на средних устройствах. </p> <p class="hidden-lg"> Этот пункт скрыт только на больших устройствах. </p>
Кроме обычных адаптивных классов, вы можете использовать следующие служебные классы, чтобы показать или скрыть определенные элементы для печати на устройствах.
| Класс | Описание |
|---|---|
| .visible-print-block | Скрыть блок элементы для показа, в то время как они будут видимы для печати браузера. |
| .visible-print-inline | Скрыть встроенные элементы для показа, в то время как они будут видимы для печати браузера. |
| .visible-print-inline-block | Скрыть встроенный блок элементов для отображения в браузере, но сделать видимыми для печати. |
| .hidden-print | Скрыть элементы для печати, в то время они будут видны в браузере. |
Классная статья! Очень понятно объяснили.