1
00:00:00,000 --> 00:00:04,432
[MUSIK]

2
00:00:04,432 --> 00:00:09,439
Lassen Sie uns nun versuchen, verschiedene Mechanismen zu verstehen, damit wir

3
00:00:09,439 --> 00:00:16,100
Informationen für die Benutzer anzeigen können, die den Inhalt Ihrer Webseite überlagern.

4
00:00:16,100 --> 00:00:21,040
Hier werden wir uns also drei verschiedene Konstrukte ansehen, die in Bootstrap verfügbar sind, die

5
00:00:21,040 --> 00:00:24,230
Tooltips, Popovers und Modals genannt werden.

6
00:00:25,570 --> 00:00:30,760
Was sind Tooltips, Popovers und Modals und wie sind sie nützlich?

7
00:00:30,760 --> 00:00:36,090
Zuerst werden wir uns einige grundlegende Ideen ansehen, und dann schauen wir uns einige Beispiele an.

8
00:00:36,090 --> 00:00:39,844
In der folgenden Übung verwenden wir Tooltips und

9
00:00:39,844 --> 00:00:45,130
Modals auf unserer Webseite, und wir betrachten ein Beispiel für Popovers.

10
00:00:45,130 --> 00:00:51,610
Wie ich bereits erwähnt habe, sind Tooltips, Popovers und Modals eine Möglichkeit, Inhalte für

11
00:00:51,610 --> 00:00:56,090
die Benutzer offenzulegen, wenn der Benutzer mit bestimmten Elementen auf Ihrer Webseite interagiert.

12
00:00:56,090 --> 00:01:01,280
Zum Beispiel, wenn die Maus des Benutzers

13
00:01:01,280 --> 00:01:06,640
auf eine Schaltfläche klickt, den Mauszeiger über eine Schaltfläche bewegt oder auf einen Link klickt

14
00:01:06,640 --> 00:01:11,830
oder einen bestimmten Punkt auf Ihrer Webseite erreicht.

15
00:01:11,830 --> 00:01:16,170
All diese werden also Informationen auslösen, die den Benutzern angezeigt werden.

16
00:01:16,170 --> 00:01:17,470
In diesem Fall

17
00:01:17,470 --> 00:01:22,970
werden die Informationen als Overlay auf Ihrer Webseite angezeigt.

18
00:01:22,970 --> 00:01:25,700
Der zugrundeliegende Inhalt der Webseite ist also immer noch vorhanden, aber

19
00:01:25,700 --> 00:01:30,280
dieser wird auf dem zugrundeliegenden Inhalt gelegt.

20
00:01:30,280 --> 00:01:35,750
In Bezug auf Flexibilität sind Tooltips am einfachsten zu implementieren,

21
00:01:35,750 --> 00:01:40,160
haben aber gleichzeitig eine begrenzte Flexibilität bei der Anzeige von Informationen.

22
00:01:40,160 --> 00:01:46,610
Popovers sind flexibler als Tooltips, aber sie haben auch ihre eigenen Einschränkungen.

23
00:01:46,610 --> 00:01:50,110
Modals bieten Ihnen die umfangreichste Unterstützung für die

24
00:01:50,110 --> 00:01:54,980
Anzeige von Inhalten auf vielfältige Weise.

25
00:01:56,250 --> 00:02:02,600
Als Beispiel gehen wir auf unsere Webseite, an der wir gearbeitet haben.

26
00:02:02,600 --> 00:02:09,970
Sie sehen, dass, wenn wir den Mauszeiger auf diese Schaltfläche bewegen.

27
00:02:09,970 --> 00:02:14,560
Sie sehen diese Meldung auf dem Bildschirm hier

28
00:02:14,560 --> 00:02:16,930
mit einigen zusätzlichen Informationen.

29
00:02:16,930 --> 00:02:18,975
Dies ist ein Beispiel für einen Tooltip.

30
00:02:20,290 --> 00:02:24,210
Auf diese Weise können Sie kleinere Mengen an Informationen für die Benutzer anzeigen.

31
00:02:24,210 --> 00:02:29,340
Also zum Beispiel, wenn Sie versuchen, Benutzer durch Ihre Website zu führen und

32
00:02:29,340 --> 00:02:33,740
wollen, dass sie wissen, was passiert, wenn Sie auf verschiedene Standorte jeder Webseite klicken,

33
00:02:33,740 --> 00:02:38,240
diese vielleicht eine gute Möglichkeit, sie daran zu erinnern, was erwartet wird.

34
00:02:38,240 --> 00:02:40,870
So könnten Sie zum Beispiel

