1 00:00:03,460 --> 00:00:11,430 Akkordeons sind eines dieser lästigen Instrumente, die einige von euch vielleicht schon gesehen haben. 2 00:00:11,430 --> 00:00:16,020 Es hat einen dieser Blasebalg mit einer Tastatur unten 3 00:00:16,020 --> 00:00:20,940 hier unten und dann blasen Sie und spielen Sie dann die Musik mit den Tasten dort. 4 00:00:20,940 --> 00:00:23,645 Und nicht jeder genießt es. 5 00:00:23,645 --> 00:00:28,740 Ich bin mir ziemlich sicher. Aber nichts für ungut Akkordeonspieler. 6 00:00:28,740 --> 00:00:34,650 Akkordeons in Bootstrap sind sicher sehr interessant. 7 00:00:34,650 --> 00:00:39,380 Wir werden uns ansehen, wie wir Akkordeons anwenden, um 8 00:00:39,380 --> 00:00:44,580 in dieser Übung Inhalte auf unserer Webseite ein- und ausblenden zu können. 9 00:00:44,580 --> 00:00:51,300 Zurück zu Über uns auf HTML-Seite, wo wir die Informationen über die Unternehmensführung hatten. 10 00:00:51,300 --> 00:00:56,960 Jetzt werde ich die obere Navigation durch eine Akkordeon-basierte Navigation ersetzen. 11 00:00:56,960 --> 00:01:03,175 Ich werde diese UL entfernen, die den Begriff Navigation vollständig definiert. 12 00:01:03,175 --> 00:01:08,320 Und dann entwerfen wir das Akkordeon um den Inhalt, den wir bereits haben. 13 00:01:08,320 --> 00:01:13,700 Also, lassen Sie uns diese UL löschen, die die Tab-Navigation enthält, so dass sie 14 00:01:13,700 --> 00:01:20,160 nur mit diesem Teil, der innerhalb des oberen Bereichs und den oberen Inhalt eingeschlossen ist. 15 00:01:20,160 --> 00:01:22,115 Also, wir werden gehen und das ändern. 16 00:01:22,115 --> 00:01:23,740 Wenn ich hier zu diesem div 17 00:01:23,740 --> 00:01:33,225 gehe, werde ich diese Klasse von dort entfernen und dann die ID als Akkordeon anwenden. 18 00:01:33,225 --> 00:01:40,060 Wir brauchen diese ID später, um das Akkordeon erstellen zu können, dass div, 19 00:01:40,060 --> 00:01:43,175 das diesen Inhalt enthält, noch dort vorhanden ist. 20 00:01:43,175 --> 00:01:46,545 So wird der Top-Inhalt jetzt in Akkordeon geändert. 21 00:01:46,545 --> 00:01:49,745 Nun, jeder dieser Inhalte hier, werden 22 00:01:49,745 --> 00:01:53,460 wir diese in eine 23 00:01:53,460 --> 00:01:59,080 karten-basierte Struktur konvertieren, so dass sie den Inhalt in 24 00:01:59,080 --> 00:02:02,360 jeder dieser Karten offenbaren können, so dass Sie sehen, wie ich die Karte und 25 00:02:02,360 --> 00:02:09,220 die Kartenklassen dort verwenden, um diesen Inhalt beizufügen. 26 00:02:09,220 --> 00:02:12,595 Jetzt, in den eigentlichen Inhalt hier gehe, 27 00:02:12,595 --> 00:02:16,905 werde ich anfangen, die Kartenklasse hier mit dem div dort anzuwenden. 28 00:02:16,905 --> 00:02:21,900 Also, wir werden sagen, „div class card“ und 29 00:02:21,900 --> 00:02:29,890 dann schließen Sie das div dort und dann geht dieser Inhalt in das div dort. 30 00:02:29,890 --> 00:02:34,110 Jetzt, hier drin, werden wir hineingehen und 31 00:02:34,110 --> 00:02:41,610 ein div mit der Klasse „Kartenkopf“ erstellen. 32 00:02:42,030 --> 00:02:45,280 Ich werde Ihnen für einen von ihnen zeigen, und dann werden wir 33 00:02:45,280 --> 00:02:48,425 diesen Prozess auch für die restlichen drei wiederholen. 34 00:02:48,425 --> 00:02:57,480 Also, wir werden sagen, „Karte Header Roll Tab“ und dann „id Peterhead.“ 35 00:02:57,480 --> 00:03:04,335 Ich werde dieses h3 von unten hier unten nehmen, 36 00:03:04,335 --> 00:03:10,265 es ausschneiden und dann in die Kartentafel einfügen. 37 00:03:10,265 --> 00:03:14,815 Also, diese h3, die den Namen 38 00:03:14,815 --> 00:03:18,945 der Corporate Leadership Person definiert, wird von 39 00:03:18,945 --> 00:03:24,310 innerhalb des Registerkartenbereichs geschnitten und dann in den Kartenkopf hier verschoben. 40 00:03:24,310 --> 00:03:29,060 Dies wird als meine Navigationshilfe fungieren. 41 00:03:29,060 --> 00:03:35,425 Nun, zu diesem h3, werde ich eine Klasse namens mb-0 anwenden. 42 00:03:35,425 --> 00:03:37,920 Also, das ist mb-0 hier. 43 00:03:37,920 --> 00:03:41,260 Nun, dieser Name selbst, 44 00:03:41,260 --> 00:03:44,840 ich werde das in und eine einschließen, 45 00:03:44,840 --> 00:03:49,300 also werde ich zur nächsten Zeile gehen und dann sagen, 46 00:03:49,300 --> 00:03:56,650 „ein Datenumschalter“ und 47 00:03:56,650 --> 00:04:00,845 der Datenumschalter wird sagen, „kollabieren“. 48 00:04:00,845 --> 00:04:06,025 Also, jetzt sehen Sie, dass Sie das Collapse-Plugin verwenden. 49 00:04:06,025 --> 00:04:09,440 Also, wir haben diese Schließung h3 dort. 50 00:04:09,440 --> 00:04:12,630 Also, ich werde es in die nächste Zeile 51 00:04:12,630 --> 00:04:17,400 hier verschieben und dann werde ich das A Tag genau dort schließen. 52 00:04:17,400 --> 00:04:25,265 Damit umgibt das A Tag nun den Namen des CEO hier drin. 53 00:04:25,265 --> 00:04:31,285 Und dann schließt das h3-Tag natürlich das h3 oben und dann ist dies 54 00:04:31,285 --> 00:04:37,525 innerhalb des div, das der Klassenkarten-Header ist. 55 00:04:37,525 --> 00:04:43,950 Das bildet also die Header-Struktur für mein Akkordeon div. 56 00:04:43,950 --> 00:04:46,915 Gehen Sie jetzt in die Registerkarte unten, 57 00:04:46,915 --> 00:04:54,050 Ich werde diese Klasse von Registerkarte Panel Fade zu reduzieren ändern. 58 00:04:54,050 --> 00:05:01,455 Dies wäre also ein Collapse-Plugin, das für unser Akkordeon nützlich sein 59 00:05:01,455 --> 00:05:05,680 wird und auch ich werde 60 00:05:05,680 --> 00:05:10,075 diese aktive Klasse dafür entfernen und die ID wird als Peter dafür gelassen. 61 00:05:10,075 --> 00:05:18,375 Und dann werden Sie sagen, „Daten Eltern“ und Sie würden Akkordeon angeben. 62 00:05:18,375 --> 00:05:24,960 Sie sehen, warum wir die ID des Akkordeons an das div gegeben haben, das all diese Inhalte umschließt. Auf 63 00:05:24,960 --> 00:05:28,010 diese Weise können Sie angeben, dass dies 64 00:05:28,010 --> 00:05:31,720 Teil des Akkordeons sein wird, das Sie dort konstruieren. 65 00:05:31,720 --> 00:05:34,420 Also, das ist, warum Daten Eltern-Akkordeon. 66 00:05:34,420 --> 00:05:37,930 Nun, der Inhalt in diesem Tab-Panel, 67 00:05:37,930 --> 00:05:42,340 werde ich es in das div mit 68 00:05:42,340 --> 00:05:48,460 dem Klassenkarten-Körper 69 00:05:48,920 --> 00:05:54,125 einschließen und dieses div hier schließen 70 00:05:54,125 --> 00:05:57,790 und dann diesen Inhalt einrücken. 71 00:05:57,790 --> 00:06:03,440 Lassen Sie uns die Änderungen speichern und dann gehen und werfen Sie einen Blick auf unsere Webseite in diesem Moment. Wenn Sie 72 00:06:03,440 --> 00:06:08,735 auf unsere Webseite gehen, stellen Sie nun fest, dass in der Unternehmensführung 73 00:06:08,735 --> 00:06:16,550 der Name des CEO hier im Kartenkopf hervorgehoben wird. 74 00:06:16,550 --> 00:06:19,150 Und dann ist der Inhalt unten hier unten. 75 00:06:19,150 --> 00:06:25,830 Jetzt werden wir die verbleibenden drei unten erstellen und dann alle darin einschließen. 76 00:06:25,830 --> 00:06:30,485 Ich werde die gleiche Struktur für die restlichen wiederholen. 77 00:06:30,485 --> 00:06:34,405 Also, ich werde die Karte mit dem Kartenkopf haben, 78 00:06:34,405 --> 00:06:39,075 und der Kartenkopf wird den Namen der Person so umschließen. 79 00:06:39,075 --> 00:06:40,730 Also, Sie werden so ziemlich 80 00:06:40,730 --> 00:06:45,060 die gleiche Struktur für die verbleibenden drei Teile des Inhalts folgen. 81 00:06:45,060 --> 00:06:49,190 Also, lassen Sie uns die Änderungen vornehmen und dann kommen wir zurück und überprüfen den Code. Wenn Sie 82 00:06:49,190 --> 00:06:51,185 zum Code zurückkommen, 83 00:06:51,185 --> 00:06:54,405 sehen Sie jetzt, dass 84 00:06:54,405 --> 00:06:57,880 Sie für die restlichen drei bemerken, dass ich die Karte hier immer noch 85 00:06:57,880 --> 00:07:01,535 mit dem Kartenkopf hier und h3 mit dem mb-0 benutze. 86 00:07:01,535 --> 00:07:07,590 Dies ist innerhalb der Kartenkopfklasse div dort und dann unten unter 87 00:07:07,590 --> 00:07:10,790 der Klasse nur als Zusammenbruch und dann mit der ID 88 00:07:10,790 --> 00:07:14,445 und dann dem Kartenkörper, der das P umschließt. 89 00:07:14,445 --> 00:07:18,745 Dasselbe mit den restlichen beiden auch. 90 00:07:18,745 --> 00:07:20,700 Mit dieser Änderung 91 00:07:20,700 --> 00:07:26,030 werden diese drei verbleibenden Informationen der Unternehmensleiter 92 00:07:26,030 --> 00:07:29,675 zusammengebrochen, aber Peter Pans verkrümmerte Informationen 93 00:07:29,675 --> 00:07:33,445 werden beim ersten Rendern der Webseite enthüllt. 94 00:07:33,445 --> 00:07:36,050 Also, mit dieser Änderung, jetzt, 95 00:07:36,050 --> 00:07:39,710 ist dieses Code-Snippet offensichtlich in 96 00:07:39,710 --> 00:07:44,090 den Anweisungen, die hier folgen, so dass Sie sich keine Sorgen zu viel machen müssen. 97 00:07:44,090 --> 00:07:49,865 Sie können sich immer darauf beziehen, um sicherzustellen, dass Sie es richtig gemacht haben. 98 00:07:49,865 --> 00:07:52,495 Also, lassen Sie uns die Änderungen speichern. 99 00:07:52,495 --> 00:07:54,740 Wenn Sie auf unsere Webseite zurückkehren, 100 00:07:54,740 --> 00:07:57,430 sehen Sie jetzt das Akkordeon hier konstruiert. 101 00:07:57,430 --> 00:08:03,125 So sehen Sie, dass die ersten Informationen über Unternehmensleiter hier angezeigt werden. 102 00:08:03,125 --> 00:08:06,190 Die restlichen drei sind in diesem Moment zusammengebrochen. 103 00:08:06,190 --> 00:08:11,790 Also, das ist der Grund für die Verwendung des Collapse-Plugins und auch der Grund, 104 00:08:11,790 --> 00:08:18,275 den Namen des Unternehmensführers in den Kartentitel zu verschieben. 105 00:08:18,275 --> 00:08:21,035 Sehen Sie, wie Sie gesehen haben, dass es so angezeigt wird. Wenn Sie 106 00:08:21,035 --> 00:08:25,150 nun auf einen von ihnen klicken, stellen Sie fest, dass, wenn Sie 107 00:08:25,150 --> 00:08:29,785 darauf klicken, dieser Inhalt angezeigt wird, aber die restlichen drei sind ausgeblendet. 108 00:08:29,785 --> 00:08:32,315 Also, das ist das Akkordeonverhalten hier. 109 00:08:32,315 --> 00:08:36,245 Damit schließen wir diese Übung ab. 110 00:08:36,245 --> 00:08:42,630 Dies ist ein guter Zeitpunkt für Sie, ein Git-Commit mit der Nachricht Akkordeon zu machen.