Wie verwende ich Bootstrap in einem Angular-Projekt?

Ich starte meine erste Angular- Anwendung und meine Grundeinstellung ist abgeschlossen.

Wie kann ich meiner Anwendung Bootstrap hinzufügen ?

Wenn Sie ein Beispiel nennen können, wäre dies eine große Hilfe.

Vorausgesetzt, Sie verwenden die Angular-CLI , um neue Projekte zu generieren, gibt es eine andere Möglichkeit, Bootstrap in Angular 2/4 zugänglich zu machen .

1. Navigieren Sie über die Befehlszeilenschnittstelle zum Projektordner. Verwenden Sie dann npm , um den Bootstrap zu installieren :
   $ npm install --save bootstrap. Mit dieser --saveOption wird Bootstrap in den Abhängigkeiten angezeigt.
2. Bearbeiten Sie die Datei .angular-cli.json, mit der Ihr Projekt konfiguriert wird. Es befindet sich im Projektverzeichnis. Fügen Sie dem "styles"Array einen Verweis hinzu . Die Referenz muss der relative Pfad zu der mit npm heruntergeladenen Bootstrap-Datei sein. In meinem Fall ist es:"../node_modules/bootstrap/dist/css/bootstrap.min.css",

Mein Beispiel .angular-cli.json:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "bootstrap-test"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

Jetzt sollte Bootstrap Teil Ihrer Standardeinstellungen sein.

Eine Integration mit Angular2 ist auch über das ng2-bootstrap- Projekt verfügbar : https://github.com/valor-software/ng2-bootstrap .

Um es zu installieren, fügen Sie einfach diese Dateien in Ihre HTML-Hauptseite ein:

<script src="https://cdnjs.cloudflare.com/ajax/libs/ng2-bootstrap/x.x.x/ng2-bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

Dann können Sie es folgendermaßen in Ihre Komponenten einbauen:

import {Component} from 'angular2/core';
import {Alert} from 'ng2-bootstrap/ng2-bootstrap';

@Component({
  selector: 'my-app',
  directives: [Alert],
  template: `<alert type="info">ng2-bootstrap hello world!</alert>`
})
export class AppComponent {
}

Alles, was Sie tun müssen, ist, das Boostrap-CSS in Ihre index.html-Datei aufzunehmen.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

Eine weitere sehr gute (bessere?) Alternative ist die Verwendung einer Reihe von Widgets, die vom Angular-UI-Team erstellt wurden: https://ng-bootstrap.github.io

Wenn Sie Bootstrap 4 verwenden möchten, das für den in diesem Thread erwähnten ng-bootstrap des Angular-UI-Teams erforderlich ist, sollten Sie diesen stattdessen verwenden (HINWEIS: Sie müssen die JS-Datei nicht einschließen):

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

Sie können dies auch lokal nach dem Ausführen referenzieren , indem Sie npm install [email protected] --saveauf die Datei in Ihrer styles.scssDatei zeigen, vorausgesetzt, Sie verwenden SASS:

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

Die beliebteste Option ist die Verwendung einer Bibliothek eines Drittanbieters, die als npm-Paket verteilt wird, wie z. B. das ng2-Bootstrap-Projekt https://github.com/valor-software/ng2-bootstrap oder die Angular UI Bootstrap-Bibliothek.

Ich persönlich benutze ng2-bootstrap. Es gibt viele Möglichkeiten, es zu konfigurieren, da die Konfiguration davon abhängt, wie Ihr Angular-Projekt erstellt wird. Darunter poste ich eine Beispielkonfiguration basierend auf dem Angular 2 QuickStart-Projekt https://github.com/angular/quickstart

Zunächst fügen wir Abhängigkeiten in unsere package.json ein

    { ...
"dependencies": {
    "@angular/common": "~2.4.0",
    "@angular/compiler": "~2.4.0",
    "@angular/core": "~2.4.0",

    ...

    "bootstrap": "^3.3.7",
    "ng2-bootstrap": "1.1.16-11"
  },
... }

Dann müssen wir den richtigen URLs in systemjs.config.js Namen zuordnen

(function (global) {
  System.config({
    ...
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',

      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

      //bootstrap
      'moment': 'npm:moment/bundles/moment.umd.js',
      'ng2-bootstrap': 'npm:ng2-bootstrap/bundles/ng2-bootstrap.umd.js',

      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
    },
...
  });
})(this);

