125 votes

Angular 4: Comment inclure Bootstrap?

Je suis un développeur backend et je ne fais que jouer avec Angular4. J'ai donc fait ce tutoriel d'installation: https://www.youtube.com/watch?v=cdlbFEsAGXo .

Cela dit, comment puis-je ajouter bootstrap à l'application pour pouvoir utiliser la classe "container-fluid" ou "col-md-6" et ainsi de suite?

195voto

Egor Stambakio Points 9481
 npm install --save bootstrap
 

Ensuite, dans angular-cli.json (dans le dossier racine du projet), recherchez styles et ajoutez le fichier css bootstrap comme suit:

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

METTRE À JOUR:
dans angular 6 angular-cli.json été changé en angular.json .

106voto

Mohammad Faisal Points 914

Regarder la Vidéo ou Suivez les étape

Installer bootstrap 4 angulaire 2 / angulaire 4 / angulaire 5 / 6 angulaire

Il y a trois façon d'inclure bootstrap dans votre projet
1) Ajouter CDN Lien dans index.html fichier
2) Installez le programme d'installation en utilisant mnp et de définir le chemin d'accès dans angulaire.json Recommandé
3) Installer bootstrap à l'aide de mnp et de définir le chemin d'accès dans index.html fichier

J'ai recommandé 2 méthodes suivantes qui sont installés à l'aide de bootstrap mnp parce que sa installé dans votre répertoire de projet et vous pouvez facilement y accéder

Méthode 1

Ajouter Bootstrap, Jquery et popper.js CA chemin pour vous angulaire du projet index.html fichier

Bootstrap.css
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
Bootstrap.js
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
Jquery.js
https://code.jquery.com/jquery-3.2.1.slim.min.js
Popper.js
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js

Méthode 2

1) Installer bootstrap à l'aide de la ngp

npm install bootstrap --save

après l'installation de Bootstrap 4, nous avons Besoin de deux Plus javascript Package Jquery et Popper.js sans ces deux paquets de bootstrap n'est pas complète parce que le Bootstrap 4 est à l'aide de Jquery et popper.js package nous avons donc à installer ainsi

2) Installer JQUERY

npm install jquery --save

3) Installer Popper.js

npm install popper.js --save

Maintenant Bootstrap est Installer sur vous Projet de répertoire dans le Répertoire node_modules Dossier

ouvrir angulaire.json ce fichier sont disponibles sur vous angulaire du répertoire ouvrez ce fichier et ajoutez le chemin d'accès de bootstrap, jquery et popper.js les fichiers à l'intérieur de styles de[] et de scripts[] chemin voir l'exemple ci-dessous

"styles": [   
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "styles.css"
  ],
  "scripts": [  
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/popper.js/dist/umd/popper.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.min.js"
  ],

Remarque: Ne pas modifier une séquence de fichier js il devrait ressembler à ceci

Méthode 3

Installer bootstrap à l'aide de mnp suivre la Méthode 2 méthode 3 nous venons de définir le chemin d'accès à l'intérieur de index.html fichier au lieu de l' angulaire.json fichier

bootstrap.css

    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css">

Jquery.js

<script src="node_modules/jquery/dist/jquery.min.js"><br>

Bootstrap.js

<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"><br>

Popper.js

<script src="node_modules/popper.js/dist/umd/popper.min.js"><br>

Maintenant Bootstrap fonctionne bien Maintenant

45voto

vrb Points 362

Afin de configurer Bootstrap de la dépendance, nous avons besoin d'installer Bootstrap de la dépendance à l'aide de mnp.

$ npm install bootstrap@4.0.0-alpha.6 --save

Remarque: --enregistrer la commande enregistrer la dépendance angulaire de notre application à l'intérieur de paquet.fichier json.

Maintenant que nous avons les dépendances en place, nous pouvons dire Angulaire de la CLI qu'il doit charger ces styles en utilisant l'une des options suivantes ou les deux:

option 1) l'Ajout dans le fichier src/styles.css

nous pouvons ajouter les dépendances comme indiqué ci-dessous:

@import "~bootstrap/dist/css/bootstrap.min.css";

Option 2) l'Ajout dans angulaires-cli.json ou angulaire.json

Nous pouvons ajouter la feuille de style css fichiers dans angulaires-cli.json ou angulaire.fichier json qui est à dossier racine de notre angulaire de l'application, comme indiqué ci-dessous:

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

12voto

Hidayt Rahman Points 1045

Angulaire 4 - Bootstrap / @ng-configuration d'amorçage

Tout d'abord installer bootstrap dans votre projet à l'aide de commande ci-dessous:

npm install --save bootstrap

Puis ajoutez cette ligne, "../node_modules/bootstrap/dist/css/bootstrap.min.css" pour angulaires-cli.fichier json (dossier racine) dans des styles

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

Après avoir installé les dépendances citées ci-dessus, installez ng-bootstrap via:

npm install --save @ng-bootstrap/ng-bootstrap

Une fois installé, vous devez l'importer module principal.

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

Après cela, vous pouvez utiliser Tous les Bootstrap widgets (ex. carrousel, modal, popovers, les info-bulles, onglets, etc.) et plusieurs autres goodies ( datepicker, notation, timepicker, typeahead).

10voto

micronyks Points 4214

Dans Angular4 comme vous traitez avec @types de système, vous devez faire les choses suivantes

Faire,

1) npm install --save @types/jquery
2) npm install --save @types/bootstrap

tsconfig.json

recherchez les types de tableau et ajouter jquery et bootstrap entrées,

"types": [
      "jquery",
      "bootstrap",  
      "node"
]

Index.html

dans la section d'en-tête ajouter les entrées suivantes,

  <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="node_modules/jquery/dist/jquery.min.js "></script>
  <script src="node_modules/bootstrap/dist/js/bootstrap.js "></script>

Et de commencer à l'aide de jquery et bootstrap à la fois.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X