Wiki
Clone wikisprint.editor / Layouts
Модульные сетки
Как видно на скриншоте выше в редакторе предусмотрена работа с колонками, однако по умолчанию классы для колонок отсутствуют, чтобы их добавить требуется создать файл с дополнительными настройками редактора
подробнее тут https://bitbucket.org/andrey_ryabin/sprint.editor/wiki/Settings
в этот файл можно записать ваши классы для сеток и они отобразятся в виде выпадающей панельки у колонок
1) создайте файл с настройками классов для колонок, например myproject123.php и положите его в bitrix/admin/sprint.editor/settings/ или в local/admin/sprint.editor/settings/
2) добавьте ваши классы для колонок по аналогии с примером
$settings = array( 'title' => 'Пример настройки для bootstrap', 'layout_classes' => array( 'type1' => array( array('col-md-8', 'col-md-9', 'col-md-12'), array('col-sm-8', 'col-sm-9', 'col-sm-12'), array('col-xs-8', 'col-xs-9', 'col-xs-12'), array('col-lg-8', 'col-lg-9', 'col-lg-12'), ), 'type2' => array( array('col-md-3', 'col-md-4', 'col-md-5', 'col-md-6', 'col-md-7', 'col-md-8', 'col-md-9'), array('col-sm-3', 'col-sm-4', 'col-sm-5', 'col-sm-6', 'col-sm-7', 'col-sm-8', 'col-sm-9'), array('col-xs-3', 'col-xs-4', 'col-xs-5', 'col-xs-6', 'col-xs-7', 'col-xs-8', 'col-xs-9'), array('col-lg-3', 'col-lg-4', 'col-lg-5', 'col-lg-6', 'col-lg-7', 'col-lg-8', 'col-lg-9'), ), 'type3' => array( array('col-md-3', 'col-md-4', 'col-md-5', 'col-md-6', 'col-md-7', 'col-md-8'), array('col-sm-3', 'col-sm-4', 'col-sm-5', 'col-sm-6', 'col-sm-7', 'col-sm-8'), array('col-xs-3', 'col-xs-4', 'col-xs-5', 'col-xs-6', 'col-xs-7', 'col-xs-8'), array('col-lg-3', 'col-lg-4', 'col-lg-5', 'col-lg-6', 'col-lg-7', 'col-lg-8'), ), 'type4' => array( array('col-md-3', 'col-md-4', 'col-md-5', 'col-md-6', 'col-md-7'), array('col-sm-3', 'col-sm-4', 'col-sm-5', 'col-sm-6', 'col-sm-7'), array('col-xs-3', 'col-xs-4', 'col-xs-5', 'col-xs-6', 'col-xs-7'), array('col-lg-3', 'col-lg-4', 'col-lg-5', 'col-lg-6', 'col-lg-7'), ), ), 'layout_defaults' => array( 'type1' => '', 'type2' => 'col-md-6', 'type3' => 'col-md-4', 'type4' => 'col-md-3', ), );
type1 - одноколоночная сетка, type2 - двухколоночная и т.д.
3) подключите этот файл к редактору и не забудьте сохранить свойство и инфоблок
После этого панелька с классами для колонок будет отображена в редакторе
p.s.
Если у вас подключен bootstrap в публичной части сайта можете использовать готовые настройки блоков или создать свои
Система сеток Bootstrap имеет 12 колонок и является адаптивной, то есть колонки будут перестраиватся автоматически при изменении разрешения экрана.
Система сеток Bootstrap имеет 4 класса:
- xs - мобильные телефоны (mobile)
- sm - планшеты (tablet)
- md - компьютеры (desktop)
- lg - компьютеры с большим монитором (large desktop)
Указанные классы могут комбинироватся для создания более динамичных и гибких макетов.
Обратите внимате на то что общая сумма колонок в ряду должна ровнятся 12.
Подробнее:
Updated