Wie installiere ich Bootstrap in Angular? 5 einfache Möglichkeiten

Eine Webseite funktioniert am besten, wenn sie interaktiv ist. Allerdings scheint es nicht möglich zu sein, über Nacht eine neue Webseite zu entwickeln.

Dies ist der Fall, wenn Sie das Bedürfnis verspüren, Zugriff auf eine Webseite zu haben, die zwar üblich ist, sich aber mithilfe benutzerdefinierter Codes leicht ändern lässt. Hier kommt Bootstrap ins Spiel.

Beginnen wir damit, zu verstehen, wie man Bootstrap in Angular installiert , um reaktionsfähige und lebendige Webanwendungen auf Angular zu erstellen!

Bootstrap verstehen: Ein erster Leitfaden

Bootstrap ist ein Front-End-Framework, das eine Kombination aus Tools und Komponenten aus CSS, HTML und JavaScript zum Erstellen dynamischer Webseiten bietet. Bootstrap ist sowohl Open Source als auch kostenlos. Während Angular selbst ein leistungsfähiges Framework zum Erstellen leistungsstarker Single-Page-Websites ist, steigert die Kombination mit Bootstrap seine Möglichkeiten zur Erstellung reaktionsfähiger und dynamischer Webseiten noch weiter.

Bootstrap erfreut sich großer Beliebtheit und etwa 25,8 % aller auf JavaScript basierenden Websites verwenden Bootstrap, was seine Bedeutung auf dem Markt weiter unterstreicht.

Bootstrap: Ein Blick auf seine Geschichte

Ursprünglich als internes Tool für die beliebte Social-Networking-Website Twitter entwickelt, beschlossen die Ingenieure Jacob Thornton und Mark Otto, Bootstrap im August 2011 für die öffentliche Nutzung auf dem Open-Source-Repository GitHub zu veröffentlichen.

Aufgrund seiner Bequemlichkeit und Beliebtheit in der Öffentlichkeit arbeiten die Entwickler weiterhin an der Erstellung neuerer Versionen von Bootstrap und statten es mit verbesserten UI-Komponenten und besserem Support aus.

Die Schöpfer Mark und Jacob haben die neueste Version von Bootstrap – Bootstrap 5.3.0 – im Jahr 2023 veröffentlicht.

Schauen Sie sich unserekostenlosen Technologiekursean, um sich von der Konkurrenz abzuheben.

Sollten Sie Bootstrap verwenden?

Sie können eine Antwort auf diese Frage finden, indem Sie die zahlreichen Vorteile verstehen, die dieses Projekt bietet. Zunächst einmal bietet es super reaktionsschnelles CSS. Dadurch ist es sowohl auf Desktops, Tabs als auch auf Telefonen anpassbar. Es ist außerdem mit den meisten gängigen Browsern berechenbar.

Hinzu kommt der Vorteil, dass der Einrichtungsaufwand am geringsten ist, und Sie können ein Layout innerhalb einer Stunde, wenn nicht sogar weniger, entwerfen. Bootstrap ist praktisch für die Verwendung, da der Benutzer nicht mit CASS oder sogar HTML vertraut sein muss, es sei denn, Sie müssen UI-basierte Änderungen initiieren.

Die benutzerfreundlichsten Funktionen, die Bootstrap zu einer beliebten Wahl für die Einbettung in Angular oder zum Hinzufügen derAngular Bootstrap-Installation machen , sind:

Komponentenaspekt

Von Navigationsleisten bis hin zu Formularen stellt Bootstrap ein Protokoll der Komponenten für Anwendungen bereit, wenn Sie entscheiden, wie Sie Bootstrap in Angular hinzufügen.Mithilfe dieser Komponenten wird die kreative Gestaltung einer Website oder App zum Kinderspiel. Diese Funktionalität mit Bootstrap in Angular erfreut sich bei Entwicklern großer Beliebtheit.

Schauen Sie sichdie Softwareentwicklungskurse von upGrad an , um sich weiterzubilden.

Anpassungsaspekt

Wenn Siedie Bootstrap-Installation in Angular durchführen, können Sie benutzerdefinierte Haltepunkte sogar für eine Spalte entwerfen und auch Brüche in den von Ihnen benötigten Größen einfügen.Es vereinfacht die Anpassung basierend auf dem reaktionsfähigen Raster des Frameworks weiter.

Zeitersparnis

Das Framework von Bootstrap führt, wenn es in Angular eingebettet ist, zu großen Zeiteinsparungen im Timeline-Bereich. Dank der in Bootstrap vorgefertigten Blöcke müssen Sie bei derInstallation von Bootstrap 5 in Angular nicht ganz von vorne beginnen .Einfach die eingebauten Elemente neu auszurichten und diese mit Ihren Eingaben nutzbar zu machen, reicht aus und verleiht Ihrem Endprodukt sogar Einzigartigkeit.

