Bootstrap 5 — популярный CSS-фреймворк для адаптивного веб-дизайна. В этом руководстве вы узнаете, как добавить Bootstrap 5 в ваше приложение Angular 17 и использовать его компоненты и утилиты.
Давайте выполним следующие шаги:
Шаг 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
Выход: