Bootstrap-Benutzeroberflächen

Benutzeroberflächen sind einer der wichtigsten Teile von Anwendungen, da sie die Art und Weise sind, wie Benutzer mit unseren Kreationen interagieren, aber darüber hinaus macht eine gute Benutzeroberfläche die Erfahrung mit unserer Anwendung positiv dass eine gute Anwendung nicht mehr verwendet werden kann.
Bootstrap Es gibt uns keine gebauten Schnittstellen, es ist etwas, das wir selbst entwickeln müssen, aber es gibt uns die Komponenten, um diese bauen zu können, und obwohl die meisten seiner Komponenten für das Design von Webanwendungen gedacht sind, hat es tatsächlich andere Komponenten, um es zu erstellen Verbessern Sie die Erfahrung von Benutzername.
Diese Komponenten basieren auf JavaScript Ja jQuery, daher benötigen wir diese letzte Bibliothek, um diese Elemente, die wir erwähnt haben, verwenden zu können. Sobald wir jedoch einige der Ergebnisse sehen, werden wir diese Aufnahme rechtfertigen.
Wie wir in der Einleitung angegeben haben, ist es notwendig, jQuery Um diese Komponenten nutzen zu können, definieren wir als erstes, wie unser Etikett aussehen soll Kopf aller Beispiele, die wir sehen werden. Sehen wir uns den Code davon an:

Zuallererst schließen wir die bootstrap.css in seiner verkleinerten Version und dann die thema.css, bisher war alles wie gewohnt aber dann müssen wir einschließen jQuery und wir müssen auch einschließen bootstrap.js Auf diese Weise wird uns dieses Framework die Möglichkeit geben, die Komponenten für unsere Schnittstellen einzubinden.
Diese Einschlüsse können, wie wir im Code sehen, in einem Ordner auf unserem Computer erfolgen, in dem wir das Projekt speichern, oder wir können auch a . verwenden CDN, wie wir im folgenden Codeabschnitt sehen:

Jede der von uns verwendeten Optionen ist in Ordnung. Wichtig ist, die Reihenfolge zu respektieren, in der wir die Bibliotheken einschließen, sonst funktionieren unsere Komponenten nicht so, wie wir es wollen.
Eine gute Benutzeroberfläche sollte dem Benutzer immer eine Hilfe sein, sie sollte ihnen immer zeigen, welchen Weg sie gehen und wofür ihre verschiedenen Komponenten funktionieren, auf diese Weise ist sie intuitiv und vermeidet das Rätselraten des Benutzers beim Ausprobieren von Schaltflächen und Menüs, um etwas zu finden. .
KurzinfoEin Werkzeug, mit dem wir dies vermeiden können, ist das Kurzinfo, die nichts anderes als kleine Popup-Felder sind, die uns helfen, Abschnitte unserer Anwendung zu erklären. Sie werden auch als Hilfefelder bezeichnet in unserer Schnittstelle.
Sehen wir uns einen kleinen Code an, in dem wir zeigen, wie Sie mit Hilfe von einen Tooltip erstellen Bootstrap:

 Beispiel-Tooltip speichern

In unseren Code haben wir die genannten Bibliotheken eingebunden und dann in das Label Skript wir nutzen die veranstaltung document.ready um unsere zu erstellen Kurzinfo was für alles gelten wird, was die Klasse hat Werkzeug1, kann dieser Klassenname von jedem angepasst werden, und zusätzlich fügen wir als Option hinzu, dass er rechts ein Layout hat, dh unsere Hilfe wird auf der rechten Seite angezeigt. Dann erstellen wir einen allgemeinen Stil für den Körper, damit unsere Inhalte zu Demonstrationszwecken besser auf dem Bildschirm sichtbar sind.
Endlich im Karosserie wir schaffen ein element Taste, es hat ein Attribut namens Datenumschaltung und wir weisen darauf hin, dass es a . sein wird Kurzinfo wo im Attribut Titel wir platzieren den Text, den unsere Hilfebox anzeigen soll, und natürlich in das Attribut Klasse wir müssen einschließen Werkzeug1 das war die Klasse, die wir am Anfang definiert haben. Sobald alles an seinem Platz ist, können wir, wenn wir mit der Maus über unsere Schaltfläche fahren, den erstellten Tooltip visualisieren, der, wenn er in unserem Browser ausgeführt wird, so aussehen sollte:

