Weitere detaillierte Schritte und ein Arbeitsbeispiel finden Sie unter
https://loiane.com/2017/08/how-to-add-bootstrap-to-an-angular-cli-project/
Sehr detaillierte Schritte mit der richtigen Erklärung.
Schritte:
Installieren von Bootstrap von NPM
Als nächstes müssen wir Bootstrap installieren. Ändern Sie das Verzeichnis in das von uns erstellte Projekt (cd angle-bootstrap-example) und führen Sie den folgenden Befehl aus:
Für Bootstrap 3:
npm install bootstrap --save
Für Bootstrap 4 (derzeit in der Beta):
npm install bootstrap@next --save
ODER
Alternative: Lokales Bootstrap-CSS
Alternativ können Sie das Bootstrap-CSS auch herunterladen und lokal zu Ihrem Projekt hinzufügen. Ich habe Bootstrap von der Website heruntergeladen und einen Ordnerstil erstellt (dieselbe Ebene wie styles.css):
Hinweis:
Platzieren Sie Ihre lokalen CSS-Dateien nicht im Assets-Ordner. Wenn wir die Produktion mit Angular CLI erstellen, werden die in der Datei .angular-cli.json deklarierten CSS-Dateien minimiert und alle Stile in einer einzigen styles.css gebündelt. Der Assets-Ordner wird während des Erstellungsprozesses in den dist-Ordner kopiert (der CSS-Code wird dupliziert). Platzieren Sie Ihre lokalen CSS-Dateien nur unter Assets, wenn Sie sie direkt in die index.html importieren.
Importieren des CSS 1.
Wir haben zwei Möglichkeiten, das CSS von Bootstrap zu importieren, das von NPM installiert wurde:
starker Text 1: Konfigurieren Sie .angular-cli.json:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.scss"
]
2: Direkt in src / style.css oder src / style.scss importieren:
@import '~bootstrap/dist/css/bootstrap.min.css';
Ich persönlich bevorzuge es, alle meine Stile in src / style.css zu importieren, da dies bereits in .angular-cli.json deklariert wurde.
3.1 Alternative: Lokales Bootstrap-CSS
Wenn Sie die Bootstrap-CSS-Datei lokal hinzugefügt haben, importieren Sie sie einfach in .angular-cli.json
"styles": [
"styles/bootstrap-3.3.7-dist/css/bootstrap.min.css",
"styles.scss"
],
oder
src / style.css
@import './styles/bootstrap-3.3.7-dist/css/bootstrap.min.css';
4: Bootstrap-JavaScript-Komponenten mit ngx-bootstrap (Option 1) Wenn
Sie keine Bootstrap-JavaScript-Komponenten verwenden müssen (für die JQuery erforderlich ist), ist dies alles, was Sie benötigen. Aber wenn Sie Modalitäten, Akkordeon, Datepicker, Tooltips oder andere Komponenten verwenden müssen, wie können wir diese Komponenten verwenden, ohne jQuery zu installieren?
Es gibt eine Angular-Wrapper-Bibliothek für Bootstrap namens ngx-bootstrap, die wir auch über NPM installieren können:
npm install ngx-bootstrap --save
Hinweis ng2-bootstrap und ngx-bootstrap sind dasselbe Paket. ng2-bootstrap wurde nach #itsJustAngular in ngx-bootstrap umbenannt.
Wenn Sie Bootstrap und ngx-bootstrap gleichzeitig beim Erstellen Ihres Angular CLI-Projekts installieren möchten:
npm install bootstrap ngx-bootstrap --save
4.1: Hinzufügen der erforderlichen Bootstrap-Module in app.module.ts
Gehen Sie den ngx-bootstrap durch und fügen Sie die in Ihrer app.module.ts benötigten Module hinzu. Angenommen, wir möchten die Dropdown-, Tooltip- und Modal-Komponenten verwenden:
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 {}
Da wir die .forRoot () -Methode für jedes Modul aufrufen (aufgrund der ngx-bootstrap-Modulanbieter), sind die Funktionen in allen Komponenten und Modulen Ihres Projekts verfügbar (globaler Bereich).
Wenn Sie alternativ den ngx-bootstrap in einem anderen Modul organisieren möchten (nur zu Organisationszwecken, falls Sie viele bs-Module importieren müssen und Ihr app.module nicht überladen möchten), können Sie ein Modul erstellen app-bootstrap.module.ts, importieren Sie die Bootstrap-Module (mit forRoot ()) und deklarieren Sie sie auch im Exportbereich (damit sie auch anderen Modulen zur Verfügung stehen).
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 {}
Vergessen Sie nicht, Ihr Bootstrap-Modul in Ihre app.module.ts zu importieren.
{AppBootstrapModule} aus './app-bootstrap/app-bootstrap.module' importieren;
@NgModule({
imports: [BrowserModule, AppBootstrapModule],
// ...
})
export class AppModule {}
ngx-bootstrap funktioniert mit Bootstrap 3 und 4. Außerdem habe ich einige Tests durchgeführt und die meisten Funktionen funktionieren auch mit Bootstrap 2.x (ja, ich muss noch alten Code warten).
Hoffe das hilft jemandem!