Voraussetzungen für die Installation von Bootstrap in Angular

Hier ist eine Checkliste der Voraussetzungen für das Hinzufügen von Bootstrap zu Angular. Stellen Sie sicher, dass Sie die aufgeführten Tools nach der Installation zum Erstellen der Angular-Anwendung konfigurieren.

• Git : Dies ist ein verteiltes Versionskontrolleinheits-Setup, das zum Synchronisieren des Repositorys verwendet wird.
• IDE – Die Verwendung einer integrierten Entwicklungsumgebung mit einer grafischen Oberfläche ist für die Entwicklung von Anwendungen, einschließlich Angular, von entscheidender Bedeutung.
• Node.js und npm : Ersteres ist eine JavaScript-Code-Software für die Laufzeit.Letzteres, npm, wird als Paketmanager für Node.js verwendet. Alle Angular-Anwendungen laufen auf der Grundlage der beiden, während diese auch bei der Bibliotheksinstallation helfen.
• Angular CLI: Dieses Dienstprogramm basiert auf der Befehlszeile für die Einrichtung der Grundstruktur von Angular.

Lassen Sie sich von den verschiedenen Software-Engineering-Kursen inspirieren, die von Experten an der upGrad angeboten werden, wie zum Beispiel dem Master of Science in Computer Science , und verbessern Sie Ihre Entwicklungsfähigkeiten exponentiell.

Methode 1: Bootstrap über CDN installieren

Befolgen Sie die entsprechenden Schritte, um Bootstrap auf Angular über CDN zu installieren.

• Suchen Sie den Ordner „src“ und öffnen Sie die Angular-Projektdatei „ index.html “.
• Betten Sie die folgenden Links in den Abschnitt „ <head> “ ein.

<link rel=“stylesheet“ href=“https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css“>

<script src=“https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js“></script>

• Die JavaScript- und CSS-Dateien für Bootstrap sind in diesen Codezeilen der angegebenen CDN-URLs enthalten.
• Speichern Sie die letzten Änderungen in Ihrer Datei „ index.html “.

Ihr Angular-Projekt nutzt die Bootstrap-Stile und JavaScript-Funktionen, die das CDN bietet, sobald Sie diese CDN-Links eingefügt haben. Sie sind jetzt bereit, Bootstrap-Komponenten in Ihren Angular-Projekten zu nutzen!

Methode 2: Bootstrap über den npm-Paketmanager installieren

Die Installation von Bootstrap mit dem NPM-Manager kann mithilfe der angegebenen einfachen Schritte erfolgen.

• Öffnen Sie die Eingabeaufforderung oder das Terminal.
• Navigieren Sie zum Stammverzeichnis Ihres Angular-Projekts.
• Installieren Sie Bootstrap und die zugehörigen Abhängigkeiten, indem Sie den Befehl „ npm install bootstrap“ ausführen .Der entsprechende Befehl lädt Bootstrap und seine relevanten Abhängigkeiten in Ihr Verzeichnis mit der Bezeichnung„node_modules“ herunter.
• Nach der Installation müssen Sie Bootstrap-Stile und Javascript integrieren, indem Sie die Datei „angular.json“ aus dem Stammverzeichnis öffnen und den folgenden Eintrag im Array „styles“hinzufügen .

„node_modules/bootstrap/dist/css/bootstrap.min.css“

• Fügen Sie außerdem den folgenden Befehl zum Array „scripts“ hinzu .

„node_modules/bootstrap/dist/js/bootstrap.min.js“

• Speichern Sie alle an der Datei „ angular.json“ vorgenommenen Änderungen .

Sie können jetzt JavaScript- und CSS-Klassen von Bootstrap in Ihren Angular-Komponenten und -Vorlagen verwenden.

Entdecken Sie unsere beliebten Software-Engineering-Kurse

Methode 3: Bootstrap über die Angular-CLI installieren

Hier ist eine leicht verständliche Anleitung, die Ihnen bei der Installation von Bootstrap über Angular CLI hilft.

• Öffnen Sie Ihre Eingabeaufforderung.
• Führen Sie den Befehl „ng new my-app“ aus , um Angular CLI zu verwenden und ein neues Angular-Projekt zu erstellen.Sie können„meine-App“ durch einen Namen Ihrer Wahl ersetzen .
• Wechseln Sie in das Projektverzeichnis.

cd my-app

• Wiederholen Sie den Vorgang der Bootstrap-Installation mit npm, wie oben erwähnt.

