Полное руководство: установка Bootstrap в Angular 11

Bootstrap – это популярная платформа CSS, которая предоставляет заранее разработанные компоненты и стили, упрощающие разработку интерфейса. Если вы работаете с Angular 11 и хотите включить Bootstrap в свой проект, эта статья расскажет вам о нескольких методах установки Bootstrap и предоставит примеры кода.

Метод 1. Установка Bootstrap через npm

  1. Откройте проект Angular 11 в любимом редакторе кода.
  2. Откройте терминал и перейдите в корневой каталог вашего проекта.
  3. Выполните следующую команду, чтобы установить Bootstrap через npm:
npm install bootstrap
  1. После завершения установки откройте файл angular.json, расположенный в корневом каталоге вашего проекта.
  2. Найдите массив "styles"в разделе «архитектор» и добавьте путь к файлу CSS Bootstrap:
"styles": [
  "src/styles.css",
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
]
  1. Сохраните изменения и перезапустите сервер разработки Angular.

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

  1. Откройте проект Angular 11 в редакторе кода.
  2. Откройте файл index.html, расположенный в каталоге src/.
  3. Добавьте следующую ссылку CDN в раздел <head>:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  1. Сохраните изменения и перезапустите сервер разработки Angular.

Метод 3. Установка Bootstrap с помощью Angular CLI

  1. Откройте проект Angular 11 в редакторе кода.
  2. Откройте терминал и перейдите в корневой каталог вашего проекта.
  3. Выполните следующую команду, чтобы установить Bootstrap с помощью Angular CLI:
ng add @ng-bootstrap/ng-bootstrap
  1. Angular CLI установит Bootstrap и необходимые зависимости.
  2. После завершения установки вы можете импортировать модули Bootstrap в файлы компонентов Angular.
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
@NgModule({
  imports: [NgbModule]
})
export class AppModule { }

В этой статье мы рассмотрели три различных метода установки Bootstrap в проект Angular 11. Вы можете выбрать метод, который лучше всего соответствует требованиям вашего проекта. Независимо от того, предпочитаете ли вы использовать npm, CDN или Angular CLI, включение Bootstrap в ваш проект Angular 11 улучшит его стиль и предоставит широкий спектр заранее разработанных компонентов для более быстрой разработки.