it-swarm.com.de

Wie benutze ich Bootstrap 4 in Winkel 2?

Ich baue eine Winkel-2-App, die in TypeScript geschrieben ist. Es würde das Bootstrap 4-Framework in Kombination mit einigen benutzerdefinierten Themen verwenden. Ist dies möglich?

Das npm-Paket "ng2-bootstrap" funktioniert nicht, da ich die Bootstrap-Klassen nicht verwenden kann. Stattdessen werden benutzerdefinierte Komponenten bereitgestellt. ( http://github.com/valor-software/ng2-bootstrap )

Kann ich in meinem angle 2-Projekt sass bootstrap 4 aus source erstellen, da es auch sass für das Styling verwendet?

43
aqwsez

Um eine visuelle Bibliothek zu verwenden, für die JQuery erforderlich ist, gehen Sie wie folgt vor:

  • Fügen Sie die Bibliotheks-CSS im Index hinzu.
  • Fügen Sie die Jquery-JS-Datei zum Index hinzu.
  • Fügen Sie die Bibliotheks-js-Dateien im Index hinzu.
  • Installieren Sie die Bibliotheksdefinitionsdateien (d.ts).
  • Installieren Sie Jquery-Definitionsdateien (d.ts).

Wenn die Bibliothek keine Definitionsdateien hat, können Sie:

  • Erstellen Sie die Definition selbst;
  • Erstellen Sie eine globale Variable mit demselben Namen des Bibliotheksobjekts, um keine Compiler-Fehler zu erhalten.
  • Verwendung bei Fehlern ( dies ist die schlechteste Option );

Jetzt können Sie die Bibliothek in TypeScript verwenden.

Bootstrap4 alpha für Angular2 CLI (funktioniert auch für Angular4 CLI)

Wenn Sie angle2 cli/angle 4 cli verwenden, gehen Sie wie folgt vor:

npm i [email protected] --save

Dadurch wird Bootstrap 4 zu Ihrem Projekt hinzugefügt.

Gehen Sie als nächstes zu Ihrer src/style.scss- oder src/style.css-Datei und importieren Sie dort Bootstrap:

Für style.css

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

Für style.scss

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/scss/bootstrap";

Wenn Sie scss verwenden, stellen Sie sicher, dass Sie Ihren Standardstil in .angular-cli.json in scss ändern:

  "defaults": {
    "styleExt": "scss",
    "component": {}
  }

Bootstrap JS-Komponenten

Damit Bootstrap JS-Komponenten funktionieren, müssen Sie weiterhin bootstrap.js in .angular-cli.json unter scriptsimportieren (dies sollte automatisch geschehen):

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

Update 2017/09/13: Boostrap 4 Beta verwendet jetzt popper.js anstelle von tether.js. Abhängig davon, welche Version Sie verwenden, importieren Sie entweder tether.js (alpha) oder popper.js (beta) in Ihre Skripte. Vielen Dank für das Heads-Up @ MinorThreat

92
mahatmanich

Die oben genannten Optionen werden funktionieren, jedoch verwende ich diesen Ansatz über NPM: 

  1. Navigieren Sie zu: Bootstrap 4 und rufen Sie den Befehl npm ab
  2. Führen Sie den NPM-Befehl aus, den Sie aus Schritt 1 in Ihrem Projekt erhalten 

    npm install [email protected] --save

  3. Nach der Installation der obigen Abhängigkeit führen Sie den folgenden npm-Befehl aus, mit dem das Bootstrap-Modul installiert wird npm install --save @ng-bootstrap/ng-bootstrap Weitere Informationen hierzu hier

  4. Fügen Sie den folgenden Import in app.module import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; hinzu und fügen Sie NgbModule zur imports hinzu.
  5. Ihr App-Modul sieht folgendermaßen aus: 

    import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
    
    @NgModule({
       declarations: [
       AppComponent,
       WeatherComponent
    ],
      imports: [
      BrowserModule,
      FormsModule,
      HttpModule,
      NgbModule.forRoot(), // Add Bootstrap module here.
    ],
      providers: [],
      bootstrap: [AppComponent]
    })
    
    export class AppModule { }
    
  6. Öffnen Sie die Datei angle-cli.json und fügen Sie einen neuen Eintrag in das Styles-Array ein: 

    "styles": [
      "styles.css",
       "../node_modules/bootstrap/dist/css/bootstrap.min.css"
    ],
    
  7. Öffnen Sie src/app/app.component.html und fügen Sie hinzu

    <alert type="success">hello</alert>
    

    oder wenn Sie ng alert verwenden möchten, platzieren Sie Folgendes in Ihrem app.component.html page

    <ngb-alert [dismissible]="true">I'm a dismissible alert :) </ngb-alert>
    
  8. Führen Sie nun Ihr Projekt aus und Sie sollten die Bootstrap-Warnmeldung im Browser sehen.

HINWEIS: Weitere Informationen zu ng-Komponenten finden Sie hier

38
Code Ratchet

Ich würde vorschlagen:

  • Fügen Sie einfach einen Link zur Bootstrap-CSS-Datei in Ihre index.html-Seite ein
  • Verwenden Sie ng-bootstrap - einen speziellen Satz von Angular 2-Direktiven für Teile, in denen dynamisches Verhalten erforderlich ist. Auf diese Weise müssen Sie jQuery weder importieren/einrichten noch sich um Bootstraps JavaScript kümmern.

Sie können npm verwenden, um die neueste Bootstrap-Version zu installieren. Dies kann mit dem Befehl erfolgen:

npm install [email protected]

Anschließend müssen Sie möglicherweise bootstrap.css in Ihre css-Hauptdatei importieren. Welches wird styles.css sein, wenn Sie angle-cli verwenden.

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

Wenn Sie mehr wissen möchten, verwenden Sie bitte den Link: http://technobytz.com/install-bootstrap-4-using-npm.html

3
Aravind

Gehen Sie zuerst in Ihr Projektverzeichnis und folgen Sie den unten angegebenen Schritten.

1) npm install --save @ng-bootstrap/ng-bootstrap (diesen Befehl in der Eingabeaufforderung des Knotens js ausführen)

