Что такое сетка бутстрап? Блочная система · Bootstrap на русском Что такое сетка.

Мощная система гибких сеток, предоставляющая преимущества для пользователей мобильных устройств, для удобной верстки и расположения элементов любых видов и размеров. Используется система «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 . Добавляйте любое количество простых классов для каждого брейкпойнта, и каждая колонка будет одинаковой ширины.

1 из 2 2 из 2 1 из 3 2 из 3 3 из 3

Колонки одинаковой ширины могут быть представлены в виде строк, но тут может помешать баг , который нуждается в добавлении аттрибута flex-basis или border . Наш пример работает благодаря установленному значению border ; вы можете сделать то же самое: .col { border: 1px solid transparent; } . Есть иной способ: вы можете добавить flex-basis к ширине колонки, т.е. .col { flex: 1 0 50%; } .

Колонка Колонка Колонка Колонка

Установка ширины одной колонки

Авто-расположение колонок в сетке флексбокса также дает возможность установить ширину одной колонки, при этом остальные «родственные» колонки автоматически изменят свой размер вокруг нее. Вы можете использовать предустановленные классы сеток (как показано внизу), миксины или инлайн-ширину. Заметим, что другие колонки будут изменять размер независимо от ширины центральной колонки.

2 из 3 (широкая)

1 из 3 2 из 3 (широкая) 3 из 3 1 из 3 2 из 3 (широкая) 3 из 3

Содержимое адаптивной ширины

Используйте классы col-{breakpoint}-auto для создания колонок, изменяющих свою ширину по ширине содержимого.

Содержимое адаптивной ширины

1 из 3 3 из 3 1 из 3 Содержимое адаптивной ширины 3 из 3

Мультиряд одинаковой ширины

Создавайте колонки одной ширины, которые охватывают множественные ряды, добавлением.w-100 туда, где необходимо сместить вниз на новую строку. Делайте их адаптивными, применяя.w-100 вместе с некоторыми адаптивными утилитами отображения .

col col col col

Адаптивные классы

Сетка Bootstrap включает 5 «ярусов» предопределенных классов, используемых для построения сложного адаптивного контента. Адаптируйте размеры своих колонок для правильного их отображения на всех видах и размерах устройств.

Все брейкпойнты

Для сеток, которые выглядят и располагаются одинаково на всех устройствах любого размера, используйте классы.col и.col-* . Определите именованный класс с цифрой, когда вам нужна колонка определенного размера, во всех остальных случаях свободно пользуйтесь.col .

col col col col col-8 col-4

По горизонтали

Используя один набор из классов.col-sm-* , вы можете создать базовую сетку, которая вначале сложена по вертикали, а потом ее колонки становятся горизонтальными (на экстрамалых девайсах).

col-sm-8 col-sm-4 col-sm col-sm col-sm

Ищите и создавайте нужное

Не хотите, чтобы ваши колонки шли в одном порядке? Используйте комбинацию разных классов для каждого яруса. Смотрите пример внизу.

Col-12 .col-md-8

Col-6 .col-md-4

.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 .col-6 .col-6

Выравнивание

Используйте утилиты гибкой центровки для вертикальной и горизонтальной центровки колонок.

Вертикальное выравнивание

Одна из трёх колонок

Одна из трёх колонок Одна из трёх колонок Одна из трёх колонок Одна из трёх колонок Одна из трёх колонок Одна из трёх колонок Одна из трёх колонок Одна из трёх колонок Одна из трёх колонок

Одна из трёх колонок

Одна из трёх колонок Одна из трёх колонок Одна из трёх колонок

Горизонтальное выравнивание

Одна из двух колонок

Одна из двух колонок Одна из двух колонок Одна из двух колонок Одна из двух колонок Одна из двух колонок Одна из двух колонок Одна из двух колонок Одна из двух колонок Одна из двух колонок Одна из двух колонок

Без пробелов между колонками

Пробелы между колонками в наших предустановленных классах можно удалить с помощью класса.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

.col-12 .col-sm-6 .col-md-8 .col-6 .col-md-4

