Перейти к основному содержанию Перейти к навигации по документам

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

Если вы никогда не работали с npm, не переживайте — это просто. Мы пошагово разберём, как установить Bootstrap через npm и настроить проект.

На этой странице

Шаг 1: Установите Node.js

Node.js — это среда выполнения JavaScript, которая включает npm (Node Package Manager). Без него установка npm-пакетов невозможна.

  1. Перейдите на официальный сайт Node.js.
  2. Скачайте установочный файл, подходящий для вашей операционной системы (рекомендуемую LTS-версию).
  3. Установите Node.js, следуя инструкциям установщика.

Проверка установки: После установки откройте терминал (или командную строку) и выполните поочередно команды:

node -v
npm -v

Вы должны увидеть номера версий Node.js и npm.

Проверка установки node js

Шаг 2: Создайте папку для проекта

  1. Создайте новую папку на компьютере, например, MyBootstrapProject.
  2. Откройте её в редакторе кода (рекомендуется Visual Studio Code).

Шаг 3: Инициализация проекта

Вам нужно создать файл package.json, который хранит информацию о вашем проекте и зависимостях.

  1. Откройте терминал в Visual Studio Code:
    • Для этого нажмите Ctrl + ~ (или выберите «Терминал» → «Новый терминал»).
  2. Выполните команду: npm init -y.

Запуск в терминале

Эта команда создаст файл package.json с базовой конфигурацией.

Шаг 4: Установите Bootstrap

Теперь установим Bootstrap с помощью npm. Выполните следующую команду: npm install bootstrap.

Устанавливаем бутстрап через терминал

После выполнения этой команды в папке проекта появится папка node_modules, где будут храниться все установленные пакеты, и файл package-lock.json, который фиксирует версии зависимостей.

Шаг 5: Подключение Bootstrap в проект

Теперь подключим Bootstrap к вашему проекту.

  1. Создайте файл index.html в корне папки проекта:

    <!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap with npm</title>
    <!-- Подключение Bootstrap -->
    <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
    <h1 class="text-center text-primary">Привет, Bootstrap!</h1>
    <script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
  2.  Сохраните файл. Теперь Bootstrap подключён, и вы можете использовать все его компоненты и стили.

Шаг 6: Запустите локальный сервер (опционально)

Для удобства работы и просмотра изменений в браузере рекомендуется использовать локальный сервер.

  1. Установите пакет live-server (один раз): npm install -g live-server.
  2. Запустите сервер в папке проекта: live-server..

Браузер автоматически откроет ваш index.html.

Проект открылся в браузере

Советы по работе с npm и Bootstrap

  1. Обновление Bootstrap: Чтобы обновить Bootstrap до последней версии, выполните: npm update bootstrap.

  2. Использование SCSS для кастомизации: Если вы хотите изменить стили Bootstrap, лучше работать с исходными файлами SCSS. Установите дополнительные зависимости (например, sass), чтобы компилировать SCSS в CSS.

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