Выравнивание и колоночная верстка
Размещать картинки в статье можно стандартно, чередуя с текстом и другими элементами. А можно выбрать нестандартный способ — колоночную верстку. С ее помощью можно также верстать текст и совмещать текст с картинками.
Выравнивание на разных площадках
По центру. Независимо от общего выравнивания справочной, картинки по умолчанию выравниваются по центру.
Если в статье используются картинки разного размера, маленькие картинки лучше размещать на серой подложке, чтобы не было ощущения, что у каждой картинки свой отступ относительно текста. Подробнее о том, как это сделать, читайте в разделе «Постобработка».
По левому краю. В помощи и гайдах картинки выравниваются по левому краю. Из-за этого широкоформатная картинка может уехать за границы контентной области вправо. Рекомендуем для этих площадок использовать картинки на ширину контентной области — 709 px.
Колоночная верстка
Используйте колоночную верстку, когда нужно сравнить картинки или текст между собой, а также показать разные варианты.
Показывайте сравнение в явном виде. Объекты на картинках должны быть соразмерны, фон изображений — одинаковый, как и примененные к картинкам стили. Если уместно, используйте подписи.
Неважно, какой ширины и высоты будут картинки, главное — чтобы эти параметры были одинаковыми у всех картинок в строке.
Если картинок несколько и они разного размера, можно две картинки помещать в одну колонку, а третью — в другую.
Колоночная верстка может применяться не только к картинкам, но и к тексту — например, когда нужно сравнить правильный и неправильный вариант. Оформлять это таблицей со стандартной шапкой — не самое удачное решение. В таблице мы ограничены стандарными стилями: у нас не получится сделать крупные заголовки.
Обратите внимание: если мы приводим несколько примеров, они должны соотноситься между собой так же, как в таблице.
Еще один случай — если рядом с графикой нужно поставить текст.
Колонки должны быть примерно одной высоты. Текст и картинка выравниваются по центру относительно друг друга. Если картинка по высоте меньше текста, лучше располагать ее справа.
Контентная область — 12 колонок. Если нужно, чтобы контент встал в 2 большие колонки, то используйте пропорции 6:6, а если в 3 колонки — 4:4:4.
Колоночная верстка задается с помощью кода:
Атрибуты:
- row — колонка;
- col-sm-n— сколько колонок в сетке должен занимать контент.
Код вставляем через источник в нужное место статьи:
В редакторе он будет выглядеть так:
Иногда картинка на 6 колонок выглядит слишком большой в высоту. Тогда можно разместить её на 4 или 5 колонок, и она уменьшится в размерах по высоте и ширине. В коде мы прописываем пропуск для первых колонок.
offset-sm-n— сколько колонок нужно отступить.
