Einführung in Bootstrap-Komponenten
Ursprünglich als Twitter Blueprint bezeichnet, wurde dieser von Mark Otto und Jacob Thronton bei Twitter entwickelt. Bootstrap ist ein kostenloses CSS-Framework, das den Webseiten Reaktionsfähigkeit verleiht. Reaktionsschnelligkeit bedeutet, dass sich verschiedene DOM-Elemente mit der Änderung der Bildschirmgröße an die Größe anpassen, ohne die Eleganz der Webseite zu beeinträchtigen, wie dies normalerweise bei CSS-Methoden mit Pixel- oder Prozentgrößen der Fall ist.
Dies wird auch als 'Mobile-First'-CSS-Framework bezeichnet, da es so konzipiert ist, dass es über ein CSS-Rasterlayout verfügt, indem die Zeilen und Spalten definiert werden. Dieses Framework enthält neben CSS-Klassen auch JavaScript-Komponenten. Um dieses Framework nutzen zu können, müssen Sie zwingend jQuery und JavaScript Framework for Bootstrap zusammen mit den anderen Bootstrap-CSS-Dateien verknüpfen. Diese CSS-Dateien stehen sowohl zum Download als auch in Form von CDNs (Content Delivery Network) zur Verfügung.
Verschiedene Bootstrap-Komponenten:
Bootstrap wird mit Dutzenden von Komponenten gebündelt, die wiederverwendet werden können, um eine gute Benutzererfahrung und Benutzerinteraktion auf einer Webseite zu ermöglichen, z. B. Navigationsleisten, Popups, Dropdowns, Symbole, Schaltflächen, vorgefertigte Formulare und auch Größenoptionen für verschiedene DOM-Elemente.
1) Glyphicons - Dies sind die schriftformatierten Symbole, die in Bootstrap verfügbar sind. Sie sind ungefähr 200 an der Zahl. Diese Glyphicons finden Sie unter https://glyphicons.com.
Wie benutzt man es?
Es gibt Glyphicons, die fast alle Aktionen wie Zoomen, Bearbeiten, Warnen, Ablegen, Löschen usw. bezeichnen. Sie werden in einer einzelnen Klasse definiert. Sie müssen also die Basisklasse und die Einzelklasse, idealerweise in einem span-Element, verwenden und diese Glyphicons verwenden.
Syntax:
2) Dropdowns - Dies sind die umschaltbaren Menüs, in denen eine Liste von Links aufgeführt ist. Diese werden durch das JS-Plugin dynamisiert und können unter http: // getbootstrap / javascript / # dropdowns abgerufen werden
Wie benutzt man es?
Sie müssen die Dropdown-Klasse verwenden, da die Klasse des Elements die Listenelemente mit dem Dropdown-Menü der Klasse enthält.
Syntax:
3) Schaltflächengruppen - Mit dieser Bootstrap-Komponente können Sie eine Reihe von Schaltflächen in einer Reihe nebeneinander gruppieren.
Wie benutzt man es?
Definieren Sie Divisionselemente mit der Klasse .btn-group und verschachteln Sie diese Elemente mit der Schaltfläche mit der Klasse .btn. Richtig
Falsch
4) Schaltflächen-Dropdowns - Diese Komponente wird verwendet, um ein Schaltflächenelement zum Auslösen eines Dropdowns zu verwenden.
Syntax:
5) Eingabegruppen - Erweitert die Formularsteuerungsklasse und fügt Text oder Schaltflächen an beiden Seiten eines Eingabefelds eines Eingabeelements hinzu. Sie müssen die .input-group-Klasse mit einer .input-group-addon-Klasse verwenden, um diese Eingabegruppen zu verwenden.
Syntax:
@
6) Navbar - Diese Komponenten dienen als Navigationsheader für Ihre Website. Sie werden zusammengeklappt, um bei Geräten mit kleinerer Bildschirmgröße mit einem umschaltbaren Hamburger-Menü vertikal erweitert zu werden, und werden mit zunehmender Bildschirmbreite horizontal.
Syntax:
7) Jumbotron - Dies ist eine Bootstrap-Komponente, die sich über den gesamten Bildschirm (oder das Ansichtsfenster) erstrecken kann, um einige wichtige Inhalte anzuzeigen.
Syntax:
8) Warnungen - Dies ist eine Bootstrap-Komponente mit einem jQuery-Plugin, das abhängig von der Benutzeraktion kontextbezogene Rückmeldungen liefert. Dies wird im Wesentlichen zum Anzeigen von Warnmeldungen verwendet.
Syntax: …
9) Fortschrittsbalken - Diese Komponente wird verwendet, um die visuellen Rückmeldungen zum Arbeitsfortschritt oder zur Aktion mit einem Fortschrittsbalken zu versehen.
Synatx:
Beispiel:
10) Kennzeichen - Dies ist eine Komponente, um etwas wie ungelesene Elemente hervorzuheben, indem dem DOM-Element die Klasse .kennzeichen hinzugefügt wird, vorzugsweise ein Bereich.
Syntax:
Nachrichten 3
11) Paginierung - Diese Komponente verleiht Ihrer Site eine mehrseitige Paginierung, damit der Inhalt angezeigt werden kann
auf mehrere Seiten aufgeteilt und bequem navigiert werden. In der Regel wird das DOM-Element für ungeordnete Listen mit dieser Klassen-Paginierung definiert.
Syntax:
Wie wird dies in Ihrer Karriere helfen?
Alle Unternehmen konzentrieren sich jetzt auf User Interaction und User Experience (UI / UX). Weil die überwiegende Mehrheit der Bevölkerung Handheld-Geräte wie Tablets und Smartphones verwendet, die sich in Bezug auf Pixelauflösung und Bildschirmgröße stark unterscheiden. Aus diesem Grund ist es sehr wichtig, dass das Front-End-Design so ansprechend ist, dass es sich an jeden Bildschirm anpasst, ohne die Eleganz der Webseite zu beeinträchtigen.
Bei Bootstrap erfahren zu sein, ist also ein Mehrwert für Sie in der technischen Karriere, und Unternehmen würden sich darauf freuen, Sie mit einem ansehnlichen Gehaltsscheck zu beauftragen. Und weil es kostenlos und Open Source ist, gibt es eine Menge Möglichkeiten, die Sie als Entwickler nutzen können, um es noch besser zu machen als heute.
Fazit-
Das Bootstrap-Framework ist ein sehr nützliches Tool, um die Reaktionsfähigkeit der Webseiten zu verbessern. Die in diesem Blog erläuterten Komponenten sind einige der am häufigsten verwendeten Komponenten, mit denen Sie weniger Code für mehr Funktionalität schreiben und der von Ihnen erstellten Webseite mehr Eleganz verleihen können.
Empfohlene Artikel
Dies war ein Leitfaden für Bootstrap-Komponenten. Hier diskutieren wir auch eine Einführung und verschiedene Komponenten von Bootstrap zusammen mit seiner Syntax. Sie können auch unsere anderen Artikelvorschläge durchgehen, um mehr zu erfahren -
- So installieren Sie Bootstrap
- Angular vs Bootstrap
- Bootstrap-Schulung
- Fragen in Vorstellungsgesprächen bei Bootstrap
- Wie verwende ich das Bootstrap-Layout?
- Top 5 Arten von Boostrap mit Beispielcode