2) npm install [email protected] (nächstes ausführen)

3) import {NgbModule} from '@ng-bootstrap/ng-bootstrap' (schreibe dies in app module.ts)

4) Wenn das Modul Ihr Stammmodul ist, fügen Sie dieses hinzu

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

    (or)

Wenn nicht root-Modul

`@NgModule({
 declarations: [OtherComponent, ...],
 imports: [NgbModule, ...]
})`

5) Schreiben Sie dies in system.config.js

`map: {
'@ng-bootstrap/ng-bootstrap': 'node_modules/@ng-bootstrap/ng-
bootstrap/bundles/ng-bootstrap.js',
}`

6) Addiere in Index.html

`<script src="../node_modules/jquery/dist/jquery.min.js"></script>
 <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
 <link rel="stylesheet" type="text/css" 
 href="../node_modules/bootstrap/dist/css/bootstrap.min.css" />`
1

Angular v6 Bootstrap v4 und SCSS

Dies funktioniert gut mit einem Winkelprojekt von 7 Scss

Führen Sie die folgenden Befehle aus, um bootstrap, jQuery und popper.js zu installieren

npm install --save bootstrap jquery popper.js

jQuery und popper.js sind Voraussetzungen für die Ausführung von bootstrap4 (weitere Informationen finden Sie unter https://getbootstrap.com .)

Wechseln Sie zu Ihrer Datei angle.json im Stammverzeichnis. Bearbeiten 

architekt -> Build -> Optionen -> Skripte

knoten wie folgt

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

Dadurch werden Javascript-Funktionen des Bootstraps für Ihr Projekt aktiviert.

Dann gehe zur src->styles.scss-Datei und füge die folgende Zeile hinzu

@import '~bootstrap/scss/bootstrap';
0

ng add wurde mit Angular 6 eingeführt. Installieren von Bootstrap 4 (ng-bootstrap 2.0.0)

ng add @ng-bootstrap/schematics

Vergessen Sie nicht, Ihre App mit ng serve neu zu starten.

0
kostjakon

In Winkel 6: Installieren Sie zuerst Bootstrap im Projektverzeichnis npm install bootstrap. Wenn Sie sich die Angular.JSON-Datei ansehen, werden Sie feststellen, dass styles.css bereits referenziert ist. Fügen Sie in styles.css einfach @import "~bootstrap/dist/css/bootstrap.css"; hinzu.

0
skydev

Bootstrap mithilfe von Angular CLI hinzufügen:

step 1. npm i [email protected] --save 
step 2. open angular.json and then add bootstrap:
 "styles": [
      "node_modules/bootstrap/dist/css/bootstrap.min.css",
      "src/styles.scss"
    ]
step 3. restart the server to see the changes
        ng serve 
0
sunny rai

In eckigen 6 benutze npm nicht i bootstrap @ next --save könnte funktionieren, aber manchmal ist es nicht besser, diese hinzuzufügen:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js" integrity="sha384-pjaaA8dDz/5BgdFUPX6M/9SUZv4d12SUPF0axWc+VRZkx5xU3daN+lYb49+Ax+Tl" crossorigin="anonymous"></script>
0
nikhil sugandh