it-swarm.com.de

Wie verwende ich Bootstrap in einem Angular-Projekt?

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

Wie kann ich Bootstrap meiner Anwendung hinzufügen?

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

161
user3739018

Wenn Sie die Angular-CLI verwenden, 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 Bootstrap zu installieren:
    $ npm install --save bootstrap. Mit der Option --save 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 einen Verweis auf das "styles"-Array hinzu. Die Referenz muss der relative Pfad zur Bootstrap-Datei sein, die mit npm heruntergeladen wurde. 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 zu Ihren Standardeinstellungen gehören. 

112
LaPriWa

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

Um es zu installieren, fügen Sie diese Dateien einfach 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 auf folgende Weise in Ihre Komponenten einsetzen:

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 {
}
77

Sie müssen lediglich die Bootstrap-Datei in Ihre index.html-Datei einfügen.

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

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

20

Wenn Sie planen, Bootstrap 4 zu verwenden, das für das in diesem Thread erwähnte ng-bootstrap des Angle-Ui-Teams erforderlich ist, sollten Sie dies stattdessen verwenden Datei):

  <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 auch lokal darauf verweisen, nachdem Sie npm install [email protected] --save ausgeführt haben, indem Sie auf die Datei in Ihrer styles.scss-Datei zeigen, sofern Sie SASS verwenden:

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

Die beliebteste Option ist die Verwendung einer Drittanbieter-Bibliothek, die als npm-Paket verteilt wird, wie ng2-bootstrap project https://github.com/valor-software/ng2-bootstrap oder die Angular UI Bootstrap-Bibliothek.

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

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

    { ...
"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 die Namen der richtigen URLs in systemjs.config.js 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 abrufen (weil wir die Abhängigkeit von Bootstrap 3.3.7 hinzugefügt haben) oder über das Web. Dort erhalten wir es vom Web:

<!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 app.module.ts -Datei aus dem/app-Verzeichnis 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 app.component.ts -Datei aus dem/app-Verzeichnis

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

Im ng2-bootstrap-Projekt github gibt es viele Codebeispiele, die zeigen, wie man ng2-bootstrap in verschiedene Angular 2-Projekt-Builds importiert. Es gibt sogar plnkr probe. Die Valor-Software (Autoren der Bibliothek) enthält auch eine API-Dokumentation.

10
luke

In einer Winkelkli-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';

Hinweis1: Das Zeichen ~ ist eine Referenz auf den Ordner node_modules.
Anmerkung2: 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';
8

Es gibt mehrere Möglichkeiten, um angle2 mit Bootstrap zu konfigurieren. Eine der umfassendsten Möglichkeiten, um das Beste daraus zu machen, ist die Verwendung von ng-bootstrap. Mit dieser Konfiguration können wir algular2 die vollständige Kontrolle über unser DOM geben, ohne JQuery und Boostrap zu verwenden .js.

1-Nehmen Sie 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 die css und das Grid-System installieren.

npm install [email protected] --save

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

Jetzt haben wir die Umgebung eingerichtet und dazu müssen wir die .angular-cli.json ändern und dem Stil hinzufügen:

"../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 Moduls ng-boostrap zu unserem Projekt. Dazu müssen wir die app.module.ts hinzufügen:

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

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

Beispiel:

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

Jetzt können wir bootstrap4 in unserem angle2/5-Projekt einsetzen.

6
UHDante

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 [email protected]

Benennen Sie ggf. src/styles.css in styles.scss um und aktualisieren Sie .angular-cli.json, um die Änderung zu berücksichtigen:

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

Dann füge diese Zeile zu styles.scss hinzu:

@import '~bootstrap/scss/bootstrap';
3
jared_flack

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

"dependencies": {

   "bootstrap": "^3.3.7",
}

fügen Sie anschließend den Code in der .angular-cli.json-Datei hinzu 

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

Zum Schluss aktualisieren Sie einfach Ihre npm lokal mit dem Terminal 

$ npm update
3
Tanjeeb Ahsan

Verfahren mit Angular 6+ und Bootstrap 4+: 

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

OR

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

2
veben
  1. npm install --save bootstrap
  2. gehen Sie zu -> angle-cli.json file, suchen Sie die Stileigenschaften und fügen Sie einfach den nächsten Sting hinzu: "../node_modules/bootstrap/dist/css/bootstrap.min.css". Es könnte folgendermaßen aussehen:

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

Ich suchte nach der gleichen Antwort und endlich fand ich diesen Link. Es gibt drei verschiedene Möglichkeiten, wie Sie Bootstrap-CSS in Ihr angle 2-Projekt einfügen. Es hat mir geholfen.

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

1

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

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

0
Langaner

Wenn Sie angle cli verwenden, nachdem Sie bootstrap zu package.json hinzugefügt und das Paket installiert haben, müssen Sie im Abschnitt "styles" von .angular-cli.json boostrap.min.css hinzufügen.

Eine wichtige Sache ist "Wenn Sie Änderungen an .angular-cli.json vornehmen, müssen Sie sie erneut starten, um Konfigurationsänderungen zu übernehmen."

Ref:

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

0
ninetiger

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

1) installiere bootstrap mit npm

 npm install bootstrap

2) Deklarieren Sie Bootstrap npm in der CSS mit unseren Styles

_bootstrap-custom.scss erstellen:

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


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

    ...
    ..
    .

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

@import "bootstrap-custom";

wir werden also alle unsere Kernkomponenten an einem Ort zusammengestellt haben

0
JMF

fügen Sie der HTML-Seite die folgenden Zeilen hinzu

<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">
0
sriram26

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

1) Zip herunterladen und entpacken

2) ng dienen

0
Janka