1
00:00:00,000 --> 00:00:04,642
[MUSIC]

2
00:00:04,642 --> 00:00:09,310
Lassen Sie uns kurz über Bootstrap-Tabellen diskutieren.

3
00:00:09,310 --> 00:00:15,537
Was bringt Bootstrap zu Styling-Tabellen, die wir in unsere Webseiten aufnehmen?

4
00:00:15,537 --> 00:00:20,636
Wir werden auch eine andere Bootstrap-Komponente betrachten, die als Bootstrap-Karte bezeichnet

5
00:00:20,636 --> 00:00:24,790
wird, die eine sehr vielseitige Komponente für die Anzeige von Inhalten ist.

6
00:00:26,520 --> 00:00:31,438
Es kann viele Gelegenheiten geben, in denen Sie tabellarische Inhalte

7
00:00:31,438 --> 00:00:32,717
auf Ihrer Webseite präsentieren möchten.

8
00:00:32,717 --> 00:00:37,021
Tabellen wurden im Wesentlichen für

9
00:00:37,021 --> 00:00:41,998
diesen Zweck entworfen, aber bald dort, nachdem

10
00:00:41,998 --> 00:00:46,706
Webseiten-Designer Tabellen entführt haben, um

11
00:00:46,706 --> 00:00:52,170
Inhalte in den Seiten zu entwerfen und zu legen.

12
00:00:52,170 --> 00:00:56,992
Da der ursprüngliche HTML-Code von Natur

13
00:00:56,992 --> 00:01:01,931
aus nicht in der Lage war, Inhalte in einer Webseite richtig zu gestalten.

14
00:01:01,931 --> 00:01:07,175
Natürlich

15
00:01:07,175 --> 00:01:09,804
wurden die Tabellen mit der Ankunft von rasterbasierten Layouts wie dem Bootstrap-Raster auf Tabellen aktiviert.

16
00:01:09,804 --> 00:01:14,379
Und in zunehmendem Maße bevorzugen die Menschen, Tabellen nicht

17
00:01:14,379 --> 00:01:19,465
als Haupt Art von Building Content Layout in Webseiten zu verwenden.

18
00:01:19,465 --> 00:01:24,440
Gitterbasierte Layouts sind für diesen Zweck besser ausgelegt.

19
00:01:24,440 --> 00:01:29,896
Hier ist ein Beispiel dafür, was wir mit einer Standard-HTML-Tabelle tun können,

20
00:01:29,896 --> 00:01:36,736
indem Sie mehrere Klassen verwenden, die Bootstrap bietet für Styling-Tabellen.

21
00:01:36,736 --> 00:01:41,951
Hier können Sie sehen, dass die Menge auseinander, indem Sie

22
00:01:41,951 --> 00:01:47,371
sie in dunkler Farbe anzeigen und dann die Zeilen selbst hervorgehoben werden,

23
00:01:47,371 --> 00:01:53,020
indem alternative Zeilen mit verschiedenen Sicherungen angezeigt werden.

24
00:01:53,020 --> 00:01:58,168
Die Tabelle, die in Bootstrap basiert auf dieser Seite verwendet

25
00:01:58,168 --> 00:02:04,898
wird, ähnelt der Verwendung von Tabellen in Standard-HTML-Seiten.

26
00:02:04,898 --> 00:02:09,220
Aber natürlich wenden Sie die Klassentabelle an, die

27
00:02:09,220 --> 00:02:14,610
in Bootstrap unterstützt wird, auf eine Standardtabellentechnologie an.

28
00:02:14,610 --> 00:02:21,490
Darüber hinaus bietet Bootstrap viele verschiedene Klassen für Styling-Tabellen wie,

29
00:02:21,490 --> 00:02:27,410
Tabelle gestreift für Zebra gestreifte Tabellen, wie wir in dem Beispiel zuvor gesehen.

30
00:02:27,410 --> 00:02:30,433
In ähnlicher Weise haben wir Tabelle für Grenzen begrenzt.

31
00:02:30,433 --> 00:02:38,136
Tabellen, Tisch-Hover, Tisch-sm für Tabellen mit Zellpolsterung in zwei Hälften geschnitten.

32
00:02:38,136 --> 00:02:43,289
Und ähnlich kann table-responsive auf ein div um Tabellen angewendet werden, so

33
00:02:43,289 --> 00:02:48,696
dass die Tabellen reaktionsschnell gemacht werden können, wo es auf kleineren Bildschirmgrößen angezeigt wird.

34
00:02:48,696 --> 00:02:54,723
Die Tabellen können dann horizontal und vertikal scrollen.

35
00:02:54,723 --> 00:03:00,039
Außerdem können Sie Hintergründe auf einzelne Tabellenzeilen oder

36
00:03:00,039 --> 00:03:02,480
ganze Tabellen selbst anwenden. Im

37
00:03:02,480 --> 00:03:08,454
Folgenden finden Sie einige Beispiele, wie Sie eine

38
00:03:08,454 --> 00:03:13,766
Hintergrundfarbe auf eine bestimmte Zeile oder eine bestimmte Zelle in der Tabelle anwenden können.

39
00:03:13,766 --> 00:03:18,478
Eine weitere vielseitige Komponente, die in Bootstrap verfügbar ist,

40
00:03:18,478 --> 00:03:20,695
ist eine Bootstrap-Karte.

41
00:03:20,695 --> 00:03:24,708
Manchmal möchten Sie möglicherweise einige Inhalte auf Ihrer Webseite hervorheben.

42
00:03:24,708 --> 00:03:28,695
Hier kommt Bootstrap zu Hilfe.

43
00:03:28,695 --> 00:03:33,172
In Bootstrap-Karte ist eine vielseitige Komponente, mit der Sie

44
00:03:33,172 --> 00:03:35,904
Inhalte auf unzählige Arten anzeigen können.

45
00:03:35,904 --> 00:03:40,360
Sie würden bemerken, dass es Ihnen erlaubt, Header für Karten zu haben.

46
00:03:40,360 --> 00:03:42,625
Sie können Bilder auch in Karten aufnehmen.

47
00:03:42,625 --> 00:03:45,615
Sie können Bilder in den Hintergrund von Karten einfügen.

48
00:03:45,615 --> 00:03:49,470
Sie können sogar die Hintergrundfarbe von Karten ändern.

49
00:03:49,470 --> 00:03:52,450
Viele Funktionen werden von Karten unterstützt.

50
00:03:53,530 --> 00:03:59,218
Hier sind ein paar Beispiele für Karten, die wir später in den Übungen sehen werden.

51
00:03:59,218 --> 00:04:04,974
Wir werden auch vielseitiger uns von Karten in späteren Übungen und

52
00:04:04,974 --> 00:04:09,090
anderen Kursen in dieser Spezialisierung sehen.

53
00:04:09,090 --> 00:04:14,090
Card ist ein sehr wichtiges Unternehmen, das effektiv für die

54
00:04:14,090 --> 00:04:15,900
Anzeige von Inhalten verwendet werden kann.

55
00:04:15,900 --> 00:04:21,203
Es ist an der Zeit, mit der nächsten Übung fortzufahren, wo wir Tabellen und

56
00:04:21,203 --> 00:04:24,844
Karten verwenden, um Inhalte auf unserer Webseite anzuzeigen.

57
00:04:24,844 --> 00:04:30,629
( MUSIK)