Wir müssen die Bootstrap-CSS-Datei in index.html importieren. Wir können es aus dem Verzeichnis / node_modules / bootstrap auf unserer Festplatte (weil wir die Abhängigkeit von Bootstrap 3.3.7 hinzugefügt haben) oder aus dem Internet herunterladen. Dort erhalten wir es aus dem Internet:

<!DOCTYPE html>
<html>
  <head>
    ...
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    ...
  </head>

  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

Wir sollten unsere Datei app.module.ts aus dem Verzeichnis / app bearbeiten

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

//bootstrap alert import part 1
import {AlertModule} from 'ng2-bootstrap';

import { AppComponent }  from './app.component';


@NgModule({
  //bootstrap alert import part 2
  imports:      [ BrowserModule, AlertModule.forRoot() ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Und schließlich unsere Datei app.component.ts aus dem Verzeichnis / app

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
    <alert type="success">
        Well done!
    </alert>
    `
})

export class AppComponent {

    constructor() { }

}

Dann müssen wir unsere Bootstrap- und ng2-Bootstrap-Abhängigkeiten installieren, bevor wir unsere App ausführen. Wir sollten in unser Projektverzeichnis gehen und eingeben

npm install

Endlich können wir unsere App starten

npm start

Es gibt viele Codebeispiele auf ng2-bootstrap project github, die zeigen, wie ng2-bootstrap in verschiedene Angular 2-Projektbuilds importiert wird. Es gibt sogar plnkr Probe. Es gibt auch eine API-Dokumentation auf der Valor-Software-Website (Autoren der Bibliothek).

In einer Winkel-Cli-Umgebung ist der einfachste Weg, den ich gefunden habe, der folgende:

1. Lösung in einer Umgebung mit s̲c̲s̲s̲-Stylesheets

npm install bootstrap-sass —save

In style.scss:

$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
@import '~bootstrap-sass/assets/stylesheets/bootstrap';

Hinweis 1: Das ~Zeichen verweist auf den Ordner node_modules .
Hinweis 2: Da wir scss verwenden, können wir alle gewünschten Boostrap-Variablen anpassen.

2. Lösung in einer Umgebung mit c̲s̲s̲-Stylesheets

npm install bootstrap —save

In style.css:

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

Es gibt verschiedene Möglichkeiten, angle2 mit Bootstrap zu konfigurieren. Eine der vollständigsten Möglichkeiten, das Beste daraus zu machen, ist die Verwendung von ng-bootstrap. Mit dieser Konfiguration geben wir algular2 die vollständige Kontrolle über unser DOM, ohne dass JQuery und Boostrap verwendet werden müssen .js.

1-Nehmen Sie als Ausgangspunkt ein neues Projekt, das mit Angular-CLI erstellt wurde, und installieren Sie ng-bootstrap über die Befehlszeile:

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

Hinweis: Weitere Informationen unter https://ng-bootstrap.github.io/#/getting-started

2-Dann müssen wir Bootstrap für das CSS und das Grid-System installieren.

npm install bootstrap@4.0.0-beta.2 --save

Hinweis: Weitere Informationen unter https://getbootstrap.com/docs/4.0/getting-started/download/

Jetzt haben wir die Umgebung eingerichtet und dafür müssen wir die .angular-cli.json ändern, die dem Stil hinzugefügt wird:

"../node_modules/bootstrap/dist/css/bootstrap.min.css"

Hier ist ein Beispiel:

"apps": [
    {
      "root": "src",
        ...
      ],
      "index": "index.html",
       ...
      "prefix": "app",
      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ]

Der nächste Schritt ist das Hinzufügen des ng-boostrap-Moduls zu unserem Projekt. Dazu müssen wir die Datei app.module.ts hinzufügen:

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

Fügen Sie dann das neue Modul zur Anwendungs-App hinzu: NgbModule.forRoot ()

Beispiel:

@NgModule({
  declarations: [
    AppComponent,
    AppNavbarComponent
  ],
  imports: [
    BrowserModule,
    NgbModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Jetzt können wir bootstrap4 für unser angle2 / 5-Projekt verwenden.

Ich hatte die gleiche Frage und fand diesen Artikel mit einer wirklich sauberen Lösung:

http://leon.radley.se/2017/01/angular-cli-and-bootstrap-4/

Hier sind die Anweisungen, aber mit meiner vereinfachten Lösung:

Installieren Sie Bootstrap 4 ( Anweisungen ):

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

Benennen Sie bei Bedarf Ihre src / styles.css in styles.scss um und aktualisieren Sie .angular-cli.json , um die Änderung widerzuspiegeln:

"styles": [
  "styles.scss"
],

Fügen Sie diese Zeile dann zu styles.scss hinzu :

@import '~bootstrap/scss/bootstrap';

Überprüfen Sie einfach Ihre package.json-Datei und fügen Sie Abhängigkeiten für Bootstrap hinzu

"dependencies": {

   "bootstrap": "^3.3.7",
}

Fügen Sie dann den folgenden Code in die .angular-cli.jsonDatei ein

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

Schließlich aktualisieren Sie einfach Ihre npm lokal mithilfe des Terminals

$ npm update

1. npm install - Bootstrap speichern

2. Gehen Sie zu -> angle-cli.json , suchen Sie die Stileigenschaften und fügen Sie einfach den nächsten Stich hinzu: "../node_modules/bootstrap/dist/css/bootstrap.min.css". Es könnte so aussehen:

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

Vorgehensweise mit Angular 6+ & Bootstrap 4+:

1. Öffnen Sie eine Shell im Ordner Ihres Projekts
2. Installieren Sie den Bootstrap mit dem folgenden Befehl: npm install --save [email protected]
3. Bootstrap benötigt die Abhängigkeits-Abfrage. Wenn Sie sie nicht haben, können Sie sie mit dem folgenden Befehl installieren: npm install --save jquery 1.9.1
4. Möglicherweise müssen Sie die Sicherheitsanfälligkeit mit dem folgenden Befehl beheben: npm audit fix
5. Fügen Sie in Ihrer Hauptdatei style.scss die folgende Zeile hinzu: @import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

ODER

Fügen Sie diese Zeile Ihrer Hauptdatei index.html hinzu: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

Ich suchte nach der gleichen Antwort und fand schließlich diesen Link. Es gibt drei verschiedene Möglichkeiten, wie Sie Ihrem Angular 2-Projekt Bootstrap-CSS hinzufügen können. Es hat mir geholfen.

Hier ist der Link: http://codingthesmartway.com/using-bootstrap-with-angular/

Meine Empfehlung wäre, anstatt es im json-Stift zu deklarieren, es in das scss zu legen, damit alles kompiliert und an einem Ort ist.

1) Installieren Sie den Bootstrap mit npm

 npm install bootstrap

2) Deklarieren Sie Bootstrap npm im CSS mit unseren Styles

Erstellen _bootstrap-custom.scss:

  // Required
  @import "bootstrap-custom-required";


  // Optional
  @import "~bootstrap/scss/root";
  @import "~bootstrap/scss/grid";
  @import "~bootstrap/scss/tables";

    ...
    ..
    .

3) In die Datei styles.scss fügen wir ein

@import "bootstrap-custom";

So werden wir unseren gesamten Kern an einem Ort zusammenstellen

Sie können versuchen, die Prettyfox-UI-Bibliothek http://ng.prettyfox.org zu verwenden

Diese Bibliothek verwendet Bootstrap 4-Stile und benötigt keine Abfrage.

Fügen Sie die folgenden Zeilen in Ihre HTML-Seite ein

<script src="https://cdnjs.cloudflare.com/ajax/libs/ng2-bootstrap/x.x.x/ng2-bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

Wenn Sie Angular Cli verwenden, nachdem Sie Bootstrap in package.json hinzugefügt und das Paket installiert haben, müssen Sie nur boostrap.min.css in den Abschnitt "styles" von .angular-cli.json einfügen.

Eine wichtige Sache ist: "Wenn Sie Änderungen an .angular-cli.json vornehmen, müssen Sie ng serve neu starten, um Konfigurationsänderungen zu erfassen."

Ref:

https://github.com/angular/angular-cli/wiki/stories-include-bootstrap

Eine weitere sehr gute Alternative ist die Verwendung des Skeletts Angular 2/4 + Bootstrap 4

1) Laden Sie ZIP herunter und extrahieren Sie den Zip-Ordner

2) Aufschlag