Winkel 4: Wie wird Bootstrap eingeschlossen?

Ich bin ein Backend-Entwickler und spiele nur mit Angular4 herum. Also habe ich dieses Installations-Tutorial gemacht: https://www.youtube.com/watch?v=cdlbFEsAGXo .

Wie kann ich vor diesem Hintergrund der App Bootstrap hinzufügen, um die Klasse "container-fluid" oder "col-md-6" und ähnliches zu verwenden?

npm install --save bootstrap

Suchen Sie anschließend in angle-cli.json (im Stammordner des Projekts) stylesdie Bootstrap-CSS-Datei wie folgt und fügen Sie sie hinzu:

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

UPDATE:
in Winkel 6+ angular-cli.json wurde geändert zu angular.json.

Video ansehen oder Schritt folgen

Installieren Sie den Bootstrap 4 in Winkel 2 / Winkel 4 / Winkel 5 / Winkel 6

Es gibt drei Möglichkeiten, Bootstrap in Ihr Projekt aufzunehmen:
1) CDN-Link in die Datei index.html einfügen.
2) Bootstrap mit npm installieren und Pfad in angle.json festlegen. Empfohlen.
3) Bootstrap mit npm installieren und Pfad in der Datei index.html festlegen

Ich habe Ihnen empfohlen, zwei Methoden zu befolgen, bei denen Bootstrap mit npm installiert wird, da es in Ihrem Projektverzeichnis installiert ist und Sie problemlos darauf zugreifen können

Methode 1

Fügen Sie Ihrer eckigen Projektdatei index.html den CDN-Pfad Bootstrap, Jquery und popper.js hinzu

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

Methode 2

1) Installieren Sie den Bootstrap mit npm

npm install bootstrap --save

Nach der Installation von Bootstrap 4 benötigen wir zwei weitere Javascript-Pakete, nämlich Jquery und Popper.js, ohne diese beiden Pakete. Bootstrap ist nicht vollständig, da Bootstrap 4 das Paket Jquery und popper.js verwendet, sodass wir auch installieren müssen

2) Installieren Sie JQUERY

npm install jquery --save

3) Installieren Sie Popper.js

npm install popper.js --save

Jetzt wird Bootstrap in Ihrem Projektverzeichnis im Ordner node_modules installiert

open angle.json Diese Datei ist in Ihrem Angular- Verzeichnis verfügbar. Öffnen Sie diese Datei und fügen Sie den Pfad der Bootstrap-, JQuery- und Popper.js-Dateien in den Stilen [] und Skripten [] hinzu. Siehe das folgende Beispiel

"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"
  ],

Hinweis: Ändern Sie keine Sequenz von js-Dateien, es sollte so sein

Methode 3

Installieren Sie den Bootstrap mit npm. Befolgen Sie Methode 2 in Methode 3. Wir legen nur den Pfad in der Datei index.html anstelle der Datei angle.json fest

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>

Jetzt Bootstrap Funktioniert jetzt einwandfrei

Um Bootstrap im Winkel zu konfigurieren / zu integrieren / zu verwenden, müssen wir zuerst das Bootstrap-Paket mit npm installieren.

Installationspaket

$ npm install bootstrap@4.0.0-alpha.6 --save   // for specific version
or
$ npm install bootstrap --save   // for latest version

Hinweis: Der Befehl --save speichert die Abhängigkeit in unserer Winkel-App in der Datei package.json.

Nachdem wir das Paket mit dem obigen Schritt installiert haben, können wir Angular CLI mitteilen, dass diese Stile geladen werden müssen, indem eine der folgenden Optionen oder beides verwendet wird:

Option 1) Hinzufügen zur Datei src / styles.css

Wir können die Abhängigkeiten wie unten gezeigt hinzufügen:

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

Option 2) Hinzufügen zu angle-cli.json oder angle.json

Wir können die Style-CSS-Dateien in die Datei angle-cli.json oder angular.json einfügen, die sich im Stammordner unserer Angular-App befindet (siehe unten):

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

Winkel 4 - Bootstrap / @ ng-Bootstrap-Setup

Installieren Sie zuerst Bootstrap mit dem folgenden Befehl in Ihrem Projekt:

