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
Кнопка Save

 

Сохранение проекта
Сохранение проекта

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

  1. Либо через кнопку Save (если вы впервые сохраняете этот файл, вас спросят, куда)
  2. Либо через сочетание ⌘ + S  (Mac) / Cntrl + S (Windows)
  3. Либо через команду ⇧ + ⌘ + 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 (да, они умудрились назвать двумя способами).

Настройка экспорта
Настройка экспорта

Если же вы уже сохранили настройки, но хотите их поменять, откройте выпадающее меню кнопки и перейдите в раздел настроек. 

Опции экспорта
Опции экспорта

Настройка экспорта

Базово нам надо указать всего одну вещь — путь к папке, куда будут выгружены файлы (HTML, CSS, JS, медиа). 

  1. Нажимаем Browse 
  2. Выбираем папку
  3. Нажимаем Save

 

После того, как окно закроется, нажимаем еще раз на Export.  Снизу вы увидите всплывающую подсказку, нажав на которую, попадете сразу в нужную папку. 

Подсказка с папкой
Подсказка с папкой

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

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:


👋 Курс дизайнера за полцены: сформируйте портфолио и найдите высокооплачиваемую работу. Помощь с трудоустройством!

По теме:


<