Jak używać Bootstrap w projekcie Angular?

170

Uruchamiam moją pierwszą aplikację Angular i moja podstawowa konfiguracja jest zakończona.

Jak mogę dodać Bootstrap do mojej aplikacji?

Jeśli możesz podać przykład, byłoby to bardzo pomocne.

user3739018
źródło

Odpowiedzi:

119

Zakładając, że używasz Angular-CLI do generowania nowych projektów, istnieje inny sposób na udostępnienie bootstrapu w Angular 2/4 .

  1. Poprzez interfejs wiersza poleceń przejdź do folderu projektu. Następnie użyj npm zainstalować bootstrap:
    $ npm install --save bootstrap. Ta --saveopcja spowoduje, że bootstrap pojawi się w zależnościach.
  2. Edytuj plik .angular-cli.json, który konfiguruje Twój projekt. Znajduje się w katalogu projektu. Dodaj odwołanie do "styles"tablicy. Odwołanie musi być ścieżką względną do pliku ładowania początkowego pobranego za pomocą npm. W moim przypadku jest to:"../node_modules/bootstrap/dist/css/bootstrap.min.css",

Mój przykład .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": {}
  }
}

Teraz bootstrap powinien być częścią twoich ustawień domyślnych.

LaPriWa
źródło
1
Myślę, że bootstrap.min.js należy dodać do „skryptów” również w tym rozwiązaniu. Czy sie zgadzasz?
hamalaiv
1
@hamalaiv To przynajmniej nie jest obowiązkowe.
LaPriWa
3
Mam zainstalowany bootstrap w kroku 1, a następnie wstawiam @import "../node_modules/bootstrap/dist/css/bootstrap.min.css"; w moim pliku src / styles.css, jak opisano w następującym postu stackoverflow.com/a/40054193/3777549 . Krok 2 w tym poście nie był dla mnie konieczny, używam @
angular
77

Integracja z Angular2 jest również dostępna poprzez projekt ng2-bootstrap : https://github.com/valor-software/ng2-bootstrap .

Aby go zainstalować, po prostu umieść te pliki na swojej głównej stronie HTML:

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

Następnie możesz użyć go w swoich komponentach w ten sposób:

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 {
}
Thierry Templier
źródło
1
Jeśli używasz wersji ng2-bootstrap, czy nie powinieneś używać dołączonego css? Nie jestem pewien, dlaczego używałbyś css CDN, czy tak powinno być? Ja też jestem w tym nowy.
Stephen York
6
Nowy angular2 nie ma dyrektywy w @component
Master Yoda
38

Wszystko, co musisz zrobić, to umieścić boostrap css w pliku index.html.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
user2263572
źródło
1
Czy istnieje sposób na uwzględnienie go z lokalnego zasobu zamiast z CDN?
SparK
1
Tak, href należy ustawić na ścieżkę do pliku lokalnego. Jeśli masz problemy, sugerowałbym wyszukanie hasła „serwujący plik statyczny” z dowolnego serwera WWW, z którego korzystasz.
user2263572
Nie działa na kątowej 6+ dla plików innych niż index.html. na przykład. app.component.html. Proszę powiedzieć.
ganeshdeshmukh
21

Inną bardzo dobrą (lepszą?) Alternatywą jest użycie zestawu widżetów stworzonych przez zespół angular-ui: https://ng-bootstrap.github.io

pkozlowski.opensource
źródło
16

Jeśli planujesz używać Bootstrap 4, który jest wymagany z ng-bootstrap zespołu angular-ui, o którym mowa w tym wątku, będziesz chciał użyć tego zamiast tego (UWAGA: nie musisz dołączać pliku JS):

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

Możesz również odwołać się do tego lokalnie po uruchomieniu npm install [email protected] --save, wskazując plik w styles.scsspliku, zakładając, że używasz SASS:

