Документация Bootstrap Studio | Демо-экзамен 2026

1. Интерфейс программы

Bootstrap Studio имеет интуитивно понятный интерфейс, разделенный на несколько ключевых панелей:

Design Panel

Древовидная структура проекта: страницы, компоненты, стили, скрипты, изображения и шрифты

Components Panel

Библиотека готовых Bootstrap-компонентов и пользовательских элементов

Stage (Холст)

Визуальный редактор с поддержкой drag-and-drop для построения страниц

Options Panel

Панель настроек выбранного элемента: стили, атрибуты, классы

Inspector

Инспектор элементов с возможностью просмотра и изменения HTML

Preview Modes

Предпросмотр в разных разрешениях: Desktop, Tablet, Mobile

Основные элементы управления

Элемент	Описание	Горячая клавиша
Toolbar	Панель инструментов с основными действиями	—
Preview	Открыть предпросмотр в браузере	Ctrl+P
Export	Экспорт проекта в HTML/CSS/JS	Ctrl+E
Undo/Redo	Отмена и повтор действий	Ctrl+Z / Ctrl+Y

2. Создание и управление проектами

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

Нажмите File → New или используйте Ctrl+N
Выберите один из вариантов:
- Blank Page — пустая страница для создания с нуля
- Templates — готовые шаблоны (Landing, Portfolio, Blog и др.)
- Bootstrap Version — выбор версии Bootstrap (4.x или 5.x)
Укажите имя проекта и место сохранения

Структура проекта

MyProject.bsdesign/

├── index.html

├── assets/

│   ├── css/

│   │   ├── styles.css

│   │   └── custom.css

│   ├── js/

│   │   ├── script.js

│   │   └── custom.js

│   ├── img/

│   │   └── logo.png

│   └── fonts/

├── components/ (пользовательские компоненты)

└── project.json (настройки проекта)

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

Сохранить проект: Ctrl+S — сохраняет .bsdesign файл
Экспортировать: Ctrl+E — экспортирует готовый HTML/CSS/JS код
Publish: Публикация на хостинг (через FTP/SFTP)

Важно: Файл .bsdesign содержит исходный проект. Для размещения сайта используйте экспортированные файлы, а не .bsdesign.

3. Работа с компонентами Bootstrap

Добавление компонентов

Откройте панель Components слева
Найдите нужный компонент (используйте поиск)
Перетащите компонент на холст (Stage)
Настройте свойства в панели Options

Основные категории компонентов

Layout (Разметка)

Container / Container Fluid — контейнеры для контента
Row — строки сетки Bootstrap
Column — колонки с настройкой ширины (col-md-6, col-lg-4 и т.д.)
Section — семантический блок для секций страницы

Navigation (Навигация)

Navbar — адаптивная навигационная панель
Nav — простое меню навигации
Breadcrumb — хлебные крошки
Pagination — пагинация страниц

Components (Элементы)

Button — кнопки с различными стилями
Card — карточки для контента
Alert — уведомления и сообщения
Badge — значки и метки
Modal — модальные окна
Carousel — слайдеры изображений

Forms (Формы)

Form — контейнер формы
Input — текстовые поля
Textarea — многострочные поля
Select — выпадающие списки
Checkbox / Radio — чекбоксы и радиокнопки
Button — кнопки отправки

Редактирование компонентов

Двойной клик — редактирование текста
Правая кнопка мыши — контекстное меню (Duplicate, Delete, Copy HTML и т.д.)
Options Panel — изменение атрибутов, классов, стилей
Drag & Drop — перемещение элементов в структуре

Совет: Используйте готовые блоки (Blocks) для быстрого создания секций: Header, Hero, Features, Footer и др.

4. Стили и скрипты

Работа с CSS

Откройте панель Design → Styles
Нажмите + для создания нового CSS файла
Напишите свои стили в редакторе
Файл автоматически подключится к проекту

/* Пример пользовательских стилей */
.my-custom-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 60px 0;
    color: white;
}