35
00:02:40,870 --> 00:02:46,250
exemplarische Vorgehensweisen Ihrer Website mit diesen QuickInfos erstellen, um den Benutzern anzuzeigen.

36
00:02:46,250 --> 00:02:49,130
Wenn Sie ein bisschen detailliertere Informationen wünschen

37
00:02:49,130 --> 00:02:51,300
, wären Popovers nützlicher.

38
00:02:52,305 --> 00:02:56,920
Das gleiche Beispiel, implementieren und verwenden Sie ein Popover würde so aussehen.

39
00:02:56,920 --> 00:02:58,040
Jetzt

40
00:02:58,040 --> 00:03:02,040
müssen Sie in diesem Fall explizit auf die Schaltfläche klicken, um das Popover anzuzeigen.

41
00:03:02,040 --> 00:03:06,670
In diesem Fall wird das Popover mit einigen Titelinformationen und

42
00:03:06,670 --> 00:03:12,210
dann der tatsächliche Inhalt unten in diesem Popover angezeigt. Wenn Sie

43
00:03:12,210 --> 00:03:17,200
nun das Popover schließen, müssen Sie erneut auf den unteren Rand klicken.

44
00:03:17,200 --> 00:03:19,640
Das ist also das Verhalten eines Popovers.

45
00:03:19,640 --> 00:03:26,420
Unter bestimmten Umständen sind Popovers nützlicher als Tooltips.

46
00:03:26,420 --> 00:03:29,990
Unsere dritte Art von Daten-Overlay ist das Modal.

47
00:03:29,990 --> 00:03:33,140
Ein Modal ermöglicht es Ihnen, den

48
00:03:33,140 --> 00:03:37,410
Benutzern detailliertere Informationen als einen Tooltip und ein Popover zu präsentieren.

49
00:03:37,410 --> 00:03:44,060
Der Inhalt des Modals ist selbst in eine Kopfzeile, einen Körper und die Fußzeile unterteilt.

50
00:03:44,060 --> 00:03:49,700
Und das Modal selbst kann viel detailliertere Informationen enthalten.

51
00:03:49,700 --> 00:03:52,740
Und Sie können das gesamte Bootstrap-Raster

52
00:03:52,740 --> 00:03:57,630
innerhalb des modalen Körpers verwenden, um den tatsächlichen Inhalt zu organisieren.

53
00:03:57,630 --> 00:04:02,860
Wir betrachten ein paar Beispiele für die Verwendung von Modals als als nächstes. Wenn Sie

54
00:04:02,860 --> 00:04:06,220
auf unsere Webseite gehen, werden Sie sehen, dass auf der rechten Seite,

55
00:04:06,220 --> 00:04:09,400
hier haben wir einen Link namens Login.

56
00:04:09,400 --> 00:04:13,890
Wenn Sie also auf diesen Link klicken, werden Sie feststellen, dass dieses Modal

57
00:04:13,890 --> 00:04:17,600
mit ihrem Anmeldeformular auf dem Bildschirm erscheint.

58
00:04:17,600 --> 00:04:21,060
Dies ist also das typische Verhalten eines Modals.

59
00:04:21,060 --> 00:04:23,420
Und so können Sie hier die Informationen eingeben, und

60
00:04:23,420 --> 00:04:28,070
klicken Sie dann auf die Schaltfläche Anmelden, um sich auf Ihrer Website anzumelden.

61
00:04:29,190 --> 00:04:34,890
Gehen Sie auf Ihre Coursera-Seite, hier ist ein echtes Leben Beispiel für die Verwendung eines Modals.

62
00:04:34,890 --> 00:04:38,430
Wenn Sie zum Beispiel auf die Schaltfläche Anmelden klicken,

63
00:04:38,430 --> 00:04:43,190
können Sie sehen, dass auf Coursera ein Formular auf dem Bildschirm erscheint.

64
00:04:43,190 --> 00:04:47,720
Dies ist also eine weitere Verwendung eines Modals in Ihrer Webseite. Nachdem

65
00:04:49,060 --> 00:04:53,252
Sie nun Beispiele für Tooltips, Popovers und Modals gesehen haben,

66
00:04:53,252 --> 00:04:58,522
gehen wir zur nächsten Übung, wo wir einen Tooltip auf unserer Seite index.html erstellen.

67
00:04:58,522 --> 00:05:04,379
Wir erstellen auch ein Modal, mit dem der Benutzer Informationen eingeben kann, um sich bei

68
00:05:04,379 --> 00:05:06,787
unserer Webseite anzumelden.

69
00:05:06,787 --> 00:05:10,269
( MUSIK)