Wie integriert Angular Bootstrap4? Methodeneinführung

In diesem Artikel erfahren Sie, wie Sie Bootstrap4 in Angular integrieren. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Empfohlene verwandte Tutorials: „AngularJS-Video-Tutorial“, „Bootstrap-Tutorial“

Angular Integrated Bootstrap4

1. Öffnen Sie das Terminal und geben Sie den Befehl ein, um eine neue Angular-App zu erstellen

ng new app

2. Integrieren Sie Bootstrap

Installieren Sie ngx-bootstrapngx-bootstrap 和 Bootstrap

在新建的项目中打开终端，运行如下命令

npm install ngx-bootstrap bootstrap --save

3、使用bootstrap样式

配置项目：必须将项目其配置为包括Bootstrap CSS，才能使用bootstrap的样式。

在angular.json中增加bootstrap的样式：从项目的根目录打开文件angular.json，找到Style配置项，指定bootstrap.min.css的路径。完成后，它应如下所示：

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

注意：对angular.json进行更改时，您将需要重新启动ng服务以获取配置更改。

4、在app.module.ts中引入要使用的ngx-bootstrap module

打开src/app/app.module.ts 并添加想要使用的组件module，例如BsDropdownModule.forRoot()

Öffnen Sie das Terminal im neuen Projekt und führen Sie den folgenden Befehl aus

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
...

@NgModule({
   ...
   imports: [BsDropdownModule.forRoot(), ... ],
    ...
})

3 Verwenden des Bootstrap-Stils

: Das Projekt muss so konfiguriert sein, dass es Bootstrap-CSS enthält, um Bootstrap-Stile verwenden zu können.

Fügen Sie den Bootstrap-Stil in „angular.json“ hinzu: Öffnen Sie die Datei „angular.json“ im Stammverzeichnis des Projekts, suchen Sie das Konfigurationselement „Stil“ und geben Sie den Pfad zu „bootstrap.min.css“ an. Wenn Sie fertig sind, sollte es so aussehen: 🎜rrreee🎜 HINWEIS: Wenn Sie Änderungen an angle.json vornehmen, müssen Sie den ng-Dienst neu starten, um die Konfigurationsänderungen zu übernehmen. 🎜🎜4. Geben Sie das ngx-bootstrap-Modul ein, das Sie in app.module.ts verwenden möchten. 🎜🎜Öffnen Sie src/app/app.module.ts und fügen Sie das ngx hinzu -bootstrap-Modul, das Sie als Komponentenmodul verwenden möchten, z. B. BsDropdownModule.forRoot(). 🎜rrreee🎜Welche Bootstrap-Komponente speziell verwendet werden soll, klicken Sie auf https://valor-software.com/ngx-bootstrap/#/documentation, um sie anzuzeigen. 🎜🎜Weitere programmierbezogene Kenntnisse finden Sie unter: 🎜Programmierlehre🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonWie integriert Angular Bootstrap4? Methodeneinführung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!