So installieren Sie Bootstrap
Bootstrap ist ein Open Source-Webframework. Es wird hauptsächlich für die Front-End-Entwicklung verwendet. Es ist kostenlos. Bootstrap wurde vom Bootstrap Core Team entwickelt. Bootstrap wurde ursprünglich von Mark Otto und Jacob Thornton erstellt. Es wurde ursprünglich im Jahr 2011 veröffentlicht. Es wurde in HTML, CSS und JavaScript geschrieben.
Bootstrap-Paket
Dieses Paket enthält die folgenden Elemente:
- CSS : Es wird als Cascading Style Sheet bezeichnet, mit dem die HTML-Elemente formatiert werden.
- Komponenten : Im Bootstrap-Paket gibt es viele wiederverwendbare Komponenten für Dropdowns, Ikonografie, Warnungen, Navigation usw.
- Anpassen : Im Bootstrap-Paket können die Komponenten angepasst werden, weniger variabel und Jquery-Plugins, um den Stil zu erhalten.
- Gerüste : In einem Bootstrap-Paket wird die Grundstruktur mit dem Rastersystem, dem Verknüpfungsstil und dem Hintergrund bereitgestellt.
- JavaScript : In einem Bootstrap-Paket gibt es Javascript-Plug-Ins.
Schritte zum Installieren von Bootstrap
Lassen Sie uns die Schritte besprechen, die zur Installation von Bootstrap erforderlich sind.
Schritt 1: Verwenden Sie den folgenden Link, um den Bootstrap herunterzuladen. Klicken Sie auf Download, das Bootstrap-Paket wird in einen Zip-Ordner heruntergeladen. Dieser Ordner enthält den CSS- und den JS-Ordner.
https://getbootstrap.com/docs/4.0/getting-started/download/
Das heruntergeladene Bootstrap-Paket ist bereit, kompilierten Code zu verwenden und kann problemlos in das Projekt integriert werden. Es besteht aus kompilierten und minimierten CSS-Bundles und Javascript-Plugins.
Schritt 2: Quelldatei: Bootstrap kann mit Hilfe von Javascript-, Sass- und Dokumentationsdateien mit einer eigenen Asset-Pipeline kompiliert werden.
Klicken Sie auf Download Source, um die Dateien herunterzuladen. Es enthält js, CSS und andere Dateien.
Schritt 3: Paket-Manager: Bootstrap kann in Node.js-basierten Dateien oder Anwendungen installiert werden.
$ npm install bootstrap
Schritt 4: Für Node.js-Anwendungen kann Bootstrap auch mithilfe eines Garnpakets installiert werden.
$ yarn add bootstrap
Schritt 5: Wenn der Benutzer Bootstrap für Ruby Gems-Anwendungen installieren möchte
- Mit dem Bundler :
gem 'bootstrap', '~> 4.0.0' - Ohne Bundler :
$ gem install bootstrap –v 4.0.0
Schritt 6: Mit dem Composer können Sie die Bootstraps sass und javascript installieren und verwalten
$ Composer require twbs/bootstrap: 4.0.0
Schritt 7: Mit NuGet können Sie Bootstraps-CSS sowie sass- und javascript for.Net-Anwendungen installieren und verwalten.
- Install-Package Bootstrap
- Installationspaket bootstrap.sass
Schritt 8: Jquery wird auch mit Bootstrap-Dateien oder Installationsordnern verwendet. Jquery muss heruntergeladen und die Jquery-Datei im Bootstrap-Stammordner abgelegt werden, um eine bessere Benutzeroberfläche zu erzielen. Vor allem verbessert Jquery die Funktionen von Bootstrap, die ein attraktiveres und reaktionsfähigeres Erscheinungsbild bieten.
Schritt 9: Nach dem Ausführen der obigen Schritte kann der Entwickler den HTML-Code schreiben, um alle Dateien für die HTML-Seite zu verknüpfen, und die HTML-Datei öffnen, um die Antwort zu überprüfen.
Unterstützte Browser
Der Bootstrap unterstützt hauptsächlich die neueste und stabile Version aller Browser und Plattformen. Der Browser für Mobilgeräte wird von Android und der iOS-Plattform unterstützt. Die Desktop-Browser für verschiedene Plattformen wie Mac und Windows werden ebenfalls von Bootstrap unterstützt.
Bootstrap-Dateistruktur
- Bootstrap wurde vorkompiliert, die kompilierte Version von Bootstrap wird heruntergeladen und die Zip-Datei und die folgende Dateistruktur werden angezeigt:
Die obige Abbildung enthält auch die Schriftartenordnerdateien, wenn der Entwickler zusätzliche Schriftarten benötigt, um die Benutzeroberfläche den Anforderungen entsprechend zu gestalten. Diese Dateien können im Quellpaket von Bootstrap enthalten sein. Der Bootstrap-Quellcode hat eine detailliertere Dateistruktur.
Bootstrap 4
In Bootstrap 4 wurden wichtige Änderungen vorgenommen, z. B. das umfassende Umschreiben des Codes, die Unterstützung flexibler CSS-Größen, Optionen zur Anpassung der Navigation, Dienstprogramme für Antwortabstände und Größenänderung sowie die Erhöhung der globalen Schriftgröße von 14 auf 16 Pixel (Anzahl der Dienstprogramme) Klassen werden hinzugefügt, Styling-Schaltfläche, Dropdown-Menüs, Medienobjekte und Bildklassen werden hinzugefügt. Es unterstützt auch die neueste Version von Browsern.
Die Hauptfunktion von Bootstrap besteht darin, die Entwicklung von Webseiten zu vereinfachen. Der Hauptgrund für die Verwendung von Bootstrap ist die Auswahl der zu projizierenden Farbe, Größe, Schriftart und des Layouts. Es bietet grundlegende Stildefinitionen für HTML-Elemente. Die Jquery-Plugins und Javascript-Komponenten bieten einige zusätzliche Elemente, die für die Benutzeroberfläche verwendet werden können, wie z. B. Dialogfelder und QuickInfos usw. Die Bootstrap-Komponenten bestehen auch aus Elementen von HTML, CSS-Deklarationen und Javascript-Code. Es hat auch die Funktion, die vorhandenen Schnittstellenelemente zu erweitern.
Die andere Hauptkomponente von Bootstrap sind die Layout-Komponenten. Die grundlegende Layoutkomponente wird als Container bezeichnet, in dem jedes Element der Seite platziert wird. Der Container wird auf der Webseite platziert, und andere Layoutkomponenten wie das CSS-Layout können über Zeilen und Spalten definiert werden. Es hängt vom Entwickler ab, welcher Container mit fester Breite oder welcher mit flüssiger Breite für die Gestaltung der Webseite ausgewählt wird. Ersteres verwendet die vier vordefinierten Breiten, später jedoch die Füllungen. Dies hängt von der Größe des Bildschirms ab, auf dem die Webseite angezeigt wird.
Verwendung von Bootstrap
Bootstrap ist sehr einfach zu bedienen und mit Hilfe von Bootstrap haben Entwickler reaktionsschnelle Websites entwickelt. Bootstrap wird auch verwendet, da es viele Browser wie Google Chrome, Mozilla Firefox, Internet Explorer, Safari, Opera usw. unterstützt. Bootstrap ist einfach zu starten und ein ansprechendes Grid-System zu erstellen. Es hat Javascript-Plug-Ins gebündelt und es gibt eine Liste der zu verwendenden Unternehmen. Es hat eine gute Dokumentation zu starten und in der Lage, schnell zu arbeiten. Bootstrap hat Responsive Design und Mobile First Approach gezeigt. Es ist Open Source und kostenlos. Das spart viel Zeit und Mühe. Es ist anpassbar. Die wichtigste Verwendung von Bootstrap ist das responsive Webdesign, mit dessen Hilfe die Website für alle Geräte wie Laptops, Desktops, Handys und Tablets an die Bildschirmgröße angepasst werden kann.
Fazit - So installieren Sie Bootstrap
Bootstrap wird häufig als Front-End-Webframework verwendet. Es unterstützt viele programmiersprachen- und plattformunabhängige Funktionen. Die Anfänger erhalten eine hervorragende Online-Community-Unterstützung und die Dokumentation ist auch auf offiziellen Websites verfügbar, auf denen alle Aktualisierungen in Bezug auf die Veröffentlichung einer neuen Version und die erweiterten Funktionen ordnungsgemäß veröffentlicht und dokumentiert wurden. Es ist zum beliebten Webframework geworden, um verschiedene Tools zu erstellen und in eine andere Skriptsprache zu integrieren.
Empfohlene Artikel
Dies war eine Anleitung zur Installation von Bootstrap. Hier haben wir die Schritte zur Installation von Bootstrap sowie das Grundkonzept von Bootstrap 4 und die Verwendung von Bootstrap besprochen. Sie können sich auch die folgenden Artikel ansehen, um mehr zu erfahren -
- So verwenden Sie Bootstrap-Befehle
- Bootstrap Interview Fragen mit Antworten
- Vergleiche von Bootstrap und WordPress
- Installation von WordPress