Sie haben jetzt ein neues Angular-Projekt mit CLI erstellt und Bootstrap für Ihr Projekt installiert!

Methode 4: Bootstrap über den Bower-Paketmanager installieren

• Stellen Sie sicher, dass Sie sowohl npm als auch Bower global installieren.
• Führen Sie den angegebenen Befehl in Ihrer Eingabeaufforderung aus – npm install -g Bower
• Sobald Bower installiert ist, gehen Sie zu Ihrem Projektordner und geben Sie ein

Bower installiert Bootstrap

Bower installiert JQuery

Mit den oben genannten Schritten werden relevante Bootstrap-Installationsdateien im frisch erstellten Ordner „bower_components“ installiert .

• Der letzte Schritt wäre, die Dateien für Bootstrap und JQuery in Ihre Projektdatei aufzunehmen.

Obwohl dies alle Schritte zur Installation von Bootstrap in Angular sind, beachten Sie, dass die Verwendung von Bower für die Bootstrap-Installation nicht mehr empfohlen wird.

Entdecken Sie unsere kostenlosen Kurse zur Softwareentwicklung

Methode 5: Bootstrap über einen benutzerdefinierten Build installieren

Hier sind die einfachen Schritte zur Installation von Bootstrap über einen benutzerdefinierten Build

• Laden Sie die Bootstrap-Version Ihrer Wahl zusammen mit den Javascript- und CSS-Dateien von der offiziellen Website herunter.
• Extrahieren Sie die ZIP-Datei und kopieren Sie die Datei „bootstrap.min.css “ daraus .
• Navigieren Sie in Ihrem Angular-Projekt zum Verzeichnis „ src “ und erstellen Sie ein neues mit dem Namen „ assets“. Stellen Sie sicher, dass Sie innerhalb der „Assets“ ein weiteres Verzeichnis mit dem Namen „ css“ erstellen.
• Fügen Sie„bootstrap.min.css “ in das Verzeichnis „ css“ ein.
• Erstellen Sie erneut im Verzeichnis „assets “ ein neues Verzeichnis mit dem Namen „ js“ und fügen Sie die aus dem Zip-Ordner extrahierte Datei „bootstrap.min.js“ in dieses neue Verzeichnis ein.
• Öffnen Sie „angular.json “ im Stammverzeichnis und navigieren Sie durch das Array „ Styles“, indem Sie dem Segment„Architekt“ > „Build“ > „Optionen“folgen .
• Fügen Sie Bootstrap-CSS-Dateien hinzu, indem Sie den folgenden Befehl verwenden:

„src/assets/css/bootstrap.min.css“

• Suchen Sie im selben Array nach dem Array „scripts“ und fügen Sie den folgenden Befehl ein:

„src/assets/js/bootstrap.min.js“

• Speichern Sie die Änderungen an der Datei „ angular.json “.

Best Practices für die Installation von Bootstrap

Während es mehrere Möglichkeiten gibt, Bootstrap in Angular zu installieren, kann die Kenntnis von Best Practices den Prozess weiter vereinfachen.

• Stellen Sie sicher, dass Sie die richtigen Bootstrap-CSS-Dateien in die richtigen Dateien und Ordner in Ihrem Angular-Projekt importieren.
• Während Bootstrap einen breiten Katalog an CSS-Klassen und -Komponenten bietet, wählen Sie nur diejenigen aus, die für Ihr Projekt relevant sind.
• Vermeiden Sie unnötige Komponenten, um die Leistung zu optimieren.
• Bleiben Sie mit der neuesten Bootstrap-Version auf dem Laufenden.
• Obwohl Javascript-Komponenten verfügbar sind, sollten Sie sie nur sparsam verwenden. Versuchen Sie, Angular-spezifische Bibliotheken zu nutzen.

Wenn Sie andererseits die Zeit einteilen können und hoffen, ein besserer Entwickler zu werden, gibt es nichts Besseres als das Executive Post Graduate Program in Software Development – ​​Full Stack, unterstützt von IIIT-B.

Abschluss

Hier endet unsere Liste einiger der besten Möglichkeiten, Bootstrap in Angular für eine verbesserte Webseitenentwicklung zu installieren. Von optimiertem responsivem Design bis hin zur Integration neuer, dynamischer Funktionen: Wenn Sie wissen, wie Sie die richtigen Bootstrap-Komponenten mit konsistenten Praktiken nutzen, können Sie in der Branche die Oberhand gewinnen!

Die Teilnahme am Full Stack Software Development Bootcamp von upGrad ist eine weitere Möglichkeit, Ihre Entwicklungskarriere mit gefragten Fähigkeiten und fachkundiger Anleitung voranzutreiben.

Melden Sie sich jetzt an , um Ihren Horizont zu erweitern!