Генератор адаптивной вёрстки bootstrap

Генератор вёрстки bootstrap

При помощи генератора Вы сможете быстро сделать адаптивную вёрстку для bootstrap, и получить готовый код HTML или LESS, это удобный онлайн инструмент значительно сокращающий время.

Использование генератора адаптивной вёрстки bootstrap

Основные классы адаптивной вёрстки bootstrap

Адаптивная вёрстка формируется основными классами, определяющими размер устройства.

.col-xs-, .col-sm-, .col-md-, .col-lg-.

Генератор содержит аналогичные экраны, при помощи которых формируется адаптивная вёрстка в генераторе. Нажимая на экран Вы можете изменять и совмещать по нескольку основных классов.

Класс col-xs вёрстки bootstrap
Класс col-sm вёрстки bootstrap
Класс col-md вёрстки bootstrap
Класс col-lg вёрстки bootstrap

Добавление своего класса для секции row

Выше заготовки ячейки появится обозначение формы ввода своего класса class=NAME, при необходимости замените на желаемое имя и нажмите вне зоны выделенной под ячейку.

Выбор экрана для добавления класса

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

Добавление своего класса для вёрстки bootstrap

В поле формирования кода HTML можно будет увидеть добавление требуемого имени.

Код добавленного класса для вёрстки bootstrap

Добавление смещения создаваемой ячейке

Возможно смещение создаваемой ячейки на количество ячеек используя базовые классы.

.col-sm-offset-, .col-md-offset-, .col-lg-offset-.

Класс .col-xs- не поддерживает смещения, в виду состояния авто.

При формирования ячейки с классом, позволяющим сделать смещение, наведите мышкой на крайнюю левую часть создаваемой ячейки.

Ползунок смещения ячейки вёрстки

Переместите ячейку удержывая нажатой главную кнопку мышки в право, на количество ячеек требуемых для смещения.

Перемещение ячейки вёрстки

После данных действий Вы сможете обнаружить добавление нужного класса в поле формирования кода.

Код смещения ячейки вёрстки

Получение готового кода для LESS

Активируйте чекбокс для переключения формирования кода для LESS.

Переключение вёрстки для LESS

Для LESS формируется отдельное поля для стилей.

Стили вёрстки для LESS

Использование основного контейнера адаптивной вёрстки

По умолчанию в поле формирования кода создаётся основной класс вёрстки class="container".

Основной контейнер вёрстки bootstrap

Если Вы не нуждаетесь в основном контейнере вёрстки, его можно отключить деактивировав чекбокс.

Отключение контейнера вёрстки bootstrap

Пример сделаной адаптивной вёрстки в генераторе

Посмотрите пример набраной вёрстки, на формирование ячеек ушло не более тридцати секунд!!!.

Пример сделаной вёрстки bootstrap

Отображение сделаной адаптивной вёрстки в экранах

Создаваемая конструкция вёрстки отображается в экранах основных классов.

Класс col-xs- в экране вёрстки bootstrap
Класс col-sm- в экране вёрстки bootstrap
Класс col-md- в экране вёрстки bootstrap
Класс col-lg- в экране вёрстки bootstrap

Отображение кода сделаной адаптивной вёрстки

Разумеется HTML код адаптивной вёрстки формируется без малейших промедлений.

Код HTML сделаной вёрстки bootstrap

Сохранение созданной адаптивной вёрстки

Вы можете сохранить созданный макет нажав на кнопку "Сохранить". Будет сформирован ключ в адресной строке, сохраните его если захотите вернуться на сохранённый этап.

Сохранение сделаной вёрстки bootstrap

Нажав на кнопку "Посмотреть", Вы сможете посмотреть сделанную модель вёрстки в чертёжном ракурсе.

Сохранение ключа сделаной вёрстки bootstrap

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

Просмотр сделаной вёрстки bootstrap

Нажмите на кнопку "Редактировать" чтобы продолжить работу над макетом.

Продолжение редактирования вёрстки bootstrap

Генератор формирует горизонтальные секции с размещаемыми внутри ячейками, сохранение ключа и его актуальность во многом зависит от браузера и его настроек. Работать с генератором рекомендуется только с компьютера, используя современный браузер, обновлённый до последней версии.

Страница генератора адаптивной вёрстки bootstrap

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

Генератор вёрстки bootstrap

Рейтинг: 3.7/5 из 9



Добавлено Автор Ник Источник Просмотров Комментариев Теги
10-03-2015 Михаил Меренков aTmpl © 5892 0 генератор вёрстки, вёрстка bootstrap, адаптивная вёрстка