.my-button {
    background: #667eea;
    border: none;
    padding: 12px 32px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.my-button:hover {
    background: #764ba2;
    transform: translateY(-2px);
}
                

Работа с JavaScript

Откройте Design → JavaScript
Создайте новый JS файл
Добавьте свой код

// Пример JavaScript кода
document.addEventListener('DOMContentLoaded', function() {
    // Плавная прокрутка к якорям
    const links = document.querySelectorAll('a[href^="#"]');
    
    links.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            target.scrollIntoView({ behavior: 'smooth' });
        });
    });
});
                

Подключение внешних библиотек

CDN: Добавьте ссылки в <head> через HTML Settings
Локальные файлы: Импортируйте через Design Panel
npm пакеты: Используйте Web Fonts, Font Awesome, AOS и др.

Совет: Bootstrap Studio поддерживает препроцессоры Sass/SCSS для более удобной работы со стилями.

5. Предпросмотр и экспорт

Предпросмотр в браузере

Нажмите кнопку Preview или Ctrl+P
Сайт откроется в браузере по умолчанию
Изменения применяются автоматически (Live Preview)

Адаптивный предпросмотр

Desktop — полноэкранный режим
Tablet — планшеты (768px)
Mobile — смартфоны (480px)
Custom — произвольное разрешение

Экспорт проекта

Выберите File → Export или Ctrl+E
Настройте параметры экспорта:
- Minify — минификация CSS/JS
- Include jQuery — включить jQuery
- Export Images — экспорт изображений
Выберите папку для сохранения
Нажмите Export

Результат: Получите готовую папку с HTML, CSS, JS и всеми ресурсами для размещения на хостинге.

6. Использование шаблонов и тем

Встроенные шаблоны

Bootstrap Studio включает библиотеку профессиональных шаблонов:

Landing Pages

Одностраничники для продуктов и услуг

Portfolios

Портфолио для дизайнеров и разработчиков

Blogs

Шаблоны блогов и новостных сайтов

E-commerce

Интернет-магазины и каталоги

Создание собственных компонентов

Создайте нужный блок на странице
Выделите элементы
Правая кнопка → Create Component
Компонент появится в панели Components для повторного использования

7. Open Server Panel (OSPanel)

Что такое OSPanel? Open Server Panel — это портативная серверная платформа для Windows, позволяющая запускать веб-приложения на локальном компьютере без подключения к интернету.

Возможности OSPanel

Веб-серверы: Apache, Nginx
PHP версии: 5.x, 7.x, 8.x (можно переключать)
Базы данных: MySQL, MariaDB, PostgreSQL
phpMyAdmin для управления БД
Поддержка SSL/HTTPS
Модульная система с возможностью расширения

Установка OSPanel

1

Скачивание

Загрузите последнюю версию с официального сайта

2

Распаковка

Распакуйте архив на любой диск (рекомендуется D:\OpenServer)

3

Запуск

Запустите Open Server.exe от имени администратора

Важно: Не устанавливайте OSPanel в системные папки (Program Files) и пути с кириллицей. Используйте латинские буквы без пробелов.

8. Настройка и использование OSPanel

Первый запуск

Кликните по иконке OSPanel в трее
Выберите Запустить (зеленый флаг)
Дождитесь запуска всех модулей (Apache, MySQL)
Иконка станет зеленой — сервер работает

Размещение сайта

Структура папок OSPanel:
D:\OpenServer\
├── domains/          ← Папка для сайтов
│   ├── localhost/    (стандартный домен)
│   ├── mysite/       (ваш сайт)
│   └── test-project/
├── modules/          (модули PHP, MySQL)
├── userdata/         (настройки, логи)
└── Open Server.exe
                

Создание сайта

Создайте папку в domains, например: D:\OpenServer\domains\mysite
Скопируйте экспортированные файлы Bootstrap Studio в эту папку
Откройте браузер и перейдите по адресу: http://mysite/

mysite/
├── index.html
├── assets/
│   ├── css/
│   ├── js/
│   └── img/
└── .htaccess
                

