[MUSIK]
Lassen Sie uns nun versuchen, verschiedene Mechanismen zu verstehen, damit wir
Informationen für die Benutzer anzeigen können, die den Inhalt Ihrer Webseite überlagern.
Hier werden wir uns also drei verschiedene Konstrukte ansehen, die in Bootstrap verfügbar sind, die
Tooltips, Popovers und Modals genannt werden.
Was sind Tooltips, Popovers und Modals und wie sind sie nützlich?
Zuerst werden wir uns einige grundlegende Ideen ansehen, und dann schauen wir uns einige Beispiele an.
In der folgenden Übung verwenden wir Tooltips und
Modals auf unserer Webseite, und wir betrachten ein Beispiel für Popovers.
Wie ich bereits erwähnt habe, sind Tooltips, Popovers und Modals eine Möglichkeit, Inhalte für
die Benutzer offenzulegen, wenn der Benutzer mit bestimmten Elementen auf Ihrer Webseite interagiert.
Zum Beispiel, wenn die Maus des Benutzers
auf eine Schaltfläche klickt, den Mauszeiger über eine Schaltfläche bewegt oder auf einen Link klickt
oder einen bestimmten Punkt auf Ihrer Webseite erreicht.
All diese werden also Informationen auslösen, die den Benutzern angezeigt werden.
In diesem Fall
werden die Informationen als Overlay auf Ihrer Webseite angezeigt.
Der zugrundeliegende Inhalt der Webseite ist also immer noch vorhanden, aber
dieser wird auf dem zugrundeliegenden Inhalt gelegt.
In Bezug auf Flexibilität sind Tooltips am einfachsten zu implementieren,
haben aber gleichzeitig eine begrenzte Flexibilität bei der Anzeige von Informationen.
Popovers sind flexibler als Tooltips, aber sie haben auch ihre eigenen Einschränkungen.
Modals bieten Ihnen die umfangreichste Unterstützung für die
Anzeige von Inhalten auf vielfältige Weise.
Als Beispiel gehen wir auf unsere Webseite, an der wir gearbeitet haben.
Sie sehen, dass, wenn wir den Mauszeiger auf diese Schaltfläche bewegen.
Sie sehen diese Meldung auf dem Bildschirm hier
mit einigen zusätzlichen Informationen.
Dies ist ein Beispiel für einen Tooltip.
Auf diese Weise können Sie kleinere Mengen an Informationen für die Benutzer anzeigen.
Also zum Beispiel, wenn Sie versuchen, Benutzer durch Ihre Website zu führen und
wollen, dass sie wissen, was passiert, wenn Sie auf verschiedene Standorte jeder Webseite klicken,
diese vielleicht eine gute Möglichkeit, sie daran zu erinnern, was erwartet wird.
So könnten Sie zum Beispiel
exemplarische Vorgehensweisen Ihrer Website mit diesen QuickInfos erstellen, um den Benutzern anzuzeigen.
Wenn Sie ein bisschen detailliertere Informationen wünschen
, wären Popovers nützlicher.
Das gleiche Beispiel, implementieren und verwenden Sie ein Popover würde so aussehen.
Jetzt
müssen Sie in diesem Fall explizit auf die Schaltfläche klicken, um das Popover anzuzeigen.
In diesem Fall wird das Popover mit einigen Titelinformationen und
dann der tatsächliche Inhalt unten in diesem Popover angezeigt. Wenn Sie
nun das Popover schließen, müssen Sie erneut auf den unteren Rand klicken.
Das ist also das Verhalten eines Popovers.
Unter bestimmten Umständen sind Popovers nützlicher als Tooltips.
Unsere dritte Art von Daten-Overlay ist das Modal.
Ein Modal ermöglicht es Ihnen, den
Benutzern detailliertere Informationen als einen Tooltip und ein Popover zu präsentieren.
Der Inhalt des Modals ist selbst in eine Kopfzeile, einen Körper und die Fußzeile unterteilt.
Und das Modal selbst kann viel detailliertere Informationen enthalten.
Und Sie können das gesamte Bootstrap-Raster
innerhalb des modalen Körpers verwenden, um den tatsächlichen Inhalt zu organisieren.
Wir betrachten ein paar Beispiele für die Verwendung von Modals als als nächstes. Wenn Sie
auf unsere Webseite gehen, werden Sie sehen, dass auf der rechten Seite,
hier haben wir einen Link namens Login.
Wenn Sie also auf diesen Link klicken, werden Sie feststellen, dass dieses Modal
mit ihrem Anmeldeformular auf dem Bildschirm erscheint.
Dies ist also das typische Verhalten eines Modals.
Und so können Sie hier die Informationen eingeben, und
klicken Sie dann auf die Schaltfläche Anmelden, um sich auf Ihrer Website anzumelden.
Gehen Sie auf Ihre Coursera-Seite, hier ist ein echtes Leben Beispiel für die Verwendung eines Modals.
Wenn Sie zum Beispiel auf die Schaltfläche Anmelden klicken,
können Sie sehen, dass auf Coursera ein Formular auf dem Bildschirm erscheint.
Dies ist also eine weitere Verwendung eines Modals in Ihrer Webseite. Nachdem
Sie nun Beispiele für Tooltips, Popovers und Modals gesehen haben,
gehen wir zur nächsten Übung, wo wir einen Tooltip auf unserer Seite index.html erstellen.
Wir erstellen auch ein Modal, mit dem der Benutzer Informationen eingeben kann, um sich bei
unserer Webseite anzumelden.
( MUSIK)