Wie die Verwendung von Bootstrap in eine Eckige Projekt?

Ich bin gerade dabei meine erste Winkel Anwendung und meine basic-setup fertig ist.

Wie kann ich Bootstrap zu meiner Anwendung?

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

InformationsquelleAutor user3739018 | 2016-03-29
  1. 112

    Wenn du die Winkel-CLI entstehen neue Projekte, es gibt einen anderen Weg, um make bootstrap zugänglich Winkel 2/4.

    1. Via Kommandozeile (command line interface navigieren Sie zu dem Projektordner. Dann nutzen Sie npm zu installieren bootstrap:

      $ npm install --save bootstrap. Die --save option auf bootstrap erscheinen in den Abhängigkeiten.
    2. Bearbeiten .Winkel-cli.json-Datei, die die Konfiguration Ihres Projekts. Es ist in das Projekt-Verzeichnis. Fügen Sie einen Verweis auf die "styles" array. Die Referenz der relative Pfad zur bootstrap-Datei heruntergeladen, mit npm. In meinem Fall ist es: "../node_modules/bootstrap/dist/css/bootstrap.min.css",

    Meinem Beispiel .Winkel-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": {}
  }
}

    Nun bootstrap sollte Teil der Standard-Einstellungen.

    • Ich denke bootstrap.min.js sollte Hinzugefügt werden, dass die "Skripte" als auch in dieser Lösung. Sind Sie damit einverstanden?
    • Dies ist zumindest nicht zwingend.
    • Ich habe bootstrap installiert, mit Schritt 1 und dann einfügen @import "../node_modules/bootstrap/dist/css/bootstrap.min.css"; in meinem src/styles.css-Datei wie beschrieben in dem folgenden Beitrag stackoverflow.com/a/40054193/3777549. Schritt 2 in diesem Beitrag war für mich nicht nötig, ich bin mit @Winkel/cli: 1.3.1
    InformationsquelleAutor LaPriWa
  2. 77

    Integration mit Angular2 auch über die ng2-bootstrap Projekt : https://github.com/valor-software/ng2-bootstrap.

    Installieren Sie einfach diese Dateien in Ihrem Haupt-HTML-Seite:

    <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 in Ihre Komponenten auf diese Weise:

    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 {
}
    • Wenn Sie mit der ng2-bootstrap-version, die nicht von Ihnen erwartet wird verwenden Sie das mitgelieferte css? Ich bin mir nicht sicher, warum Sie verwenden würden, CDN css oder ist das wie es gemacht werden soll? Ich bin neu in diesem, zu.
    • Neue angular2 nicht-Direktive innerhalb @Komponente
    InformationsquelleAutor Thierry Templier
  3. 38

    Alles, was Sie tun müssen, ist, gehören der boostrap css in Ihrem index.html Datei.

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    • Gibt es eine Möglichkeit um es von der lokalen Ressource, anstatt CDN?
    • Ja, href sollte nur gesetzt werden, um den Pfad der lokalen Datei. Wenn Sie Probleme haben, würde ich vorschlagen, auf der Suche "statischen " Datei", von welchem web-server Sie verwenden.
    • Es funktioniert nicht auf eckig 6+, für Dateien, die andere als index.html. zB.app.component.html. bitte sagen Sie.
    InformationsquelleAutor user2263572
  4. 20

    Andere sehr gute (bessere?) alternative ist die Verwendung eine Reihe von widgets erstellt, die von der angular-ui-team: https://ng-bootstrap.github.io

    InformationsquelleAutor pkozlowski.opensource
  5. 15

    Wenn Sie planen, über die Verwendung von Bootstrap-4, die erforderlich ist, mit der angular-ui-team ng-bootstrap, die erwähnten in diesem thread, werden Sie wollen, um diese stattdessen zu verwenden (HINWEIS: Sie brauchen nicht zu zählen die JS-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">

    Können Sie auch auf dieses lokal nach dem ausführen npm install [email protected] --save indem Sie auf die Datei in Ihrem styles.scss Datei, vorausgesetzt, Sie sind mit SASS:

    @import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';
    • Können Sie bitte erklären, warum Sie nicht brauchen, um die JS-Datei. Sie es, weil NPM installiert? Auch, Thierry Templier Beispiel, er importiert ng2-bootstrap/ng2-bootstrap zu verwenden, eine Warnmeldung. Ist die Verwendung der gleichen für die bootstrap-4?
    • Ja, weil von NPM. Es auch Staaten, die in der Dokumentation.
    • Danke. Ich habe versucht, dein zweites Beispiel. Ich bekam eine Fehlermeldung, dass die Ressource nicht geladen werden konnte von node_modules.
    • Siehe aktualisierte Antwort. Wenn Sie mit SASS kann man nur tun, was ich Tat und @import es in Ihr SASS-Datei. Wenn nicht, können Sie versuchen, hinzufügen, um Ihre vendor.ts Datei, aber ich bin nicht mit, dass in meinem code.
    InformationsquelleAutor occasl
  6. 10

    Die beliebteste option ist die Verwendung von einigen Drittanbieter-Bibliothek verteilt als npm-Paket wie ng2-bootstrap-Projekt https://github.com/valor-software/ng2-bootstrap oder Angular-UI-Bootstrap-Bibliothek.

    Ich persönlich benutze ng2-bootstrap. Es gibt viele Möglichkeiten, es zu konfigurieren, da sich die Konfiguration hängt davon ab, wie Ihre Kantigen Projekt zu bauen. Unter ich-post-Beispiel-Konfiguration basierend auf Winkel-2 QuickStart Projekt https://github.com/angular/quickstart

    Zunächst fügen wir die Abhängigkeiten in unserem Paket.json

        { ...
"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 haben wir die map-Namen, um die richtige URL ist in systemjs.config.js

    (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 haben zum importieren von bootstrap .css-Datei in index.html. Wir können es aus /node_modules/bootstrap-Verzeichnis auf unserer Festplatte (weil wir Hinzugefügt bootstrap 3.3.7 Abhängigkeit) oder aus dem web. Da sind wir abrufen 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>

    Sollten wir Bearbeiten unsere app.- Modul.ts-Datei aus /Verzeichnis app

    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 endlich ist unsere app.Komponente.ts-Datei aus /Verzeichnis app

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

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

export class AppComponent {

    constructor() { }

}

    Dann haben wir die Installation unserer bootstrap und ng2-bootstrap-Abhängigkeiten, bevor wir unsere app. Wir gehen sollten, um unser Projekt-Verzeichnis, und geben Sie

    npm install

    Endlich können wir beginnen unsere app

    npm start

    Gibt es viele code-Beispiele auf ng2-bootstrap-Projekt github zeigt, wie import-ng2-bootstrap-verschiedene Winkel-2 Projekt erstellt. Es gibt sogar plnkr Probe. Dort ist auch die API-Dokumentation auf Valor-software (Autorinnen und Autoren der Bibliothek) website.

    InformationsquelleAutor luke
  7. 9

    In eine eckige cli Umgebung, die einfachste Möglichkeit die ich gefunden habe, ist folgende:


    1. Lösung in einer Umgebung mit scss stylesheets

    npm install bootstrap-sass —save

    In der Art.scss:

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

    Anmerkung 1: Die ~ Charakter ist ein Verweis auf nodes_modules Ordner.

    Anmerkung 2: Wie wir mit scss, wir können alle boostrap Variablen, die wir wollen.


    2. Lösung in einer Umgebung mit css-stylesheets

    npm install bootstrap —save

    In der Art.css:

    @import '~bootstrap/dist/css/bootstrap.css';
    InformationsquelleAutor Michael P. Bazos
  8. 6

    Gibt es mehrere Möglichkeiten zum konfigurieren angular2 mit Bootstrap, eine der umfassendsten Möglichkeiten, um die meisten es ist die Verwendung von ng-bootstrap, mit dieser Konfiguration geben wir algular2 die vollständige Kontrolle über unseren DOM, die Vermeidung der Notwendigkeit der Verwendung der JQuery-und Boostrap.js.

    1-als Ausgangspunkt Nehmen ein neues Projekt erstellt mit Winkel-CLI und mit der Befehlszeile installieren, ng-bootstrap:

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

    Hinweis: Mehr Informationen erhalten Sie unter https://ng-bootstrap.github.io/#/getting-started

    2-Dann müssen wir auf install bootstrap für die css und das grid-system.

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

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

    Nun haben wir das setup die Umwelt und für das müssen wir ändern .Winkel-cli.json hinzufügen, um den Stil:

    "../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"
      }
    }
  ]

    Den nächsten Schritt fügen Sie die ng-boostrap-Modul für unser Projekt, zu tun, so müssen wir hinzufügen, auf der app.- Modul.ts:

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

    Dann fügen Sie das neue Modul an die Anwendung app: NgbModule.forRoot()

    Beispiel:

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

    Nun können wir beginnen mit bootstrap4 auf unserer angular2/5 Projekt.

    InformationsquelleAutor UHDante
  9. 3

    Ich hatte die gleiche Frage und fand diesen Artikel mit eine wirklich saubere Lösung:

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

    Hier sind die Anweisungen, aber mit meinem vereinfachte Lösung:

    Installieren Bootstrap-4 (Anweisungen):

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

    Wenn erforderlich, benennen Sie Ihre src/styles.css zu Stile.scss und update .Winkel-cli.json, um die änderung widerzuspiegeln:

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

    Dann fügen Sie diese Zeile zu Stile.scss:

    @import '~bootstrap/scss/bootstrap';
    InformationsquelleAutor jared_flack
  10. 3

    einfach überprüfen Sie Ihr Paket.json-Datei und hinzufügen von Abhängigkeiten für die bootstrap -

    "dependencies": {

   "bootstrap": "^3.3.7",
}

    dann fügen Sie folgenden code auf .angular-cli.json Datei 

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

    Schließlich müssen Sie nur aktualisieren Sie Ihre npm lokal mit terminal 

    $ npm update
    InformationsquelleAutor Tanjeeb Ahsan
  11. 2
    1. npm install --save-bootstrap

    2. gehen -> Winkel-cli.json - Datei, finden Stile, die Eigenschaften und fügen Sie einfach neben sting: "../node_modules/bootstrap/dist/css/bootstrap.min.css", Es könnte sein, sieht so aus:

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

    Verfahren mit eckiger 6+ & Bootstrap-4+ :

    1. Öffnen Sie eine shell auf das Verzeichnis des Projektes
    2. Bootstrap installieren mit dem Befehl : npm install --save [email protected]
    3. Bootstrap müssen die Abhängigkeit von jquery, so dass, wenn Sie es nicht haben, können Sie es installieren mit dem Befehl : npm install --save jquery 1.9.1
    4. Müssen Sie möglicherweise beheben Sicherheitsanfälligkeit mit dem Befehl : npm audit fix
    5. In Ihrem Haupt-Stil.scss-Datei, fügen Sie die folgende Zeile : @import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

    ODER

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

    InformationsquelleAutor veben
  13. 1

    Ich war auf der Suche für die gleiche Antwort, und schließlich fand ich diesen link. Finden Sie erläutert drei verschiedene Möglichkeiten, wie man hinzufügen bootstrap-css in Ihre Winkel-2-Projekt. Es hat mir geholfen.

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

    InformationsquelleAutor MiroslavStojakovic
  14. 0

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

    Diese Bibliothek verwenden bootstrap-4 Stile-und nicht benötigen jquery.

    InformationsquelleAutor Langaner
  15. 0

    fügen Sie die folgenden Zeilen in Ihre html-Seite

    <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">
    InformationsquelleAutor sriram26
  16. 0

    Wenn Sie eckig cli-nach dem hinzufügen von bootstrap in-Paket.json und installieren Sie das Paket, alles, was Sie brauchen, ist boostrap.min.css in .Winkel-cli.json-die "styles" Abschnitt.

    Eine wichtige Sache ist ", Wenn Sie änderungen an .Winkel-cli.json, die Sie brauchen, um wieder zu starten ng dienen der pick-up-änderungen an der Konfiguration."

    Ref:

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

    InformationsquelleAutor ninetiger
  17. 0

    Eine weitere sehr gute alternative ist die Verwendung der Skelett Winkel 2/4 + Bootstrap 4

    1) Download als ZIP und entpacken Sie die zip-Ordner

    2) ng dienen

    InformationsquelleAutor Janka
  18. 0

    Meine Empfehlung wäre, statt Sie zu deklarieren in der json-Stift, um es in der scss, so dass alles kompiliert wird und an einem Ort.

    1)installieren Sie den bootstrap mit npm

     npm install bootstrap

    2) Erklären bootstrap npm in der 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) Innerhalb der Stile.scss wir legen

    @import "bootstrap-custom";

    also wir haben alle unsere Kern kompiliert und in einem Ort

    InformationsquelleAutor JMF
Schreibe einen Kommentar