Jak używać bootstrap 4 w angular 2?

Bootstrap4 alpha Dla Angular2 CLI (działa również dla Angular4 CLI)

Jeśli używasz angular2 cli/angular 4 CLI wykonaj następujące czynności:

npm i bootstrap@next --save

Spowoduje to dodanie bootstrap 4 do twojego projektu.

Następnie przejdź do pliku src/style.scss lub src/style.css i zaimportuj tam bootstrap:

Za styl.css

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

Za styl.scss

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

Jeśli używasz scss, upewnij się, że zmieniłeś domyślną stylizację na scss w .angular-cli.json:

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

Bootstrap JS Components

Aby komponenty Bootstrap JS działały nadal musisz zaimportować bootstrap.js do .angular-cli.json Pod scripts (powinno to nastąpić automatycznie):

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

Aktualizacja 2017/09/13: Boostrap 4 Beta używa teraz Poppera.js zamiast wiązania.js. Więc w zależności od wersji używasz import albo tether.js (alfa) lub popper.js (beta) w skryptach. Dzięki za Ostrzeżenie @ MinorThreat

Powyższe opcje będą działać, jednak używam tego podejścia poprzez NPM:

1. przejdź do: Bootstrap 4 i pobierz polecenie npm

2. Uruchom polecenie NPM uzyskane z kroku 1 w Twoim projekcie TJ

   npm install [email protected] --save

3. Po zainstalowaniu powyższej zależności uruchom następujące polecenie npm, które zainstaluje moduł bootstrap npm install --save @ng-bootstrap/ng-bootstrap Możesz przeczytać więcej o tym tutaj

4. Dodaj następujący import do app.moduł import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; i dodać NgbModule do imports

5. Twój moduł aplikacji będzie wyglądał tak:

   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. Open angular-cli.json i wstaw nowy wpis do tablicy stylów:

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

7. Otwórz src / app / app.komponent.html i dodaj

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

   Lub jeśli chcesz użyć alertu ng, umieść na swoim app.component.html page

   <ngb-alert [dismissible]="true">I'm a dismissible alert :) </ngb-alert>
   

8. Teraz uruchom swój projekt i powinieneś zobaczyć komunikat alertu bootstrap w przeglądarka.

Uwaga: więcej o komponentach ng można przeczytać tutaj

Proponuję:

• po prostu dołącz link do pliku CSS Bootstrap na swojej stronie index.html
• Using ng-bootstrap - dedykowany zestaw 2 dyrektyw kątowych dla części, w których potrzebne jest zachowanie dynamiczne. W ten sposób nie musisz importować / konfigurować jQuery ani przejmować się JavaScript Bootstrap.

Możesz użyć npm do instalacji najnowszej wersji bootstrap. Można to zrobić za pomocą polecenia:

npm install [email protected]

I po tym może być konieczne zaimportowanie bootstrap.css do głównego pliku css. Czyli styles.css, jeśli używasz angular-cli.

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

Jeśli chcesz wiedzieć więcej skorzystaj z linku: http://technobytz.com/install-bootstrap-4-using-npm.html

Najpierw przejdź do katalogu projektu i wykonaj poniższe kroki.

1) npm install --save @ng-bootstrap/ng-bootstrap (Uruchom to polecenie w wierszu polecenia węzła js)

2)npm install [email protected] (next run this)

3)import {NgbModule} from '@ng-bootstrap/ng-bootstrap'(zapisz to w module aplikacji.ts)

4) Jeśli moduł jest twoim głównym modułem, dołącz ten

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

    (or)

If not root Module

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

5) zapisz to w systemie.config.js

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

6) Dodaj indeks.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" />`

ng add został wprowadzony z Angular 6. Aby zainstalować Bootstrap 4 (ng-bootstrap 2.0.0)

ng add @ng-bootstrap/schematics

Nie zapomnij ponownie uruchomić aplikacji za pomocą ng serve.

W angular 6 dont use npm i bootstrap@next --save may to by działało ale czasami nie lepiej by było dodać te:

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