Настройка виртуальных хостов

Правый клик по иконке OSPanel → Настройки
Вкладка Домены
Добавьте новый домен с указанием папки
Перезапустите сервер

Управление модулями

Модуль	Назначение	Переключение версии
Apache/Nginx	Веб-сервер	Клик по иконке → Модули → Веб-сервер
PHP	Интерпретатор PHP	Клик по иконке → Модули → PHP
MySQL/MariaDB	База данных	Клик по иконке → Модули → MySQL

Готово! Теперь ваш сайт доступен локально и работает как на реальном хостинге.

9. Работа с phpMyAdmin

phpMyAdmin — это веб-интерфейс для управления базами данных MySQL/MariaDB. Позволяет создавать БД, таблицы, выполнять SQL-запросы, импортировать и экспортировать данные.

Доступ к phpMyAdmin

Убедитесь, что OSPanel запущен
Кликните по иконке OSPanel → Дополнительно → phpMyAdmin
Или откройте в браузере: http://localhost/openserver/phpmyadmin/
Введите данные для входа:
- Пользователь: root
- Пароль: (оставьте пустым или по умолчанию)

Интерфейс phpMyAdmin

Левая панель — список баз данных и таблиц
Верхнее меню — основные действия (SQL, Импорт, Экспорт)
Центральная область — рабочая зона с данными

Основные вкладки

Вкладка	Описание
Структура	Просмотр и редактирование структуры таблиц
SQL	Выполнение SQL-запросов
Поиск	Поиск данных в таблицах
Вставить	Добавление новых записей
Импорт	Импорт данных из файла (SQL, CSV)
Экспорт	Экспорт базы данных в файл

10. Управление базой данных

Создание базы данных

1

Открыть phpMyAdmin

Перейдите в phpMyAdmin через OSPanel

2

Создать БД

Нажмите Создать в левой панели

3

Настроить параметры

Введите имя: mysite_db
Кодировка: utf8mb4_general_ci

4

Создать

Нажмите кнопку Создать

Создание таблицы

Выберите созданную базу данных
Введите имя таблицы: users
Укажите количество столбцов: 5
Настройте поля:
- id — INT, AUTO_INCREMENT, PRIMARY KEY
- name — VARCHAR(100)
- email — VARCHAR(100), UNIQUE
- password — VARCHAR(255)
- created_at — TIMESTAMP, DEFAULT CURRENT_TIMESTAMP
Нажмите Сохранить

SQL-запросы

-- Создание таблицы

CREATE TABLE users (

    id INT AUTO_INCREMENT PRIMARY KEY,

    name VARCHAR(100) NOT NULL,

    email VARCHAR(100) UNIQUE NOT NULL,

    password VARCHAR(255) NOT NULL,

    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP

);

-- Вставка данных

INSERT INTO users (name, email, password) 

VALUES ('Иван Иванов', 'ivan@example.com', 'hashed_password');

-- Выборка данных

SELECT * FROM users;

-- Обновление данных

UPDATE users SET name = 'Петр Петров' WHERE id = 1;

-- Удаление данных

DELETE FROM users WHERE id = 1;

Импорт базы данных

Выберите базу данных
Перейдите на вкладку Импорт
Нажмите Выберите файл и выберите .sql файл
Кодировка: utf-8
Нажмите Вперед

Экспорт базы данных

Выберите базу данных
Перейдите на вкладку Экспорт
Выберите метод: Обычный или Дополнительный
Формат: SQL
Нажмите Вперед для скачивания

Важные предупреждения:

Не удаляйте системные базы: information_schema, mysql, performance_schema
Всегда делайте резервные копии перед изменениями
Используйте безопасные пароли для пользователей БД

Подключение к БД из PHP

<?php
// Параметры подключения

$host = 'localhost';

$dbname = 'mysite_db';

$username = 'root';

$password = '';

