1
00:00:00,242 --> 00:00:04,459
[MUSIC]

2
00:00:04,459 --> 00:00:09,590
Lassen Sie uns jetzt über ein sehr nützliches Plugin in Bootstrap sprechen, das als Collapse bezeichnet wird.

3
00:00:09,590 --> 00:00:14,110
Wir haben seine Anwendung in der Navigationsleiste früher gesehen.

4
00:00:14,110 --> 00:00:19,050
Wir werden diesen Code nochmals besuchen und ihn genauer betrachten.

5
00:00:19,050 --> 00:00:21,910
Eine verwandte Komponente wird als Akkordeon bezeichnet.

6
00:00:21,910 --> 00:00:26,310
Das Akkordeon nutzt das Collapse-Plugin für seine Funktion.

7
00:00:26,310 --> 00:00:30,100
Und wir werden das im Detail in der folgenden Übung sehen.

8
00:00:31,740 --> 00:00:36,570
Das Collapse-Plugin bietet eine einfache Möglichkeit,

9
00:00:36,570 --> 00:00:38,487
Inhalte auf Ihrer Webseite zu enthüllen und auszublenden.

10
00:00:40,030 --> 00:00:45,307
Dieses Ein- und Ausblenden der Inhalte wird in der Regel

11
00:00:45,307 --> 00:00:50,186
dadurch ausgelöst, dass der Benutzer auf eine Schaltfläche oder einen Link in Ihrer Webseite klickt.

12
00:00:50,186 --> 00:00:55,001
Jetzt werden Sie viele Orte sehen, an denen die Art von Collapse

13
00:00:55,001 --> 00:01:00,006
Verhalten sehr gut genutzt wird, um Inhalte anzuzeigen.

14
00:01:00,006 --> 00:01:04,760
Wir werden unsere navbar erneut besuchen, um das Collapse-Plugin in Aktion zu betrachten, und

15
00:01:04,760 --> 00:01:07,590
dann sehen wir auch ein Akkordeon-Beispiel als nächstes. Wenn Sie

16
00:01:08,630 --> 00:01:14,381
auf unsere Webseite zurückgehen, werden Sie sich erinnern, dass, als wir die Navigationsleiste

17
00:01:14,381 --> 00:01:19,948
in unserer Webseite für extra kleine Bildschirme erstellt haben, die Navbar zusammengebrochen wurde und

18
00:01:19,948 --> 00:01:24,346
dann wurde es aufgedeckt, als wir hier auf die Schaltfläche klickten.

19
00:01:24,346 --> 00:01:29,670
Nun ist dies ein Beispiel für die Verwendung des Collapse-Plugins hier.

20
00:01:29,670 --> 00:01:34,890
Wenn wir uns den Code ansehen, werden wir sehen, dass wir tatsächlich das Collapse-Plugin auf

21
00:01:34,890 --> 00:01:38,440
das div anwenden, das diese Navigationsleiste enthält.

22
00:01:39,530 --> 00:01:41,534
Wenn Sie sich den Code für

23
00:01:41,534 --> 00:01:46,320
unsere Navigationsleiste ansehen, den wir zuvor entworfen haben, haben Sie gesehen, dass

24
00:01:46,320 --> 00:01:51,012
wir hier, innerhalb des Containers, diese Schaltfläche erstellt haben, die für

25
00:01:51,012 --> 00:01:56,850
die extra kleinen Bildschirmgrößen mit der navbar-toggler-Klasse angezeigt wird.

26
00:01:56,850 --> 00:01:59,440
Schauen Sie sich das div an, das dieser Schaltfläche folgt.

27
00:01:59,440 --> 00:02:02,600
Für das div, das dieser Schaltfläche folgt, haben wir die Collapse-Klasse verwendet.

28
00:02:02,600 --> 00:02:06,495
Dies ist also die Verwendung des Collapse-Plugins in unserer navbar.

29
00:02:06,495 --> 00:02:10,627
Was das schafft, ist, dass dieser spezielle Inhalt,

30
00:02:10,627 --> 00:02:15,095
unsere Navigationsleiste, die in diesem div eingeschlossen ist, für

31
00:02:15,095 --> 00:02:17,065
die extra kleinen Bildschirmgrößen zusammengebrochen wird.

32
00:02:17,065 --> 00:02:22,080
Und dann, zusammen mit dem Collapse-Plugin,

33
00:02:22,080 --> 00:02:26,589
wird dieser Button, der dort erscheint, das Ein- und Ausblenden dieser Navbar hier auslösen.

34
00:02:26,589 --> 00:02:32,582
Deshalb, wenn Sie auf die Schaltfläche schauen, werden Sie sehen, dass

