Installer Bootstrap dans notre projet Angular

Comment installer Bootstrap de manière simple et rapide.

Tout d’abord, ouvrons le terminal de notre VS Code dans notre projet Angular.

«Pour ceux qui ne savent pas encore comment démarrer un projet Angular, voici le lien de l’article où j’enseigne : https://medium.com/@alefbacelar/criando-projeto-em-angular-8f2b7aca7bb7 ».

Maintenant, saisissons la commande ci-dessous dans le terminal :

npm install bootstrap --save

Maintenant dans notre styles.scss global :

vamos adicionar o seguinte import.

@import '~bootstrap/dist/css/bootstrap.min.css'

Appuyez sur Entrée ou cliquez pour afficher l’image en taille réelle

Et c’est aussi simple que cela, vous pouvez désormais utiliser Bootstrap. Maintenant, allons sur le site de Bootstrap : https://getbootstrap.com/docs/5.2/customize/components/
J’ai pris une nav-bar :

Appuyez sur Entrée ou cliquez pour afficher l’image en taille réelle

Et une table :

Appuyez sur Entrée ou cliquez pour afficher l’image en taille réelle

Mon code HTML du home-component.html est dans le lien ci-dessous :

Et mon SCSS du home-component.scss :

.container {marge-superieure: 10%; couleur de bordure: rgb(139, 139, 139); style de bordure: solide; rayon de bordure: 15px;}une{couleur blanche;}

Après les modifications nous allons voir notre écran d’accueil :

Appuyez sur Entrée ou cliquez pour afficher l’image en taille réelle

Prontinho, nous avons désormais une structure prête pour commencer un CRUD