npm install --save bootstrap

"../node_modules/bootstrap/dist/css/bootstrap.min.css" Fügen Sie diese Zeile dann in Stilen zur Datei angle-cli.json (Stammordner) hinzu

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

Installieren Sie nach der Installation der oben genannten Abhängigkeiten ng-bootstrap über:

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

Nach der Installation müssen Sie das Hauptmodul importieren.

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

Danach können Sie alle Bootstrap-Widgets (z. B. Karussell, Modal, Popover, Tooltips, Registerkarten usw.) und verschiedene zusätzliche Extras (Datumsauswahl, Bewertung, Zeitauswahl, Typeahead) verwenden.

In Angular4 sollten Sie beim Umgang mit dem @ types- System folgende Schritte ausführen :

Machen,

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

tsconfig.json

Suchen Sie nach Typen Array und fügen Sie JQuery- und Bootstrap- Einträge hinzu.

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

Index.html

im Kopfbereich folgende Einträge hinzufügen,

  <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>

Beginnen Sie mit der Verwendung von jquery und bootstrap .

Wenn Sie Sass / Scss verwenden, folgen Sie diesen Anweisungen:

Npm installieren

npm install bootstrap --save

und fügen Sie importIhrer sass / scss-Datei eine Anweisung hinzu.

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

Weitere detaillierte Schritte und ein Arbeitsbeispiel finden Sie unter https://loiane.com/2017/08/how-to-add-bootstrap-to-an-angular-cli-project/

Sehr detaillierte Schritte mit der richtigen Erklärung.

Schritte: Installieren von Bootstrap von NPM

Als nächstes müssen wir Bootstrap installieren. Ändern Sie das Verzeichnis in das von uns erstellte Projekt (cd angle-bootstrap-example) und führen Sie den folgenden Befehl aus:

Für Bootstrap 3:

npm install bootstrap --save

Für Bootstrap 4 (derzeit in der Beta):

npm install bootstrap@next --save

ODER Alternative: Lokales Bootstrap-CSS Alternativ können Sie das Bootstrap-CSS auch herunterladen und lokal zu Ihrem Projekt hinzufügen. Ich habe Bootstrap von der Website heruntergeladen und einen Ordnerstil erstellt (dieselbe Ebene wie styles.css):

Hinweis: Platzieren Sie Ihre lokalen CSS-Dateien nicht im Assets-Ordner. Wenn wir die Produktion mit Angular CLI erstellen, werden die in der Datei .angular-cli.json deklarierten CSS-Dateien minimiert und alle Stile in einer einzigen styles.css gebündelt. Der Assets-Ordner wird während des Erstellungsprozesses in den dist-Ordner kopiert (der CSS-Code wird dupliziert). Platzieren Sie Ihre lokalen CSS-Dateien nur unter Assets, wenn Sie sie direkt in die index.html importieren.

Importieren des CSS 1. Wir haben zwei Möglichkeiten, das CSS von Bootstrap zu importieren, das von NPM installiert wurde:

starker Text 1: Konfigurieren Sie .angular-cli.json:

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

2: Direkt in src / style.css oder src / style.scss importieren:

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

Ich persönlich bevorzuge es, alle meine Stile in src / style.css zu importieren, da dies bereits in .angular-cli.json deklariert wurde.

3.1 Alternative: Lokales Bootstrap-CSS Wenn Sie die Bootstrap-CSS-Datei lokal hinzugefügt haben, importieren Sie sie einfach in .angular-cli.json

"styles": [
  "styles/bootstrap-3.3.7-dist/css/bootstrap.min.css",
  "styles.scss"
],

oder src / style.css

@import './styles/bootstrap-3.3.7-dist/css/bootstrap.min.css';

4: Bootstrap-JavaScript-Komponenten mit ngx-bootstrap (Option 1) Wenn Sie keine Bootstrap-JavaScript-Komponenten verwenden müssen (für die JQuery erforderlich ist), ist dies alles, was Sie benötigen. Aber wenn Sie Modalitäten, Akkordeon, Datepicker, Tooltips oder andere Komponenten verwenden müssen, wie können wir diese Komponenten verwenden, ohne jQuery zu installieren?