@import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';
occasl
źródło
1
Czy możesz wyjaśnić, dlaczego nie musisz dołączać pliku JS. Czy to dlatego, że NPM go instaluje? Ponadto, w przykładzie Thierry'ego Templiera, importuje on ng2-bootstrap / ng2-bootstrap, aby użyć alertu. Czy użycie jest takie samo w przypadku bootstrap 4?
BBaysinger
Dzięki. Spróbowałem twojego drugiego przykładu. Wystąpił błąd, że zasób nie został załadowany z node_modules.
BBaysinger
1
Zobacz zaktualizowaną odpowiedź. Jeśli używasz SASS, możesz po prostu zrobić to, co zrobiłem i @importumieścić to w swoim pliku SASS. Jeśli nie, możesz spróbować dodać go do swojego vendor.tspliku, ale nie używam tego w moim kodzie.
occasl
10

Najpopularniejszą opcją jest użycie biblioteki innej firmy dystrybuowanej jako pakiet npm, np. Projekt ng2-bootstrap https://github.com/valor-software/ng2-bootstrap lub biblioteka Angular UI Bootstrap.

Osobiście używam ng2-bootstrap. Istnieje wiele sposobów, aby to skonfigurować, ponieważ konfiguracja zależy od tego, jak jest budowany projekt Angular. Poniżej zamieszczam przykładową konfigurację opartą na projekcie Angular 2 QuickStart https://github.com/angular/quickstart

Najpierw dodajemy zależności w naszym package.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"
  },
... }

Następnie musimy odwzorować nazwy na odpowiednie adresy URL w 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);

Musimy zaimportować plik bootstrap .css do pliku index.html. Możemy go pobrać z katalogu / node_modules / bootstrap na naszym dysku twardym (ponieważ dodaliśmy zależność bootstrap 3.3.7) lub z sieci. Tam otrzymujemy go z sieci:

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

Powinniśmy edytować nasz plik app.module.ts z katalogu / 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 { }

I wreszcie nasz plik app.component.ts z katalogu / app

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

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

export class AppComponent {

    constructor() { }

}

Następnie musimy zainstalować nasze zależności bootstrap i ng2-bootstrap przed uruchomieniem naszej aplikacji. Powinniśmy przejść do katalogu naszego projektu i wpisać

npm install

Wreszcie możemy uruchomić naszą aplikację

npm start

Istnieje wiele przykładów kodu na github projektu ng2-bootstrap pokazujących, jak zaimportować ng2-bootstrap do różnych kompilacji projektów Angular 2. Jest nawet próbka plnkr. Istnieje również dokumentacja API na stronie Valor-software (autorów biblioteki).

Łukasz
źródło
9

W środowisku angular-cli najprostszy sposób, jaki znalazłem, jest następujący:


1. Rozwiązanie w środowisku z arkuszami stylów s̲c̲s̲

npm install bootstrap-sass save

W style.scss:

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

Uwaga 1: ~Znak jest odniesieniem do folderu nodes_modules .
Uwaga 2: Ponieważ używamy scss, możemy dostosować wszystkie potrzebne zmienne boostrap.


2. Rozwiązanie w środowisku z arkuszami stylów c̲s̲

npm install bootstrap save

W style.css:

@import '~bootstrap/dist/css/bootstrap.css';
Michael P. Bazos
źródło
6

Istnieje kilka sposobów konfiguracji angular2 z Bootstrapem, jednym z najbardziej kompletnych sposobów, aby jak najlepiej go wykorzystać, jest użycie ng-bootstrap, używając tej konfiguracji dajemy algular2 pełną kontrolę nad naszym DOM, unikając potrzeby używania JQuery i Boostrap .js.

1-Weź za punkt wyjścia nowy projekt utworzony za pomocą Angular-CLI i używając wiersza poleceń, zainstaluj ng-bootstrap:

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

Uwaga: więcej informacji na https://ng-bootstrap.github.io/#/getting-started

2-Następnie musimy zainstalować bootstrap dla css i systemu grid.

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