try {

    // Подключение через PDO

    $pdo = new PDO("mysql:host=$host;dbname=$dbname;charset=utf8mb4", 

                   $username, $password);

    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    echo "Подключение успешно!";

    // Пример запроса

    $stmt = $pdo->query("SELECT * FROM users");

    $users = $stmt->fetchAll(PDO::FETCH_ASSOC);

    foreach ($users as $user) {

        echo $user['name'] . " - " . $user['email'] . "<br>";

    }

} catch(PDOException $e) {

    echo "Ошибка подключения: " . $e->getMessage();

}

?>

11. Советы и хитрости

Лучшие практики

Используйте сетку Bootstrap для адаптивной верстки
Давайте осмысленные имена классам и ID
Группируйте связанные элементы в контейнеры
Тестируйте сайт на разных разрешениях
Оптимизируйте изображения перед импортом
Используйте семантические HTML5 теги

Ускорение работы

Создавайте пользовательские компоненты для повторного использования
Используйте горячие клавиши (см. раздел ниже)
Создавайте библиотеку своих блоков (Snippets)
Используйте поиск в панели Components

Безопасность

Не оставляйте phpMyAdmin доступным без пароля на продакшене
Используйте подготовленные запросы (prepared statements) в PHP
Валидируйте пользовательский ввод
Регулярно обновляйте Bootstrap и другие библиотеки

Дизайн

Используйте не более 2-3 основных цветов
Соблюдайте единый стиль на всех страницах
Обеспечьте хорошую контрастность текста
Используйте белое пространство для улучшения читаемости

12. Горячие клавиши

Основные

Клавиша	Действие
Ctrl+N	Создать новый проект
Ctrl+O	Открыть проект
Ctrl+S	Сохранить проект
Ctrl+P	Предпросмотр в браузере
Ctrl+E	Экспорт проекта

Редактирование

Клавиша	Действие
Ctrl+Z	Отменить
Ctrl+Y	Повторить
Ctrl+C	Копировать
Ctrl+V	Вставить
Ctrl+X	Вырезать
Ctrl+D	Дублировать элемент
Delete	Удалить элемент
F2	Переименовать

Клавиша	Действие
Ctrl+F	Поиск
Ctrl+Tab	Переключение между страницами
Ctrl+Click	Множественное выделение

13. Часто задаваемые вопросы (FAQ)

Как добавить свой HTML-код?

Используйте компонент Custom Code из панели Components. Перетащите его на страницу и вставьте свой HTML/CSS/JS код.

Можно ли использовать другие CSS-фреймворки?

Да, но Bootstrap Studio оптимизирован для Bootstrap. Вы можете подключить Tailwind, Foundation через CDN в настройках проекта.

Как сделать многоязычный сайт?

Создайте отдельные страницы для каждого языка или используйте JavaScript для переключения контента.

Поддерживается ли работа с Git?

Bootstrap Studio не имеет встроенной интеграции с Git, но вы можете экспортировать проект и управлять им через Git вручную.

Как подключить Google Fonts?

Перейдите в Design → Google Fonts и выберите нужные шрифты. Они автоматически подключатся к проекту.

Сайт не работает после экспорта на хостинг

Проверьте:

Все файлы загружены
Пути к ресурсам указаны относительно
Файл index.html находится в корне
Права доступа к файлам (644 для файлов, 755 для папок)

OSPanel не запускается

Возможные причины:

Занят порт 80 или 443 (закройте Skype, другие серверы)
Антивирус блокирует (добавьте в исключения)
Запуск не от администратора
Путь с кириллицей или пробелами

Не могу подключиться к phpMyAdmin

Убедитесь, что MySQL запущен в OSPanel. Попробуйте очистить кэш браузера или использовать другой браузер.

Как перенести сайт с локального сервера на хостинг?

Экспортируйте проект из Bootstrap Studio
Загрузите файлы на хостинг через FTP/SFTP
Экспортируйте БД из phpMyAdmin (если есть)
Импортируйте БД на хостинге
Обновите настройки подключения к БД в коде

Демо-экзамен 2026

Bootstrap Studio: Полное руководство