Bootstrap studio — создание проекта

В этой статье мы разберем самое начало работы с Bootstrap Studio.

Создание проекта

Создание нового проекта в BS насколько это возможно интуитивно: вам надо лишь указать название, выбрать шаблон (или пустой проект) и версию фреймворка (ставьте последнюю).

Bootstrap Studio - новый проект — Bootstrap Studio — новый проект

Добавление элементов

Все возможные готовые элементы находятся в списке в верхней левой части экрана. Вы можете либо развернуть список, либо начать вводить название элемента (которое, к слову, не идентично тегу HTML. Например, элемент строки <P> называется Paragraph, а ссылки <a> — Link).

Готовый элемент в Bootstrap Studio — это кусок разметки HTML, стиль CSS и иногда код JavaScript. Большинство стилей уже прописаны в Bootstrap, но для некоторых элементов среда создаст свой отдельный файл CSS и подложит его в ваш проект.

Добавить элемент можно, перетащив его либо в область предпросмотра, либо в древовидный список файлов снизу слева.

В самом начале панель с кодом HTML / CSS скрыта в самом низу — клините на лэйбл HTML или Styles, чтобы ее открыть.

Теперь, когда у нас добавлены несколько элементов, давайте разберемся, где содержится информация о них.

Выделите в списке добавленных элементов (номер 1 на скриншоте) один из них.

Область 2 — это весь код HTML страницы. Редактировать его в этой области нельзя, но это дает наглядное представление о положении дел

Область 3 — Атрибуты. Для каждого элемента можно указывать свои классы CSS и ID именно здесь. Классы вписываются через пробел, если класс уже есть в базе студии или вы его сами ранее добавили, вам покажут подсказку

Область 4 — Стили. Первая вкладка (и единственная на скриншоте) — это сводка о всех стилях элемента. Будь то стили инлайн или стили из разных классов разных файлов CSS.

В этой же области будут открываться ваши файлы CSS и JS, а также код элементов с кастомным кодом (где вы вольны писать вообще что угодно).

Область 5 — Это все файлы вашего проекта: список стилей, скриптов, страниц, шрифтов и изображений.

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

Как сохранять проект в Bootstrap Studio

Проекты в BS имеют расширение .bsdesign

Сохранение происходит по самому тривиальному сценарию:

Либо через кнопку Save (если вы впервые сохраняете этот файл, вас спросят, куда)
Либо через сочетание ⌘ + S (Mac) / Cntrl + S (Windows)
Либо через команду ⇧ + ⌘ + S (Mac) / Shift + Cntrl + S (Windows) — для сохранения файла в другое место (Save As)

Как открыть .bsdesign

Открыть проект BS можно через меню File > Open, либо через кнопку Open в панели инструментов, либо с помощью горячих клавиш ⌘ + O (Mac) / Cntrl + O (Windows)

Как экспортировать в Bootstrap Studio

Для экспорта вам стоит воспользоваться кнопкой Export.

Если вы впервые экспортируете данный проект, вам перед экспортом откроется меню Export Options / Export Settings (да, они умудрились назвать двумя способами).