» » LayoutIt!: створення Bootstrap-шаблонів на HTML

LayoutIt!: створення Bootstrap-шаблонів на HTML

Якщо ви плануєте розробку адаптивного веб-сайту, то Bootstrap однозначно вам підійде. Ця інновація представила веб-розробникам новий підхід, який в значній мірі полегшує, прискорює і удосконалює процес розробки адаптивних веб-сайтів і застосунків.

Проте складно не згадати про те, наскільки завдання по розробці шаблону з нуля може бути витратним за часом. Аби спростити і прискорити цей процес, сьогодні ми хочемо представити вашій увазі інструмент LayoutIt!, який допоможе вам без зусиль розробляти HTML-шаблони на базі Bootstrap.

LayoutIl


LayoutIt! є веб-інструментом для розробки дизайну веб-сторінок за допомогою інтерфейсу перетягування (drag-and-drop). Цей інструмент підтримує найостаннішу версію Bootstrap, якщо ви бажаєте почати розробку з нуля. Окрім цього, ви можете взяти за основу 3 базових шаблони. Після закінчення розробки, створений дизайн можна буде використовувати в проекті за допомогою вбудованого коду Bootstrap. На даний момент, LayoutIt! знаходиться в стадії бета, проте вже зараз працює відмінно!

Приступаємо до роботи

Аби почати роботу з LayoutIt!, вам потрібно буде перейти на сторінку Edit. Як видно в приведеному нижче скріншоті, тут представлено декілька інструментів і опцій, з якими можна працювати. Ближче до верху можна бачити 3 режими, в яких можна працювати: режим редактора (Edit), розробника (Developer) і режим попереднього перегляду (Preview).

інтерфейс програми


Під верхньою панеллю інструментів, в лівій бічній панелі, можна бачити різні елементи, а також додатковий контейнер справа. Саме цей контейнер і виступає в ролі полотна, на якому ви створюватимете і налаштовуватимете ваші елементи. Як тільки робота буде завершена, ви можете просто скачати код, поділитися ним або зберегти в проекті.

Панель елементів Elements

Тут представлено 4 типи елементів: сіткова система, базові стилі CSS, javascript і додаткові компоненти. Просто перетягуйте потрібні елементи в контейнер і налаштовуйте їх на власний розсуд.
Панель елементів  Elements


Аби почати розробку, виберіть сіткову систему або відразу декілька, аби створити таку розмітку, яку ви хотіли б бачити в структурі сайту. Сітка дає вам рядки і колонки, з якими відбувається робота.

Як тільки розберетеся з сіткою шаблону, можна додати деякі основні CSS-елементи за допомогою елементу Base CSS, будь то title, p, blockquote, table, button, image і так далі. Ви можете бачити і інші додаткові налаштування для кожного елементу - вирівнювання абзаців і так далі.

Аби додати загальні атрибути, панель компонентів (Components) пропонує вам декілька базових елементів веб-сайту на зразок кнопки, шапки, тексту, хлібних крихт, пагінації і так далі. І нарешті, якщо ви хочете доповнити ваш сайт, просто перенесіть в контейнер різні javascript-елементи: модельні вікна, навігацію, вкладки, попередження і сповіщення, каруселі і так далі.

Настанова по використанню

Аби побачити LayoutIt! у дії, ми постараємося відтворити структуру головної сторінки сайту Hongkiat.com. Пропонуємо вам розбір структури:
Створення Bootsstrap шаблонів на html


Спочатку нам потрібно попрацювати над структурою сітки.

У ній повинно бути 4 основних рядки: окрема колонка для шапки і navbar, двоколонкова для текстового контенту, зображення і пагінації, одноколонковий рядок для бічної панелі, 4-колонкова для підвалу і одна колонка для footnote. Нижче пропонуємо вам скріншот того, як це все виглядає:
меню


Тепер для того, щоб додати інші елементи:

1. Нам потрібно додати Header з компонентів і navbar з javascript.
2. Аби помістити зображення за текстовим контентом, нам потрібно вставити ще одну сітку 8 4 всередині першої 8 сіток (дивіться зображення вище).

- Додати Text з Components і додати Image з Base CSS.
- Під Text і Image вставити Pagination з Components.
- Для бічної панелі давайте просто вставимо ярлик за допомогою Title з Base CSS.

3. Що стосується підвалу, то ми можемо скористатися Title і Paragraph з Base CSS.
4. Для footnote давайте просто додамо Paragraph з Base CSS.

І на цьому ми закінчили. От як виглядатиме наш шаблон. Підказка: аби дозволити редагування тексту, просто клацніть по тексту правою кнопкою.

LayoutIt!: створення Bootstrap-шаблонів на HTML


Для тих, хто лише знайомиться з Bootstrap і хоче розробляти шаблони з підтримкою Bootstrap, LayoutIt! здасться досить забавним інструментом, з яким слід поекспериментувати.


2602 27.02.14



Напівжирний Нахилений текст Підкреслений текст Перекреслений текст | Вирівнювання по лівому краю По центру Вирівнювання по правому краю | Вставка смайликів Вибір кольору | Прихований текст Вставка цитати Перетворити вибраний текст з транслітерації в кирилицю Вставка спойлеру