Поиск сообщества

Модуль колонки, в отличие от модуля сеток, предоставляет классы, которые активируют макеты, позволяющие создавать как фиксированные, так и резиновые колонки. Этот макет часто используется для фиксированных боковых блоков с резиновыми областями контента, например. Дополнительные классы используются для сворачивания макета на устройствах с небольшим экраном. Использование Макет колонки состоит из элемента оболочки (wrapper), с элементами колонок, являющихся прямыми потомками оболочки. Никакие другие классы макета не должны быть применены непосредственно к элементам столбцов. Пример макета столбца: <div class='ipsColumns'> <div class='ipsColumn ipsColumn_medium'>Фиксированный колонка</div> <div class='ipsColumn ipsColumn_fluid'>Резиновая колонка</div> </div> Этот код будет выглядеть следующим образом: (для понимая добавлены фоновые цвета и отступы): Фиксированная колонка Резиновая колонка Оболочка получает класс ipsColumns (примечание: множественное число), в то время как отдельные столбцы получают ipsColumn (примечание: единственное число). Размер колонок Для изменения размера колонок доступно некоторое количество классов. Один из этих классов должен быть применён к каждой колонке в дополнение к основному классу ipsColumn. ipsColumn_veryNarrow - 50 пикселей в ширину; ipsColumn_narrow - 120 пикселей в ширину; ipsColumn_medium - 200 пикселей в ширину; ipsColumn_wide - 280 пикселей в ширину; ipsColumn_veryWide - 360 пикселей в ширину; ipsColumn_fluid - занимает оставшееся пространство; должен быть использован для всех резиновых колонок. Расстояние между границами (border-spacing) По умолчанию между колонками не предусмотрено никакого расстояния (смотри пример выше). Расстояние может быть включено вокруг колонок с помощью одного из трёх следующих классов, применённых для основного ipsColumns элемента: ipsColumns_verticalSpacing - 15 пикселей вертикального расстояния; ipsColumns_horizontalSpacing - 15 пикселей пикселей горизонтального расстояния; ipsColumns_bothSpacing - 15 пикселей расстояния со всех сторон. Расстояние может быть сокращено вдвое, указав в дополнение класс ipsColumns_halfSpacing. <div class='ipsColumns ipsColumns_bothSpacing ipsColumns_halfSpacing'> <div class='ipsColumn ipsColumn_medium'>Фиксированная колонка</div> <div class='ipsColumn ipsColumn_fluid'>Резиновая колонка</div> </div> Фиксированная колонка Резиновая колонка Адаптивность Для адаптивности макета на устройствах с небольшим экраном, добавьте класс ipsColumns_collapseTablet или ipsColumns_collapsePhone к элементу оболочки.