Uwaga: Więcej informacji na https://getbootstrap.com/docs/4.0/getting-started/download/

Teraz mamy skonfigurowane środowisko iw tym celu musimy zmienić plik .angular-cli.json, dodając do stylu:

"../node_modules/bootstrap/dist/css/bootstrap.min.css"

Oto przykład:

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

Następnym krokiem jest dodanie modułu ng-boostrap do naszego projektu, w tym celu musimy dodać moduł app.module.ts:

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

Następnie dodaj nowy moduł do aplikacji aplikacji: NgbModule.forRoot ()

Przykład:

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

Teraz możemy zacząć używać bootstrap4 w naszym projekcie angular2 / 5.

UHDante
źródło
3

Miałem to samo pytanie i znalazłem ten artykuł z naprawdę czystym rozwiązaniem:

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

Oto instrukcje, ale z moim uproszczonym rozwiązaniem:

Zainstaluj Bootstrap 4 ( instrukcje ):

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

W razie potrzeby zmień nazwę pliku src / styles.css na styles.scss i zaktualizuj plik .angular-cli.json, aby odzwierciedlić zmianę:

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

Następnie dodaj tę linię do styles.scss :

@import '~bootstrap/scss/bootstrap';
jared_flack
źródło
3

po prostu sprawdź swój plik package.json i dodaj zależności dla bootstrap

"dependencies": {

   "bootstrap": "^3.3.7",
}

następnie dodaj poniższy kod do .angular-cli.jsonpliku

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

Na koniec po prostu aktualizujesz swój npm lokalnie za pomocą terminala

$ npm update
Tanjeeb Ahsan
źródło
2
  1. npm install --zapisz bootstrap
  2. przejdź do -> plik angular-cli.json , znajdź właściwości stylów i po prostu dodaj następne żądło: "../node_modules/bootstrap/dist/css/bootstrap.min.css", Może to wyglądać tak:

    "styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "styles.css"
    ],
31113
źródło
2

Procedura z Angular 6+ i Bootstrap 4+:

  1. Otwórz powłokę w folderze swojego projektu
  2. Zainstaluj bootstrap za pomocą polecenia: npm install --save [email protected]
  3. Bootstrap potrzebuje jquery zależności, więc jeśli go nie masz, możesz go zainstalować za pomocą polecenia: npm install --save jquery 1.9.1
  4. Być może będziesz musiał naprawić lukę za pomocą polecenia: npm audit fix
  5. W głównym pliku style.scss dodaj następujący wiersz: @import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

LUB

Dodaj tę linię do swojego głównego pliku index.html: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

veben
źródło
1

Moją rekomendacją byłoby zamiast deklarowania tego w rysiku json, aby umieścić go w scss, aby wszystko było skompilowane i w jednym miejscu.

1) zainstaluj bootstrap z npm

 npm install bootstrap

2) Zadeklaruj bootstrap npm w css z naszymi stylami

Utwórz _bootstrap-custom.scss:

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


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

    ...
    ..
    .

3) W plikach styles.scss wstawiamy

@import "bootstrap-custom";

więc będziemy mieć skompilowany cały rdzeń w jednym miejscu

JMF
źródło
0

Możesz spróbować użyć biblioteki interfejsu użytkownika Prettyfox http://ng.prettyfox.org

Ta biblioteka używa stylów bootstrap 4 i nie potrzebuje jquery.

Langanera
źródło
0

dodaj następujące wiersze do swojej strony html

<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">
sriram26
źródło
0

Jeśli używasz angular cli, po dodaniu bootstrap do package.json i zainstalowaniu pakietu, wszystko czego potrzebujesz to dodać boostrap.min.css do sekcji "styles" .angular-cli.json.

Jedną ważną rzeczą jest to, że „Kiedy wprowadzasz zmiany w .angular-cli.json, będziesz musiał ponownie uruchomić program ng służący do pobierania zmian w konfiguracji”.

Odniesienie:

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

ninetiger
źródło