Comment angulaire intègre-t-il bootstrap4 ? Présentation de la méthode

Cet article vous présentera comment intégrer bootstrap4 dans angulaire. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Tutoriels associés recommandés : "tutoriel vidéo angulaire js", "tutoriel bootstrap"

bootstrap intégré angulaire4

1 Ouvrez le terminal et entrez la commande pour créer une nouvelle application angulaire

ng new app

2. installation

Ouvrez le terminal dans le projet nouvellement créé avec

ngx-bootstrapBootstrap et exécutez la commande suivante

npm install ngx-bootstrap bootstrap --save

3. Configurez le projet en utilisant le style bootstrap

 : Le Le projet doit être configuré pour inclure Bootstrap. Ce n'est qu'avec CSS que vous pouvez utiliser les styles bootstrap.

Ajouter un style d'amorçage dans angulaire.json : ouvrez le fichier angulaire.json à partir du répertoire racine du projet, recherchez l'élément de configuration Style et spécifiez le chemin d'accès à bootstrap.min.css. Une fois terminé, cela devrait ressembler à ceci :

"styles": [
              "src/styles.sass",
              "./node_modules/bootstrap/dist/css/bootstrap.min.css"
            ],

Remarque : Lorsque vous apportez des modifications à angulaire.json, vous devrez redémarrer le service ng pour récupérer les modifications de configuration.

4. Présentez le module ngx-bootstrap que vous souhaitez utiliser dans

app.module.tsOuvrez

et ajoutez le module de composant que vous souhaitez utiliser, tel que

. src/app/app.module.ts

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
...

@NgModule({
   ...
   imports: [BsDropdownModule.forRoot(), ... ],
    ...
})

BsDropdownModule.forRoot()Pour plus de détails sur le composant d'amorçage à utiliser, cliquez sur https://valor-software.com/ngx-bootstrap/#/documentation pour afficher

Pour plus de connaissances liées à la programmation, veuillez visitez :

Enseignement de la programmation

! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!