Wie wir sehen, ist diese Komponente sehr nützlich, da sie uns die Möglichkeit gibt, dem Benutzer über die Hilfeboxen zu erklären, wie sie funktionieren oder wofür einige Elemente in unserer Benutzeroberfläche verwendet werden.
Es gibt noch eine weitere sehr wichtige Komponente der Benutzeroberfläche und es ist die AkkordeonDer Zweck dieses Elements besteht darin, den Text unter einer Komponente unserer Anwendung speichern zu können, damit erhalten wir einen ersten Eindruck sowohl von der Ordnung als auch von der Sauberkeit unserer Oberfläche, wo dem Benutzer beim Anklicken der Inhalt angezeigt wird.
Dies ist wichtig, da eine andere Qualität, die eine gute Benutzeroberfläche benötigt, Sauberkeit ist, da eine saubere Oberfläche bedeutet, dass sich der Benutzer nicht betäubt fühlt und daher die Verwendung angenehmer ist.
Der Aufbau des Akkordeons ist einfach, in diesem Fall müssen wir kein Skript als solches erstellen, wir müssen nur eine Struktur daraus erstellen div die es uns erlauben, anzuzeigen, dass sie von der Art sind Panel, der Titel unseres Akkordeons ist ein div des Typs Panel-Überschrift und unser Inhalt wird ein weiteres Div dieses Typs sein Panel-Inhalt, die wir für die Anzahl der anzuzeigenden Elemente wiederholen müssen.
Sehen wir uns das folgende Beispiel an, in dem wir ein Akkordeon mit zwei Elementen erstellen:

 Akkordeon Beispiel
Erstes Element
Dies ist das erste Element unseres Akkordeons

Zweites Element
Dies ist der Inhalt unseres zweiten Elements des Akkordeons

Das Wichtigste, damit das Akkordeon nach der Struktur funktioniert, sind die Bezeichner. Wenn wir uns den Titel des Akkordeons ansehen, haben wir einen Anker und dieser richtet sich im Beispiel an Gegenstand 1 Ja element2 wobei jeder dieser Anker der Kennung des Inhalts entspricht, dann sehen wir, wie der Inhaltsblock jedes einzelnen als gehen diese beiden Wörter, was bedeutet, dass beim Klicken auf die Titel der Inhalt angezeigt wird. Sehen wir uns an, wie es in unserem Browser aussieht, wenn wir unser Beispiel ausführen:

VERGRÖSSERN

Wie wir sehen, zeigt element1 seinen Inhalt ohne Probleme an, während element2 keine Informationen anzeigt. Wenn wir darauf klicken, können wir sehen, wie der Inhalt von element1 ausgeblendet und der Inhalt von element2 angezeigt wird:

VERGRÖSSERN

Schließlich sind eine weitere der großartigen Komponenten für Benutzeroberflächen die modale BilderDies sind Elemente, die beim Klicken auf eine Schaltfläche oder einen Anker aufgerufen werden und deren Funktion darin besteht, uns eine Art Popup-Fenster anzuzeigen.
Dieses Fenster ist sehr nützlich, da es uns ermöglicht, Text anzuzeigen, der aufgrund seiner Länge in einem Kurzinfo, oder vielleicht müssen wir den Benutzer einige Informationen eingeben und möchten sie nicht an eine andere Seite senden. Diese Art von Komponenten hilft uns, die Sauberkeit unserer Anwendung aufrechtzuerhalten, aber sie hilft uns auch, den Benutzer zu zwingen, auf etwas zu achten, das sehr wichtig sein kann.
Natürlich müssen hier die Regeln des gesunden Menschenverstands gelten, denn obwohl es möglich ist, dass ein Modal ein anderes Modal hervorruft, ist dies geschmacklos und schadet der Navigation des Benutzers, auch wenn wir mehr als vier Felder in eine Form einfügen müssen, ist es besser um es auf einer neuen Seite und nicht in einem Modal zu tun, um nur ein paar Beispiele zu nennen. Sehen wir uns im folgenden Code an, wie wir ein Modal erstellen können:

 Modaldiagramme×
Sobald Sie zur nächsten Phase übergehen, sind alle Ihre Aktionen endgültig.

Ich kann deine Antworten nicht rückgängig machen
Beenden Weiter

In diesem Fall wird das Modal im konfiguriert document.ready direkt angezeigt werden soll, wird diese Art der Implementierung häufig verwendet, um Warnungen auszugeben, bevor der Benutzer fortfährt. Dann besteht unser Modal aus drei Teilen; oberer Teil (Header), Karosserie (Karosserie) und Fußzeile (Fusszeile).
Normalerweise im Header Es gibt einen Titel mit einer Größe, die hervorsticht, um den Grund für das Modal anzuzeigen, in der Karosserie die Erklärung oder den Inhalt wie ein Formular oder eine Nachricht, und in der Fusszeile Aktionsschaltflächen wie Weiter oder Schließen. Sehen wir uns also an, wie unser modales Fenster aussieht, wenn wir es im Browser ausführen:

Diese Komponente ist recht einfach zu implementieren und verleiht unserer Anwendung einen professionellen Stil. Es ist jedoch wichtig, dass wir unsere Logik anwenden, um sie an einem Ort zu platzieren, der die Harmonie der Anwendung nicht stört.
Damit schließen wir dieses Tutorial ab, in dem wir effektiv drei große Komponenten entwickelt haben, die uns helfen, Benutzeroberflächen zu erstellen, um eine bessere Organisation und ein besseres Verständnis der Aktionen in unserer Anwendung zu erreichen und so das Surferlebnis und die Verwendung derselben zu verbessern.