Angular 4: come includere Bootstrap?

Sono uno sviluppatore di backend e sto giocando con Angular4. Così ho fatto questo tutorial di installazione: https://www.youtube.com/watch?v=cdlbFEsAGXo.

Dato questo, come posso aggiungere bootstrap all'app in modo da poter utilizzare la classe "container-fluid" o "col-md-6" e cose del genere?

npm install --save bootstrap

in seguito, all'interno di angular-cli.json (all'interno della cartella principale del progetto), trovare styles e aggiungere il file css di bootstrap come questo:

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

AGGIORNAMENTO:
in angular 6+ angular-cli.json è stato cambiato in angular.json.

Commentari (8)

In Angular4 quando avete a che fare con il sistema @types, dovreste fare le seguenti cose,

Fare,

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

tsconfig.json

cercare l'array types e aggiungere le voci jquery e bootstrap,

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

Index.html

nella sezione head aggiungere le seguenti voci,


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

E iniziate ad usare jquery e bootstrap entrambi.

Commentari (3)

Esegui il seguente comando nel tuo progetto, cioè npm install bootstrap@4.0.0-alpha.5 --save

Dopo aver installato la dipendenza di cui sopra eseguire il seguente comando npm che installerà il modulo bootstrap npm install --save @ng-bootstrap/ng-bootstrap

Controlla questo per il riferimento - https://github.com/ng-bootstrap/ng-bootstrap

Aggiungere la seguente importazione in app.module import {NgbModule} da '@ng-bootstrap/ng-bootstrap'; e aggiungere NgbModule alle importazioni

Nel tuo stye.css @import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

Commentari (0)