Krok 1: Instalacja Bootstrap w Angular.
Otwórz Terminal w Visual Studio 2022 i wpisz następujące polecenie:
npm install bootstrap
Krok 2: Dodanie Bootstrap do angular.json
Po zakończonej instalacji musisz dodać ścieżki do plików Bootstrap CSS i JS.
1. Otwórz plik angular.json
2. Znajdź sekcję „styles” i „scripts” i dodaj do niej Bootstrap:
„styles”: [
„node_modules/bootstrap/dist/css/bootstrap.min.css”
],
„scripts”: [
„node_modules/bootstrap/dist/js/bootstrap.bundle.min.js”
]
Dzięki temu Bootstrap zostanie automatycznie dołączony do aplikacji.
Krok 3: Restart serwera
Jeśli aplikacja już działa, zatrzymaj ją (Ctrl + C) i uruchom ponownie:
ng serve
Krok 4: Sprawdzenie działania Bootstrap
Możesz teraz użyć klasy Bootstrapa np. w app.component.html:
Witaj w Angular + Bootstrap!
Kliknij mnie
<div class=”container mt-5″>
<h1 class=”text-primary”>Witaj w Angular + Bootstrap!</h1>
<button class=”btn btn-success”>Kliknij mnie</button>
</div>