Обертка колонки

Если больше 12-ти колонок разместить в одном ряду, каждая дополнительная колонка обернется в новую строку.

Col-4
Пооскольку 9 + 4 = 13 > 12, этот div шириной 4 колонки «обернется» в новую строку как смежный юнит.

Col-6
Последующие столбцы продолжаются вдоль новой строки.

.col-9 .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-3

Col-6 .col-sm-4

.col-6 .col-sm-4 .col-6 .col-sm-4 .col-6 .col-sm-4 .col-6 .col-sm-4

Изменение порядка элементов «Гибкий» порядок

Используйте классы.order- - для контроля над визуальным порядком вашего контента. Эти классы «отзывчивы», так что вы можете задать порядок с помощью order брейкпойнта (например, .order-1.order-md-2). Он поддерживает 1 для 12 через все 5 ярусов.

Первый, но неупорядоченный

Второй, но последний

Третий, но первый

First, but unordered Second, but last Third, but first

Также существует отзывчивый класс.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-6 .offset-md-3

.col-md-4 .col-md-4 .offset-md-4 .col-md-3 .offset-md-3 .col-md-3 .offset-md-3 .col-md-6 .offset-md-3

Col-sm-5 .col-md-6

Col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

Col.col-sm-6.col-md-5.col-lg-6

Col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

.col-sm-5 .col-md-6 .col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0 .col.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 , чтобы заставить «детские» колонки отодвинуться одна от другой. Level 2: .col-8 .col-sm-6 Level 2: .col-4 .col-sm-6

«Примеси» SASS

Используя исходные файлы 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 ( Main content Secondary content Настройка сеток

Изменяя встроенные переменные 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 и не в %).

01.06.2016

Всем привет!
Продолжаем изучать основы «bootstrap 3» . Пришло время познакомиться в «bootstrap 3» с таким понятием как сетка.
С помощью сетки вы сможете создать свой первый адаптивный каркас сайта (веб-страницы).
Итак, сетка Bootstrap состоит из строк и колонок.

Прежде чем создать колонки, нужно прописать строку. Для этого достаточно прописать тег div с классом «row ».

... здесь будут колонки...

Итак, вначале пишется строка, а в строке уже строятся колонки.

1. Создаем строку:

... здесь будут колонки... ... здесь будут колонки...

2. Создаем колонки (сетку):

Сетка Bootstrap состоит из 12 одинаковых по ширине колонок.
При необходимости колонки можно объединить и разместить в нужной позиции.

Чтобы создать колонки, нужно прописать внутри «row » класс
«col-(*1 )-(*2 ) ».
Там, где (*1 ) указываем, для каких групп устройств нужно выполнить (см. таблицу 1 ).
Там, где (*2 ) указываем число (количество колонок)
(см. таблицу 2 ).

(табл. 1 ) Таблица разметки Bootstrap для различных групп устройств

Давайте рассмотрим до этого момента на примере.
Смотря на таблицу, мы можем создать колонки (построить сетку) для различных групп устройств (мобильных телефонов, планшетов, ПК и т.д.).

Например:

блог сайт

Таким вот образом мы указываем, для каких устройств мы хотим создать колонки.

Теперь разберемся, что такое (*2 ). Так как я уже говорил об этом выше, это число, обозначающее количество колонок
(см. таблицу 2 ).

(табл. 2 ) Схема сетка Bootstrap3

На таблице можно увидеть, что сетка Bootstrap состоит из 12 одинаковых по ширине колонок.
Чтобы указать 12 одинаковых колонок для всех устройств, нужно вместо (*2 ) указать цифру, которая подходит. Но помните, что общая сумма должна получиться 12.

Смотрим пример:

блог сайт Таблица разметки Bootstrap

Чтобы вы поняли мной сказанные слова о том, что общая сумма должна быть равна 12, сделаем арифметический подсчет.
Смотрим на строки №2 и №3.

○ col-lg-12 и col-lg-12 . (размер экрана ≥1200px ).

Результат:

