Bootstrap in Angular installieren

Rana Hasnain Khan 23 Mai 2022
Bootstrap in Angular installieren

Wir werden vorstellen, wie man Bootstrap in Angular installiert und verwendet.

Installieren Sie Bootstrap in Angular

Bootstrap ist ein CSS-Framework, das verwendet wird, um schnell eine ansprechende und für Mobilgeräte optimierte Website zu entwerfen. Es ist das beliebteste Framework, das weit verbreitet ist.

Wir können Bootstrap auch in unserer Angular-Anwendung installieren, indem wir diesen einfachen und einfachen Schritten folgen. Um eine neue Angular-Anwendung zu erstellen, führen wir den folgenden Befehl im Terminal aus.

# Terminal
ng new my-app
cd my-app

Der obige Befehl erstellt ein neues Angular-Projekt und bringt uns in das Projektverzeichnis my-app.

Jetzt müssen wir Bootstrap in unserem Angular-Projekt installieren, und dazu müssen wir zum Terminal gehen und den folgenden Befehl ausführen.

# cli
npm install bootstrap --save

Dieser Befehl installiert den Bootstrap in unserem Angular-Projekt. Wenn Sie jedoch SASS in Ihrem Projekt verwenden, installieren Sie stattdessen bootstrap-sass.

# cli
npm install bootstrap-sass --save

Sobald Sie Bootstrap installiert haben, wird es in Knotenmodulen gespeichert, und jetzt müssen wir nur noch Bootstrap CSS importieren, wo immer wir Bootstrap verwenden möchten, indem Sie die folgenden Importbefehle verwenden.

# angular
@import '~bootstrap/dist/css/bootstrap.css';

Oder wenn Sie SASS verwenden.

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

Wir können Bootstrap ganz einfach in unseren Angular-Anwendungen installieren und es durch die Verwendung von Bootstrap-Klassen reaktionsschnell und mobilfreundlich machen, indem Sie diesen einfachen Schritten folgen.

Rana Hasnain Khan avatar Rana Hasnain Khan avatar

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

LinkedIn

Verwandter Artikel - Angular Bootstrap