35
00:02:32,582 --> 00:02:38,171
wir genau dort das Daten-Toggle-Attribut mit dem Zusammenbruch hier

36
00:02:38,171 --> 00:02:42,350
und dann das Datenziel als #Navbar hier bereitstellen.

37
00:02:42,350 --> 00:02:47,960
Und beachten Sie, dass die ID für dieses div, das wir hier angewendet haben, Navbar ist.

38
00:02:47,960 --> 00:02:53,030
Also spezifizieren wir im Wesentlichen, dass dieser Knopf als

39
00:02:53,030 --> 00:02:59,460
Auslösemechanismus für dieses Collapse-Plugin fungieren wird, um an diesem div hier zu arbeiten.

40
00:02:59,460 --> 00:03:03,387
Dies ist also eine Verwendung des Collapse-Plugins in Ihrer Webseite.

41
00:03:04,590 --> 00:03:10,840
Außerdem werden wir uns die andere Komponente ansehen, die das Akkordeon in Bootstrap ist.

42
00:03:10,840 --> 00:03:12,410
Wie verhält sich ein Akkordeon?

43
00:03:12,410 --> 00:03:16,110
Dies ist also ein Beispiel für ein Akkordeon, das wir in der

44
00:03:16,110 --> 00:03:16,928
folgenden Übung konstruieren werden.

45
00:03:16,928 --> 00:03:21,520
Hier werden Sie sehen, dass ich die Tabbed Navigation ersetzt habe, die wir

46
00:03:21,520 --> 00:03:25,846
in der vorherigen Übung gemacht haben, indem Sie hier ein Akkordeon verwenden.

47
00:03:25,846 --> 00:03:30,480
Die Art und Weise, wie das Akkordeon funktioniert, ist, dass ein Stück Inhalt enthüllt wird und

48
00:03:30,480 --> 00:03:32,020
die restlichen drei verborgen sind.

49
00:03:32,020 --> 00:03:35,640
Dies verwendet also das Collapse-Plugin für diesen Zweck.

50
00:03:35,640 --> 00:03:41,920
Wenn Sie also auf einen der Namen dieser anderen Unternehmensleiter klicken,

51
00:03:41,920 --> 00:03:45,490
dann werden die Details dieses Unternehmensleiters enthüllt und

52
00:03:45,490 --> 00:03:47,280
die restlichen drei verborgen.

53
00:03:47,280 --> 00:03:50,270
Das ist also das Akkordeon-Verhalten hier.

54
00:03:50,270 --> 00:03:52,700
Wenn Sie mit einem Akkordeon,

55
00:03:52,700 --> 00:03:57,000
dem Musikinstrument, vertraut sind, wissen Sie, wie der Balg des Akkordeons funktioniert.

56
00:03:57,000 --> 00:04:02,530
So verhält sich das in gewissem Sinne wie der Balg des Akkordeons.

57
00:04:02,530 --> 00:04:08,996
Das ist also der Grund, warum diese Komponente in Bootstrap als Akkordeon bezeichnet wird.

58
00:04:08,996 --> 00:04:17,280
Ein weiteres Beispiel für das verwendete Collapse-Plugin ist auf Ihrer eigenen Kurs-Website.

59
00:04:17,280 --> 00:04:19,350
Wenn Sie also auf Ihre Kurs-Website

60
00:04:19,350 --> 00:04:23,360
gehen und dann in den Inhalt Ihrer Kurs-Website

61
00:04:23,360 --> 00:04:28,730
gehen und den Inhalt hier ansehen, werden Sie feststellen, dass

62
00:04:28,730 --> 00:04:32,940
Sie auf der linken Seite eine Navigation haben, die auf der linken Seite ins Bild kommt.

63
00:04:32,940 --> 00:04:35,390
Das ist also die Navigation dort.

64
00:04:35,390 --> 00:04:40,510
Wenn du also auf jeden einzelnen klickst, merkst du, wie der Inhalt hier

65
00:04:40,510 --> 00:04:45,980
versteckt und offenbart wird, indem du auf jeden dieser Links klickst.

66
00:04:45,980 --> 00:04:51,246
Das ist also wie das Collapse-Plugin, das wir in Bootstrap gesehen haben.

67
00:04:51,246 --> 00:04:57,780
Obwohl natürlich die Coursera-Seite Bootstrap nicht verwendet.

68
00:04:57,780 --> 00:05:02,306
Wir gehen zur nächsten Übung, wo wir sehen werden, wie wir

69
00:05:02,306 --> 00:05:07,010
das Akkordeon konstruieren, um unsere Informationen über die Unternehmensführung zu zeigen.

70
00:05:07,010 --> 00:05:13,120
( MUSIK)