Перейти к содержимому
Поиск
Разработка

Конструктор страниц на Bootstrap 5 онлайн

Конструктор страниц Bootstrap 5: готовые блоки, свои тексты, адаптивная сетка, предпросмотр на телефоне и компьютере, скачивание HTML и сохранение проекта.

Александр Некрасов

Соберите адаптивную страницу из готовых элементов Bootstrap 5. Добавляйте блоки, вводите свои тексты, настраивайте оформление и проверяйте результат на разных экранах. Готовую страницу можно скачать как HTML, а проект сохранить для дальнейшего редактирования.

BOOTSTRAP PAGE STUDIO

Соберите свою страницу

Добавляйте блоки, вводите свои данные и проверяйте результат на разных экранах. Скачайте готовый HTML — Bootstrap, стили и скрипты уже внутри.

С чего начнём?

Шаблон можно полностью изменить

Загрузка шаблона заменяет страницу. Предыдущий вариант можно вернуть кнопкой «Отменить».

Загружаем локальные компоненты Bootstrap…

Добавить блок

Ваша страница

Нажмите на блок в примере, чтобы выбрать его. Меню, вкладки, аккордеоны и окна работают. Внешние ссылки в предпросмотре не открываются.

Порядок блоков

Настройки блока

Выберите блок в примере или в списке страницы.

Страница готова к использованию

HTML5 · Bootstrap 5.3.3

Заголовок вкладки браузера и имя файла.

HTML включает все CSS и JavaScript для страницы. Ваши внешние изображения требуют интернета. Формы в примере не отправляются. Для рабочей формы укажите адрес своего обработчика: в скачанном HTML будет готова отправка.

Посмотреть готовый HTML

Как собрать страницу

  1. Выберите стартовый шаблон или добавьте блоки из каталога.
  2. Нажмите на нужный блок и замените тексты, ссылки, цвета и элементы.
  3. Проверьте телефон, планшет и компьютер. Скачайте HTML и откройте его в браузере.

Частые вопросы

Где хранятся мои данные?

Редактор работает в браузере. «Сохранить черновик» сохраняет проект только в этом браузере; JSON позволяет перенести его на другой компьютер.

Что можно редактировать после скачивания?

HTML содержит обычную разметку Bootstrap, встроенные стили и скрипты. Его можно открыть в редакторе кода. Чтобы продолжить визуальное редактирование здесь, сохраните также проект JSON.

Как работает адаптивность?

Ширина примера — реальная ширина страницы внутри окна. Bootstrap меняет колонки и меню на своих контрольных точках: 576, 768, 992, 1200 и 1400 px. Масштаб меняет только размер отображения примера.

Для отдельных деталей оформления также пригодятся генератор CSS-градиентов, генератор скруглений и теней и конструктор HTML-таблиц.