Es gibt eine Angular-Wrapper-Bibliothek für Bootstrap namens ngx-bootstrap, die wir auch über NPM installieren können:

npm install ngx-bootstrap --save

Hinweis ng2-bootstrap und ngx-bootstrap sind dasselbe Paket. ng2-bootstrap wurde nach #itsJustAngular in ngx-bootstrap umbenannt.

Wenn Sie Bootstrap und ngx-bootstrap gleichzeitig beim Erstellen Ihres Angular CLI-Projekts installieren möchten:

npm install bootstrap ngx-bootstrap --save

4.1: Hinzufügen der erforderlichen Bootstrap-Module in app.module.ts

Gehen Sie den ngx-bootstrap durch und fügen Sie die in Ihrer app.module.ts benötigten Module hinzu. Angenommen, wir möchten die Dropdown-, Tooltip- und Modal-Komponenten verwenden:

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';

@NgModule({
  imports: [
    BrowserModule,
    BsDropdownModule.forRoot(),
    TooltipModule.forRoot(),
    ModalModule.forRoot()
  ],
  // ...
})
export class AppBootstrapModule {}

Da wir die .forRoot () -Methode für jedes Modul aufrufen (aufgrund der ngx-bootstrap-Modulanbieter), sind die Funktionen in allen Komponenten und Modulen Ihres Projekts verfügbar (globaler Bereich).

Wenn Sie alternativ den ngx-bootstrap in einem anderen Modul organisieren möchten (nur zu Organisationszwecken, falls Sie viele bs-Module importieren müssen und Ihr app.module nicht überladen möchten), können Sie ein Modul erstellen app-bootstrap.module.ts, importieren Sie die Bootstrap-Module (mit forRoot ()) und deklarieren Sie sie auch im Exportbereich (damit sie auch anderen Modulen zur Verfügung stehen).

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';

@NgModule({
  imports: [
    CommonModule,
    BsDropdownModule.forRoot(),
    TooltipModule.forRoot(),
    ModalModule.forRoot()
  ],
  exports: [BsDropdownModule, TooltipModule, ModalModule]
})
export class AppBootstrapModule {}

Vergessen Sie nicht, Ihr Bootstrap-Modul in Ihre app.module.ts zu importieren.

{AppBootstrapModule} aus './app-bootstrap/app-bootstrap.module' importieren;

@NgModule({
  imports: [BrowserModule, AppBootstrapModule],
  // ...
})
export class AppModule {}

ngx-bootstrap funktioniert mit Bootstrap 3 und 4. Außerdem habe ich einige Tests durchgeführt und die meisten Funktionen funktionieren auch mit Bootstrap 2.x (ja, ich muss noch alten Code warten).

Hoffe das hilft jemandem!

Getestet in Angular 7.0.0

Schritt 1 - Installieren Sie die erforderlichen Abhängigkeiten

npm install bootstrap (wenn Sie eine bestimmte Version wünschen, geben Sie bitte die Versionsnummer an.)

npm install popper.js (wenn Sie eine bestimmte Version wünschen, geben Sie bitte die Versionsnummer an.)

npm install jquery

Versionen, die ich ausprobiert habe:

"bootstrap": "^4.1.3",
"popper.js": "^1.14.5",
"jquery": "^3.3.1",

Schritt 2: Geben Sie die Bibliotheken in der folgenden Reihenfolge in angle.json an. In der neuesten Version lautet der Name der Konfigurationsdatei angle.json und nicht angle-cli.json

"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/client",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
             "node_modules/bootstrap/dist/css/bootstrap.css",
              "src/styles.scss"
            ],
            "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"
            ]
          },

Für Bootstrap 4.0.0-alph.6

npm install bootstrap@4.0.0-alpha.6 jquery tether --save

Nachdem dies erledigt ist, führen Sie Folgendes aus:

npm install

Jetzt. Öffnen .angular-cli.json Datei und Import Bootstrap, jquery und Haltegurt:

"styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/tether/dist/js/tether.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js"
  ]

Und nun. Du bist bereit zu gehen.

Wie ich sehen kann, haben Sie bereits viele Antworten erhalten, aber Sie können diese Methode ausprobieren.

