Wie benutze ich Bootstrap 4 in Winkel 2?

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

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

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

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" />`

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

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.

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.

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 

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>