Установка через npm и Vite

CDN удобен для первых шагов, но в реальном проекте Bootstrap обычно ставят через npm — менеджер пакетов Node.js. Тогда файлы лежат в проекте, версия записана в package.json, а сборщик Vite склеивает и сжимает их вместе с вашим кодом. Нужен установленный Node.js 20 или новее.

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

Создайте проект на Vite из шаблона vanilla — обычный HTML и JavaScript без фреймворков:

npm create vite@latest tasko -- --template vanilla
cd tasko
npm install
npm install bootstrap @popperjs/core

Последняя команда добавляет Bootstrap и Popper — библиотеку, которую скрипты Bootstrap используют для выпадающих меню и подсказок.

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

tasko/
├── index.html        главная страница
├── package.json      зависимости и команды
├── public/           файлы, которые копируются как есть
└── src/
    ├── main.js       точка входа: отсюда подключается всё остальное
    └── style.css     ваши стили

Шаблон кладёт в src/ демонстрационный код со счётчиком — его можно удалить.

Подключение Bootstrap

Замените содержимое src/main.js:

// src/main.js
import 'bootstrap/dist/css/bootstrap.min.css';
import './style.css';
import 'bootstrap';

Первая строка подключает стили Bootstrap, вторая — ваши (они идут после, чтобы могли переопределять). Третья запускает скрипты: кнопки с атрибутами data-bs-* начнут открывать окна и меню.

Файл index.html подключает main.js сам. Оставьте в нём разметку страницы:

<div class="container py-4">
  <h1>Tasko</h1>
  <button class="btn btn-primary">Попробовать</button>
</div>
<script type="module" src="/src/main.js"></script>

Тег <script type="module"> уже есть в шаблоне, разметку добавьте над ним внутри <body>. В превью стилей нет: их подключает Vite через main.js.

Запуск и сборка

npm run dev

Откройте http://localhost:5173 — страница оформлена Bootstrap и обновляется при каждом сохранении файла. Готовая к публикации версия собирается командой:

npm run build

Результат появится в папке dist/: её содержимое загружают на хостинг.

Компоненты из JavaScript

Если компонент нужно вызвать из кода, импортируйте его класс по имени:

// src/main.js
import { Modal } from 'bootstrap';
 
const modal = new Modal('#welcome');
modal.show();

Так открывается окно с id="welcome". Подробно окна разберём в разделе об интерактивных компонентах.

Частая ошибка

Писать в коде bootstrap.Modal или bootstrap.Tooltip, как в примерах с CDN. При подключении через npm глобальной переменной bootstrap нет — в консоли появится ошибка bootstrap is not defined. Импортируйте нужный класс: import { Tooltip } from 'bootstrap'.