Как добавить Bootstrap 5 в приложение Angular 17

Bootstrap 5 — популярный CSS-фреймворк для адаптивного веб-дизайна. В этом руководстве вы узнаете, как добавить Bootstrap 5 в ваше приложение Angular 17 и использовать его компоненты и утилиты.

Шаг установки Bootstrap 5 в Angular 17

• Шаг 1: Создайте проект Angular 17
• Шаг 2: Установите пакет Bootstrap 5 NPM
• Шаг 3.Импортируйте CSS и JS Bootstrap
• Шаг 4:Обновите код компонента HTML
• Запустите приложение Angular

Давайте выполним следующие шаги:

Шаг 1. Создайте проект Angular 17

Вы можете легко создать свое угловое приложение, используя следующую команду:

ng new my-new-app

Шаг 2. Установите пакет Bootstrap 5 NPM.

В этом решении мы также установим загрузочную загрузку с jquery и popper js. таким образом, вы также можете импортировать функцию bootstrap css и bootstrap js. Так что я думаю, что это будет лучшее решение для вас, я думаю.

давайте выполним следующие команды:

npm install bootstrap --save

npm install jquery --save

npm install popper.js --save

Шаг 3. Импортируйте Bootstrap CSS и JS.

Теперь после успешного выполнения вышеуказанной команды. давайте импортируем его в файл angular.json.

angular.json

<div class="container">
  <h1>Install Bootstrap 5 in Angular 17 - ItSolutionStuff.com</h1>
  
  <div class="card">
    <div class="card-header">
      Featured
    </div>
    <div class="card-body">
      <h5 class="card-title">Special title treatment</h5>
      <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>
</div>

Теперь вы можете использовать как bootstrap css, так и js.

Запустите приложение Angular:

Все необходимые шаги выполнены, теперь вам нужно ввести приведенную ниже команду и нажать Enter, чтобы запустить приложение Angular:

ng serve

Теперь перейдите в веб-браузер, введите указанный URL-адрес и просмотрите выходные данные приложения:

http://localhost:4200

Выход:

#bootstrap  #angular