Способы добавления Bootstrap в Angular CLI: Руководство по установке

Чтобы добавить Bootstrap в проект Angular CLI, вы можете использовать несколько методов. Вот несколько способов сделать это:

Метод 1. Установка Bootstrap с помощью npm

  1. Откройте терминал или командную строку.

  2. Перейдите в каталог проекта Angular.

  3. Выполните следующую команду, чтобы установить Bootstrap и его зависимости:

    npm install bootstrap
  4. Откройте файл angular.jsonв корневом каталоге вашего проекта.

  5. Найдите массив "styles"и добавьте путь к файлу CSS Bootstrap:

    "styles": [
     "node_modules/bootstrap/dist/css/bootstrap.min.css",
     "src/styles.css"
    ]
  6. Сохраните файл, и Bootstrap будет включен в ваш проект.

Метод 2. Использование ссылок CDN

  1. Откройте файл index.html, расположенный в папке srcвашего проекта Angular.

  2. Добавьте следующие ссылки CDN в раздел :

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  3. Сохраните файл, и Bootstrap будет загружен из CDN.

Метод 3. Установка ng-bootstrap

  1. Установите ng-bootstrap, выполнив следующую команду:

    ng add @ng-bootstrap/ng-bootstrap
  2. Этот метод предоставляет компоненты и директивы, специфичные для Angular, для Bootstrap.

Это несколько способов добавить Bootstrap в проект Angular CLI. Вы можете выбрать тот, который лучше всего соответствует вашим требованиям.