Poniżej szczegółowe kroki i działający przykład można znaleźć na
stronie https://loiane.com/2017/08/how-to-add-bootstrap-to-an-angular-cli-project/
Bardzo szczegółowe kroki z odpowiednim wyjaśnieniem.
Kroki:
Instalowanie Bootstrap z NPM
Następnie musimy zainstalować Bootstrap. Zmień katalog na projekt, który stworzyliśmy (przykład cd angular-bootstrap) i wykonaj następujące polecenie:
W przypadku Bootstrap 3:
npm install bootstrap --save
Dla Bootstrap 4 (obecnie w wersji beta):
npm install bootstrap@next --save
LUB
Alternatywa: Lokalny Bootstrap CSS
Alternatywnie możesz również pobrać Bootstrap CSS i dodać go lokalnie do swojego projektu. Nie załadowałem Bootstrap ze strony internetowej i utworzyłem folder styles (ten sam poziom co styles.css):
Uwaga:
nie umieszczaj lokalnych plików CSS w folderze zasobów. Kiedy tworzymy wersję produkcyjną za pomocą Angular CLI, pliki CSS zadeklarowane w .angular-cli.json zostaną zminimalizowane, a wszystkie style zostaną zgrupowane w jednym styles.css. Folder zasobów jest kopiowany do folderu dist podczas procesu budowania (kod CSS zostanie zduplikowany). Lokalne pliki CSS umieszczaj pod zasobami tylko w przypadku, gdy importujesz je bezpośrednio do pliku index.html.
Importowanie CSS
1. Mamy dwie opcje importowania CSS z Bootstrap, który został zainstalowany z NPM:
mocny tekst 1: Skonfiguruj .angular-cli.json:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.scss"
]
2: Importuj bezpośrednio do src / style.css lub src / style.scss:
@import '~bootstrap/dist/css/bootstrap.min.css';
Osobiście wolę importować wszystkie moje style do src / style.css, ponieważ zostało już zadeklarowane w .angular-cli.json.
3.1 Alternatywa: lokalny
plik Bootstrap CSS Jeśli dodałeś plik Bootstrap CSS lokalnie, po prostu zaimportuj go w formacie .angular-cli.json
"styles": [
"styles/bootstrap-3.3.7-dist/css/bootstrap.min.css",
"styles.scss"
],
lub
src / style.css
@import './styles/bootstrap-3.3.7-dist/css/bootstrap.min.css';
4: Składniki JavaScript Bootstrap z ngx-bootstrap (opcja 1)
Jeśli nie musisz używać komponentów JavaScript Bootstrap (które wymagają JQuery), to jest cała konfiguracja, której potrzebujesz. Ale jeśli potrzebujesz użyć modali, akordeonu, datepickera, podpowiedzi lub jakiegokolwiek innego komponentu, jak możemy użyć tych komponentów bez instalowania jQuery?
Istnieje biblioteka Angular wrapper dla Bootstrap o nazwie ngx-bootstrap, którą możemy również zainstalować z NPM:
npm install ngx-bootstrap --save
Uwaga ng2-bootstrap i ngx-bootstrap to ten sam pakiet. nazwa ng2-bootstrap została zmieniona na ngx-bootstrap po #itsJustAngular.
Jeśli chcesz zainstalować Bootstrap i ngx-bootstrap w tym samym czasie, gdy tworzysz projekt Angular CLI:
npm install bootstrap ngx-bootstrap --save
4.1: Dodanie wymaganych modułów Bootstrap w app.module.ts
Przejdź przez ngx-bootstrap i dodaj wymagane moduły w swoim app.module.ts. Na przykład załóżmy, że chcemy użyć składników rozwijanych, podpowiedzi i modalnych:
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';
@NgModule({
imports: [
BrowserModule,
BsDropdownModule.forRoot(),
TooltipModule.forRoot(),
ModalModule.forRoot()
],
// ...
})
export class AppBootstrapModule {}
Ponieważ wywołujemy metodę .forRoot () dla każdego modułu (ze względu na dostawców modułów ngx-bootstrap), funkcjonalności będą dostępne we wszystkich komponentach i modułach twojego projektu (zasięg globalny).
Alternatywnie, jeśli chcesz zorganizować ngx-bootstrap w innym module (tylko do celów organizacyjnych, w przypadku, gdy musisz zaimportować wiele modułów bs i nie chcesz zaśmiecać swojej aplikacji), możesz utworzyć moduł app-bootstrap.module.ts, zaimportuj moduły Bootstrap (za pomocą forRoot ()), a także zadeklaruj je w sekcji eksportu (aby stały się one również dostępne dla innych modułów).
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';
@NgModule({
imports: [
CommonModule,
BsDropdownModule.forRoot(),
TooltipModule.forRoot(),
ModalModule.forRoot()
],
exports: [BsDropdownModule, TooltipModule, ModalModule]
})
export class AppBootstrapModule {}
Na koniec nie zapomnij zaimportować modułu bootstrap do pliku app.module.ts.
importuj {AppBootstrapModule} z './app-bootstrap/app-bootstrap.module';
@NgModule({
imports: [BrowserModule, AppBootstrapModule],
// ...
})
export class AppModule {}
ngx-bootstrap współpracuje z Bootstrapem 3 i 4. Wykonałem też kilka testów i większość funkcji działa również z Bootstrapem 2.x (tak, wciąż mam trochę starszego kodu do utrzymania).
Mam nadzieję, że to komuś pomoże!