Es wird empfohlen, jquery nicht im Winkel zu verwenden. Ich bevorzuge die Methode https://github.com/valor-software/ngx-bootstrap/blob/development/docs/getting-started/ng-cli.md , um Bootstrap ohne Verwendung von Bootstrap zu installieren js Komponente, die von jquery abhängt.

npm install ngx-bootstrap bootstrap --save

or

ng add ngx-bootstrap   (Preferred)

Halten Sie Ihre Code-Abfrage frei im Winkel

Führen Sie den folgenden Befehl in Ihrem Projekt aus, dh npm install [email protected] --save

Führen Sie nach der Installation der obigen Abhängigkeit den folgenden Befehl npm aus, mit dem das Bootstrap-Modul npm install --save @ ng-bootstrap / ng-bootstrap installiert wird

Überprüfen Sie dies als Referenz - https://github.com/ng-bootstrap/ng-bootstrap

Fügen Sie den folgenden Import in app.module hinzu. Importieren Sie {NgbModule} aus '@ ng-bootstrap / ng-bootstrap'. und fügen Sie NgbModule zu den Importen hinzu

In Ihrem stye.css @import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

Schritt 1: npm install bootstrap --save

Schritt: 2: Fügen Sie den folgenden Code in angle.json node_modules / bootstrap / dist / css / bootstrap.min.css ein

Schritt 3: Aufschlag

in angular-cli.json hinzufügen

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

Es wird funktionieren, ich habe es überprüft.

Wenn Sie Bootstrap online verwenden möchten und Ihre Anwendung Zugriff auf das Internet hat, können Sie hinzufügen

@import url('https://unpkg.com/[email protected]/dist/css/bootstrap.min.css');

In die Hauptdatei style.css. und es ist der einfachste Weg.

Referenz: angle.io

Hinweis. Diese Lösung lädt Bootstrap von der unpkg-Website und benötigt einen Internetzugang.

Angular 6 CLI, machen Sie einfach:

ng @ ng-bootstrap / schematics hinzufügen 

Um die neueste Version zu installieren, verwenden Sie $ npm i --save bootstrap @ next

Installieren Sie zuerst Bootstrap in Ihrem Projekt mit npm. npm i bootstrap Öffnen Sie anschließend Ihre Datei style.css in Ihrem Projekt und fügen Sie diese Zeile hinzu

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

und das ist es Bootstrap in Ihrem Projekt hinzugefügt

| * | Installieren von Bootstrap 4 für Angular 2, 4, 5, 6 +:

| +> Installiere Bootstrap mit npm

npm install bootstrap --save

npm install popper.js --save

| +> Füge Stile und Skripte zu angle.json hinzu

"architect": [{
    ...
    "styles": [
        "node_modules/bootstrap/dist/css/bootstrap.min.css",
        "src/styles.scss"
    ],
    "scripts": [
        "node_modules/jquery/dist/jquery.js",
        "node_modules/popper.js/dist/umd/popper.min.js",
        "node_modules/bootstrap/dist/js/bootstrap.min.js"
    ]
    ...
}]

Wenn Sie Angular 6+ verwenden, fügen Sie Folgendes zu angular.json hinzu :

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

Hinzufügen von Bootsrap der aktuellen Version 4 zu Angular:

1 / Zuerst müssen Sie Folgendes installieren:

npm install jquery --save
npm install popper.js --save
npm install bootstrap --save

2 / Fügen Sie dann die erforderlichen Skriptdateien zu den Skripten in angle.json hinzu:

"scripts": [
  "node_modules/jquery/dist/jquery.slim.js",
  "node_modules/popper.js/dist/umd/popper.js",
  "node_modules/bootstrap/dist/js/bootstrap.js"
],
enter code here

3 / Fügen Sie abschließend das Bootstrap-CSS zum Styles-Array in angle.json hinzu:

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

Überprüfen Sie diesen Link

Sie arbeiten mit cdn für Bootstrap und JQuery oder installieren Bootstarp direkt in der App mit:

npm install ngx-bootstrap --save

Verwenden Sie auch https://ng-bootstrap.github.io/#/home , dies ist jedoch nicht angemessen

https://medium.com/codingthesmartway-com-blog/using-bootstrap-with-angular-c83c3cee3f4a