○ col-md-8 и col-md-4 . (размер экрана ≥992px ).
На экране будет две колонки, так как 8 + 4 =12 (как раз ровное количество, из которого состоит сетка).
Левая часть объединит в себе 8 колонок, а правая 4.

Результат:

○ col-sm-6 и col-sm-6 (размер экрана ≥768px ).
На экране будет две колонки, так как 6 + 6 =12 (как раз ровное количество, из которого состоит сетка).
Левая часть объединит в себе 6 колонок и правая 6.

Результат:

○ col-xs-12 и col-xs-12 (размер экрана .col-lg-12, .col-lg-3, .col-lg-4, .col-lg-8, .col-md-12, .col-md-3, .col-md-4, .col-md-8, .col-sm-12, .col-sm-3, .col-sm-4, .col-sm-8, .col-xs-12 { border:1px solid #ccc; height:60px; } Блок 1 Блок 2 Блок 3 Блок 4 Меню Контент

Можете посмотреть результат, а заодно проверить с телефона, планшета или ПК, как будет открываться созданный макет.

Bootstrap включает в себя мощную mobile-first блочная система макетов здания любых форм и размеров. Он основан на столбец 12 разметка и имеет несколько уровней, по одному для каждой медиа диапазона запроса . Вы можете использовать его с Sass примесей или наших предопределенных классов.

Как это работает

На высоком уровне, блочная система работает так:

Существует три основных компонента-контейнера, строки и столбцы.
Контейнеры- .container для фиксированной ширины или.container-fluid на полную ширину-центр содержание вашего сайта и помочь выровнять грид Содержание.
«Rows» - горизонтальные группы столбцов, которые обеспечивают выравнивание столбцов.
Контент должен быть помещен в столбцах, и только колонки могут быть непосредственными потомками строк.
Классы столбце указано количество столбцов, которые вы хотите использовать из 12 возможных в ряду. Так что если вы хотите три равные ширины столбцов, нужно использовать.col-sm-4 .
Столбец width устанавливаются в процентах, так они всегда изменчивый и размерами по отношению к родительскому элементу.
Столбцы имеют горизонтальную padding для создания промежутка между отдельными столбцами.
Есть пять грид уровней, по одному для каждой aдаптивные точки останова : сверхмалые, малые, средние, большие, и очень большие.
Грид уровни основываются на минимальной ширине, то есть они применяются к ярусу и всем, кто выше его (например, .col-sm-4 применим для малых, средних, больших, и очень больших устройств).
Вы можете использовать предопределенные грид классов или Sass примеси для более семантической разметки.

Звучит хорошо? Отлично, давайте перейдем к видя все это в пример.

Пример быстрого запуска

Если вы используете Bootstrap скомпилированный CSS, в этом примере вы хотите, чтобы начать с.

One of three columns

One of three columns One of three columns One of three columns

Приведенный выше пример создает три равные ширины столбцов на малых, средних, больших, и очень больших устройств, используя наш . Эти столбцы по центру страницы с родителем.container .

Функционал разметки

При Bootstrap использует em s или rem s для определения большинства размеров, px s применяются для грид точки останова и ширины контейнера. Это происходит потому, что Ширина области просмотра в пикселях и не меняется с размером шрифта .

Смотри как аспекты Bootstrap блочная система работают на нескольких устройствах с таблица.

Сверхмалые
.col-xs-6 .col-md-4 .col-xs-6 .col-md-4 .col-xs-6 .col-md-4 .col-xs-6 .col-xs-6

Пример: Мобильные, планшеты, настольные

Постройте предыдущий пример, создав еще более динамичные и мощные макеты для планшета.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-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

Пример: Колонка wrapping

Если более 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.

.col-xs-9 .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 .col-xs-6 .col-sm-3

В дополнение к очистке столбца на адаптивных точках, вам может понадобиться сброс offsets, pushes, или pulls . Смотрите это в действии на

Всем привет, друзья! В середине 2013 года вышел Bootstrap 3, который за прошедшие годы неплохо зарекомендовал себя как удобный, расширяемый CSS каркас для быстрого создания адаптивных макетов. Миллионы сайтов успешно используют этот фреймворк и мы уже порядком привыкли к нему.

Класснуть

Запинить

18 января 2018 года случилось важное событие - вышла из беты долгожданная версия Bootstrap 4 , основанная на использовании модели Flexbox для разметки, которая в настоящее время уже имеет поддержку всех современных браузеров и является более удобной и гибкой для разработчиков, нежели классическая модель разметки, основанная на Float. Теперь с полной уверенностью можно сказать, что на «Флексах» не можно, а НУЖНО верстать!

Дополнительные материалы урока Bootstrap 4

Все примеры урока вы можете потестировать самостоятельно: Скачать архив

Более подробно ознакомиться с документацией Bootstrap 4 вы можете на оф. сайте ;

Последний стартер, включающий Bootstrap 4: OptimizedHTML 5 .

Сегодня мы подробно разберем работу с сеткой Bootstrap 4, по ходу дела сравнивая её со старой версией. Данный урок будет полезен вам не только если вы новичок и знакомитесь с Bootstrap, но и в том случае, если вы опытный разработчик и хотите изучить все правила и нюансы верстки с использованием сетки Bootstrap 4 и Flexbox инструментов, входящих в её состав.

1. Основные параметры сетки по-умолчанию

По-умолчанию сетка Bootstrap 4 очень похожа на сетку третьей версии, однако появились некоторые важные отличия.

Из таблицы основных опций мы можем заметить явные отличия от сетки третьей версии. Теперь отсутствует префикс класса «.col-xs-», отвечающий за самые маленькие разрешения, вместо него указывается упрощенный префикс «.col-». Можно ошибочно подумать, что префикс «.col-» отвечает за минимальные разрешения мобильных устройств, однако это не совсем так. Помимо всего прочего, префикс «.col-» - это одно из важнейших новшеств Bootstrap 4. Это класс, который отвечает за автоматическую разметку колонок на любом разрешении. Но об этом позже.

За малые разрешения (small) отвечает префикс «.col-sm-» с медиа-запросом от 576 пикс. Ширина контейнера составляет 540 пикс. Средние разрешения отрабатываются от 768 пикс. Ширина контейнера - 720 пикс. Большие разрешения работают с разрешения устройств от 992 пикс. Ширина контейнера - 960 пикс. И самые большие - от 1200 пикс. Ширина контейнера фиксируется на значении 1140 пикс.

Обратите внимание, что максимальные значения медиа-запросов имеют неточные значения с дробной частью «.98» в пикселях. Это заметно при выборе Desktop First метода верстки, где максимальная ширина медиа-запроса ограничена. Например, при компиляции Sass «+media-breakpoint-down(lg)» мы получим «@media (max-width: 1199.98px)». Здесь 0.02 пикселя освобождаются для старта следующего медиа-запроса. Имейте это ввиду. В следующих выпусках «Джедай верстки 8» мы рассмотрим этот и множество других моментов из этого урока на реальном примере.

2. Автоматическая разметка колонок 2.1 Колонки одинаковой ширины

С помощью нового универсального класса «.col» можно указать до 12 колонок в ряду (родитель «.row»), ширина которых будет автоматически вычислена в зависимости от количества элементов и будет равна.

Например:

2.2 Установка ширины одной колонки

Вы также можете явно установить ширину одной колонки, а остальные оставить автоматическими.

1 из 3 2 из 3 (широкое) 3 из 3 1 из 3 2 из 3 (широкое) 3 из 3

В данном примере второй элемент в третьем ряду имеет класс «.col-6» и второй элемент во втором ряду имеет класс «.col-5», которые занимают соответствующее количество колонок на всех разрешениях экрана. Ширина остальных колонок является отзывчивой и вычисляется автоматически, занимая всё оставшееся пространство.

2.3 Контент переменной ширины

Можно использовать класс «col-{breakpoint}-auto», чтобы определить контент с переменной шириной, в зависимости от занимаемого пространства содержимым колонки. Где breakpoint - размер экрана (xl, lg, md или sm).

1 из 3 Контент переменной ширины 3 из 3 1 из 3 Контент переменной ширины номер два 3 из 3

Здесь мы видим, что две центральные колонки занимают ширину, соответствующую ширине содержимого, однако в первом ряду благодаря классу «.justify-content-sm-center» у «.row» весь ряд центрируется и общая ширина зависит только от ширины центральной колонки, в то время, как второй ряд растягивается на всю доступную ширину, но вторая колонка остается фиксированной по ширине содержимого.

2.4 Мульти-ряд

Благодаря Bootstrap 4 вы можете сделать в одном ряду несколько строк (переносов). Реализовать это можно с помощью класса «.w-100», который очень похож на тег «br» и по-сути просто делает перенос колонок на новую строку.

col col col col col

Обратите внимание, что данный класс является частью дополнительных возможностей Bootstrap 4, которые подключаются к проекту отдельно в случае использования Sass версии проекта Bootstrap и находятся в папке «scss/utilities». Вы также можете подключить другие плагины из этой папки к вашему проекту по необходимости. 3. Адаптивные классы 3.1 Брейкпоинты

Очень интересная возможность Bootstrap 4 - возможность задавать универсальные колонки, которые будут отображаться на всех разрешениях. Это упомянутый ранее класс «.col». Кроме того, можно определить класс, указывающий конкретное количество колонок, занимаемое содержимым - это классы с префиксом «.col-{число колонок}», например «.col-6» говорит нам о том, что содержимое займёт 6 колонок из 12. В случае, когда конкретное количество задавать не обязательно, можно смело использовать универсальный класс «.col».

col col col col col-8 col-4

3.2 На мобильных устройствах

Вы можете использовать префикс класса «.col-sm-{количество занимаемых колонок}» для того, чтобы задать базовую сетку на всех разрешениях, кроме самых маленьких. На небольших экранах колонки такой сетки будут складываться друг под друга. На разрешениях больше - будут занимать столько места, сколько вы определили в классах.

col-sm-8 col-sm-4 col-sm col-sm col-sm

Здесь мы видим, что первый ряд на устройствах с разрешением более «sm», то-есть больше, чем 576 пикс. разбивается на 2 колонки - шириной 8 и 4 из 12-ти соответственно. Ширина колонок во втором ряду вычисляется автоматически, но на самых малых разрешениях эти колонки также складываются друг под друга, благодаря классу «.col-sm».

3.3 Создание сложной комбинированной сетки

С помощью Bootstrap вы можете создавать любые комбинации колонок при создании сетки. Для каждой колонки можно задать любое поведение на различных разрешениях с помощью адаптивных классов. Здесь отличия от третьей версии - только в наименованиях классов.

.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 .col-6 .col-6

4. Выравнивание

Bootstrap 4 основан на «флексах» и дарит нам все возможности данной модели, которые доступны в простых готовых классах. В числе возможностей - вертикальное и горизонтальное выравнивание.

4.1 Вертикальное выравнивание Верх Верх Верх Середина Середина Середина Низ Низ Низ

Помимо управления выравниванием через родительский «.row», можно выравнивать колонки, задавая им соответствующие классы:

Верх Середина Низ

4.2 Горизонтальное выравнивание

Кроме того, Bootstrap 4 имеет в своём арсенале инструменты для горизонтального выравнивания колонок при помощи префикса «.justify-content-» у «.row».

row justify-content-start row justify-content-start row justify-content-center row justify-content-center justify-content-end justify-content-end justify-content-around justify-content-around justify-content-between justify-content-between

4.3 Удаление полей между колонками

Очень часто встречаются ситуации, когда необходимо убрать поля между колонками. Например, если вы создаете галерею и элементы должны быть расположены вплотную, например так:

Для этого достаточно у элемента «.row» задать дополнительный класс «.no-gutters».

col-6 col-sm-4 col-md-4 col-6 col-sm-4 col-md-4 col-6 col-sm-4 col-md-4 col-6 col-sm-4 col-md-4 col-6 col-sm-4 col-md-4 col-6 col-sm-4 col-md-4 col-6 col-sm-4 col-md-4 col-6 col-sm-4 col-md-4 col-6 col-sm-4 col-md-4

4.4 Перенос колонок на новую строку

Если ряд (.row) заполняется суммарным количеством колонок более 12-ти, последующая колонка переносится на новую строку.

.col-9 .col-4
9 + 4 = 13 колонок - это больше 12. Данный элемент шириной в 4 колонки будет перенесён на новую строку. .col-6
Следующие колонки расположатся вдоль строки.

Здесь всё также, как в 3-й версии Bootstrap. 5. Порядок элементов 5.1 Классы порядка элементов

Можно использовать специальные классы с префиксом «.order-» для определения порядка элементов. Если вы знакомы с Flex-вёрсткой, данные правила будут вам знакомы. Bootstrap 4 даёт возможность задавать порядок элементов с помощью классов. Можно задавать порядок напрямую (.order-1.order-md-2):

Первый неупорядоченный элемент

Или можно использовать специальные классы, которые определяют порядок первого и последнего элементов (.order-first, .order-last):

Первый неупорядоченный Второй, упорядоченный как последний Третий, упорядоченный как первый

5.2 Смещение колонок

По аналогии с Bootstrap 3, в 4-й версии также есть возможность горизонтального смещения колонок, однако реализовано это несколько иначе и для этого есть специальные классы с префиксом «.offset-».

5.2.1 Классы смещения

Сдвигать колонку вправо можно, используя классы «.offset-md-*», которые увеличивают левый отступ на * количество элементов. Из примера ниже, класс «.offset-md-2» сдвинет колонку «.col-md-4» на 2 колонки вправо, остальные примеры работают по аналогии:

.col-md-4 .col-md-4 .offset-md-4 .col-md-3 .offset-md-3 .col-md-3 .offset-md-3 .col-md-6 .offset-md-3

Можно сбрасывать отступ на всех разрешениях благодаря классу «.offset-*-0», где * - это sm, md, lg или xl. 6. Вложенность

Весьма ожидаемо, что Bootstrap 4 поддерживает вложенность элементов. Работает здесь всё также, как в третьей версии - чтобы вложить колонки в другие, необходимо создать дочерний класс «.row» и уже в него вкладывать колонки.

Уровень 1: «.col-sm-9» Уровень 2: «.col-8 .col-sm-6» Уровень 2: «.col-4 .col-sm-6»

Мы рассмотрели основные особенности работы с сеткой Bootstrap 4. Если у вас есть желание более подробно ознакомиться со всеми возможностями фреймворка, рекомендую изучить документацию на официальном сайте.

В следующем уроке мы рассмотрим настройку Bootstrap сетки под ваш конкретный проект на примере использования в стартовом шаблоне OptimizedHTML 4. А именно настройку, работу с переменными отступов, брейкпоинтов, количества колонок и прочего.

В этой статье познакомимся с классами фреймворка Bootstrap 3, предназначенными для создания адаптивного «скелета» (макета) сайта.

«Строительные» элементы сетки Bootstrap 3

Сетка Bootstrap состоит из «строительных» элементов. Основные - это обёрточные контейнеры , ряды , адаптивные блоки и отзывчивые служебные классы .

По существу сетка - это просто список предопределённых классов, с помощью которых можно задать необходимое поведение блокам (HTML элементам) и построить с их помощью определённый адаптивный макет сайта .

Обёрточные контейнеры

Обёрточный контейнер - это «строительный» элемент сетки, с которого начинается создание макета для всей страницы или её части (например, шапки, основного меню, основной области, футера) в зависимости от стратегии разработки.

Контейнер в Bootstrap бывает адаптивно-фиксированным или адаптивно-резиновым .

Первый (адаптивно-фиксированный контейнер ) характеризуется тем, что он имеет постоянную ширину в пределах некоторого диапазона ширины viewport (области просмотра).

В следующей таблице приведено то, какую ширину имеет адаптивно-фиксированный контейнер при той или иной ширине области просмотра (viewport) браузера:

Ширина viewport Ширина контейнера (container)

= 768px и = 992px и ...

При разработке макета сайта обычно не применяют вкладывание одних обёрточных контейнеров Bootstrap в другие .

Итак, первый «строительный» элемент сетки Bootstrap – это обёрточный контейнер. Он определяет ширину макета на различных viewport, а также выполняет его центрирование (только адаптивно-фиксированный контейнер) относительно левого и правого края рабочей области вкладки или окна браузера.

Следующий строительный элемент – это ряд (блок div с классом row). Ряд - это специальный блок, который применяется только для оборачивания других строительных элементов (адаптивных блоков). Его основное назначение - это нейтрализация положительного внутреннего отступа (15px слева и справа) обёрточного контейнера или адаптивного блока .

Пример формирования внутренних отступов:

Container (+15px) -> row (-15px) -> col (+15px) -> контент container (+15px) -> row (-15px) -> col (+15px) -> row (-15px) -> col (+15px) -> контент *col - это адаптивный блок

Пример показывает, что независимо от того в каком адаптивном блоке находится контент , он всегда будет иметь правильный отступ от края (т.е. 15px слева и справа).

Следующий «строительный» элемент сетки Bootstrap – это адаптивный блок (div с классом col-?-?).

Адаптивные блоки - это элементы сетки Bootstrap, которым установлен один или несколько классов col-?-? . Данные блоки являются основными «строительными» кирпичиками, именно они и формируют необходимую структуру.

Ширина адаптивному блоку задаётся в связке с типом устройства . Это означает, что адаптивный блок на разных устройствах может иметь разную ширину. Именно из-за этого данный блок и называется адаптивным .

Как же осуществляется установка ширины адаптивному блоку? Установка ширины адаптивному блоку, которую он должен иметь на определённом устройстве, задаётся по умолчанию числом от 1 до 12 (количеством колонок Bootstrap). Данное число указывается вместо второго знака? в классе col-?-? .

Данное число (по умолчанию от 1 до 12) определеяет какой процент от ширины родительского элемента должен иметь адаптивный блок.

Например, число 1 - устанавливает адаптивному блоку ширину, равную 8,3% (1/12) от ширины родительского блока. Число 12 - ширину, равную 100% (12/12) от ширины родительского блока.

Кроме указания ширины адаптивному блоку необходимо ещё указать и тип устройства (вместо 1 вопроса). Класс устройства будет определять то, на каком viewport будет действовать эта ширина. В Bootstrap 3 различают 4 основных класса. Это xs (ширина viewport >0) , sm (ширина viewport >= 768px), md (ширина viewport >= 992px) и lg (ширина области просмотра браузера >=1200px).

Например, адаптивный блок с классом col-xs-12 col-sm-6 col-md-4 col-lg-3 будет иметь на устройстве xs ширину 100% (12/12), на sm - 50% (6/12), на md - 33,3% (4/12), на lg - 25% (3/12).

Кроме этого следует обратить внимание на то, что адаптивные блоки не ограничивают свой диапазон. Т.е. если вы в атрибуте class адаптивного блока указали xs , но не указали sm , то его действие распространится и на область действия этого диапазона.

Например, адаптивный блок с классом col-xs-6 col-lg-3 будет иметь на устройствах xs , sm и md ширину 50% (6/12), на lg - 25% (3/12).

Адаптивный блок, также как и контейнер, задаёт положительные отступы слева и справа по 15px для контента, который в него будет помещён.

В правильном макете, построенном на основе сетки Bootstrap, адаптивный блок должен всегда иметь в качестве своего родителя ряд .

Например, разобьём блок на 3 равные колонки, которые на xs будут отображаться вертикально, а на sm и выше горизонтально:

... ... ...

Например, расчитаем, доступную ширину под контент для первого и второго блока:

1 блок... 2 блок...

Контрольные точки Доступная ширина 1 блока Доступная ширина 2 блока

320px - 749.98px		от 290px (320px - padding (30px)) до 719.98px (749.98px - padding (30px))
750px - 969.98px		720px (750px - padding (30px))
970px - 1169.98px	616,7px (970px*8/12 - padding (30px))	293,3px (70px*4/12 - padding (30px))
1170px и больше	750px (1170px*8/12 - padding (30px))	360px (1170px*4/12 - padding (30px))

Адаптивные блоки располагаются в родительском элементе один за другим строчками. В одну строчку помещаются адаптивные блоки с суммарным количеством колонок не больше 12 (по умолчанию). Т.е. блоки, которые не помещаются в первую строку, располагаются в следующей строке и т.д.

Как располагаются адаптивные блоки?

В Bootstrap 3 адаптивные блоки являются плавающими (float:left). Это необходимо учитывать при создании макета веб-страницы.

Перед блоком, который должен начинаться с новой строки обязательно необходимо расположить пустой div элемент с классом clearfix . Ещё его необходимо скрыть для устройств, на которых это действие выполнять не нужно. Осуществляется скрытие блока с помощью соответствующих классов, приведённых ниже.

Ещё у плавающих блоков есть одна особенность. Например, если в вышеприведённом примере высота 1 блока будет выше, чем 2 блока. То 3 блок будет располагаться не на новой строчке, а "прилипнет" к правой стороне 1 блока.

Чтобы этого не допустить, необходимо добавить блок с классом clearfix и сделать его видимым для необходимых устройств (например, на md и lg):

1 блок... 2 блок... 3 блок...

Основной принцип создания макета

Основной принцип создания макета заключается во вкладывании одних адаптивных блоков в другие. При этом их ширина - это всегда относительный параметр, который задаётся в процентном отношении (количеством колонок) от ширины родительского блока. Т.е. на любом уровне вложенности, например, ширина адаптивного блока в 6 колонок - это всегда 50% (6/12*100%) от ширины родительского элемента.

Например, разобьём некоторый блок (основной) на 4 блока (2 в первой строке и 2 во второй). Для простоты, макет создадим не адаптивный:

1 блок... 2 блок... 3 блок... 4 блок...

Создадим макет 3 блока (3 x 2):

1 блок... 2 блок... 3-1 блок... 3-2 блок... 3-3 блок... 3-4 блок... 3-5 блок... 3-6 блок... 4 блок...

Нетрудно заметить, что разметка вложенного адаптивного блока выполняется также как и основного. Это означает, что не имеет разницы, какой уровень вложенности имеет блок, создание его макета выполняется по тем же правилам.

Классы для адаптивного смещения блоков

В Bootstrap имеются адаптивные классы (col-?-offset-?), с помощью которых вы можете сдвинуть блок на определённое количество колонок вправо. Первый? необходимо заменить на тип устройства (xs , sm , md или lg). Второй? на количество колонок.

Например, зададим блоку на md устройствах ширину 8 колонок и расположим его в строке по центру (т.е. сдвинем его на 2 колонки вправо):

1 блок...

Кроме инструментов для адаптивного смещения блоков, в Bootstrap 3 есть ещё специальные классы, с помощью которых можно изменить порядок следования элементов в пределах одной строки.

Отзывчивые служебные классы Bootstrap 3

Bootstrap 3 содержит адаптивные (служебные) классы, которые позволяют управлять видимостью отображения элементов в зависимости от типа устройства.

Кроме указания устройства (xs , sm , md , lg), на котором будет виден блок, необходимо ещё указать то, как на этом устройстве он должен отображаться. Возможные варианты: inline , block и inline-block .

Класс Описание

visible-xs-?	Делает элемент видимым только на устройствах с очень маленьким экраном xs (ширина viewport =768px и =992px и =1200px). На других устройствах эти элементы не отображаются.

Вместо знака? необходимо указать block , inline или inline-block . Т.е. указать, как данный элемент должен отображаться.

Например, добавление к элементу класса visible-md-block будет означать то, что он будет отображаться только на устройствах, имеющим viewport md (width viewport >=992px и

Похожие публикации