Είμαι προγραμματιστής backend και απλά παίζω με το Angular4. Έτσι έκανα αυτό το σεμινάριο εγκατάστασης:
Δεδομένου αυτού, πώς μπορώ να προσθέσω bootstrap στην εφαρμογή ώστε να μπορώ να χρησιμοποιήσω την κλάση "container-fluid" ή "col-md-6" και τέτοια πράγματα;
npm install --save bootstrap
στη συνέχεια, μέσα στο angular-cli.json (μέσα στο ριζικό φάκελο του έργου), βρείτε το styles
και προσθέστε το αρχείο css του bootstrap ως εξής:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
UPDATE:<br>,
στο angular 6+ το angular-cli.json
αλλάχθηκε σε angular.json
.
Στο Angular4 καθώς ασχολείστε με το σύστημα @types, θα πρέπει να κάνετε τα εξής,
Κάνετε,
1) npm install --save @types/jquery
2) npm install --save @types/bootstrap
tsconfig.json
αναζητήστε τον πίνακα types και προσθέστε τις καταχωρήσεις jquery και bootstrap,
"types": [
"jquery",
"bootstrap",
"node"
]
Index.html
στην ενότητα head προσθέστε τις ακόλουθες καταχωρήσεις,
<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>
Και αρχίστε να χρησιμοποιείτε jquery και bootstrap και τα δύο.
Εκτελέστε την ακόλουθη εντολή στο έργο σας, δηλαδή npm install [email protected] --save
Μετά την εγκατάσταση της παραπάνω εξάρτησης εκτελέστε την ακόλουθη εντολή npm η οποία θα εγκαταστήσει την ενότητα bootstrap npm install --save @ng-bootstrap/ng-bootstrap
Ελέγξτε αυτό για την αναφορά - https://github.com/ng-bootstrap/ng-bootstrap
Προσθέστε την ακόλουθη εισαγωγή στο app.module import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; και προσθέστε το NgbModule στις εισαγωγές
Στο αρχείο stye.css @import "../node_modules/bootstrap/dist/css/bootstrap.min.css",