1 00:00:03,550 --> 00:00:05,885 In der vorangegangenen Vorlesung 2 00:00:05,885 --> 00:00:08,860 haben wir etwas über Responsive Design erfahren. 3 00:00:08,860 --> 00:00:12,300 Wir haben auch kurz erwähnt, dass das Bootstrap-Grid-System 4 00:00:12,300 --> 00:00:16,505 für die Unterstützung von responsive Websites ausgelegt ist. 5 00:00:16,505 --> 00:00:20,275 Wie unterstützt Bootstraps Grid dies? 6 00:00:20,275 --> 00:00:23,765 Und was genau beinhaltet Bootstrap Grid, 7 00:00:23,765 --> 00:00:27,710 das es uns ermöglicht, responsive Websites zu gestalten? 8 00:00:27,710 --> 00:00:32,535 Lassen Sie uns ein wenig mehr Details über das Bootstrap-Grid-System sprechen, 9 00:00:32,535 --> 00:00:36,700 und wie es als nächstes die Reaktionsfähigkeit unterstützt. 10 00:00:36,700 --> 00:00:45,450 Wir haben die Verwendung des Ansichtsfenster-Meta-Tags in der vorherigen Lektion gesehen, 11 00:00:45,450 --> 00:00:53,590 als wir die erste Übung zum Einrichten von Bootstrap auf unserer Seite index.html gemacht haben. 12 00:00:53,590 --> 00:00:58,790 Ich habe dann kurz auf diese spezielle Zeile im Code Bezug genommen. 13 00:00:58,790 --> 00:01:05,015 Lassen Sie uns versuchen zu verstehen, warum wir dies in unserer index.html Seite verwenden. 14 00:01:05,015 --> 00:01:08,090 Was wir hier angeben, ist, dass, 15 00:01:08,090 --> 00:01:14,555 wenn unsere Webseite vom Browser in einem bestimmten Gerät gerendert 16 00:01:14,555 --> 00:01:20,970 wird, deren Rendering im Browser die Größe des Bildschirms berücksichtigt und 17 00:01:20,970 --> 00:01:28,080 automatisch das Rendering der Seite an die Bildschirmbreite des Geräts angepasst wird. 18 00:01:28,080 --> 00:01:32,090 Auf diese Weise haben wir ansprechende Klassen, 19 00:01:32,090 --> 00:01:35,740 CSS-Klassen, die in unser UI-Framework integriert sind, 20 00:01:35,740 --> 00:01:39,030 dann wird sichergestellt, dass unsere Webseite 21 00:01:39,030 --> 00:01:42,855 für diese bestimmte Bildschirmgröße korrekt gerendert wird. 22 00:01:42,855 --> 00:01:46,930 Hier kommt das Bootstrap Grid System zu unserer Rettung und 23 00:01:46,930 --> 00:01:51,000 ermöglicht es uns, responsive Websites zu entwerfen. 24 00:01:51,000 --> 00:01:53,480 Also, noch einmal, betont diesen Punkt, 25 00:01:53,480 --> 00:01:57,100 Bootstrap Grid ist so konzipiert, dass es reagiert. 26 00:01:57,100 --> 00:02:01,525 Sie haben bereits gesehen, was das bedeutet in der vorherigen Vorlesung, 27 00:02:01,525 --> 00:02:07,845 und mobile zuerst, die wir bereits in der vorherigen Vorlesung diskutiert haben und dann 28 00:02:07,845 --> 00:02:11,055 fließend, automatisch an die Bildschirmbreite anpassen. 29 00:02:11,055 --> 00:02:16,220 Das Bootstrap-Raster nutzt das CSS-Flexbox-Layout. 30 00:02:16,220 --> 00:02:19,860 Das CSS Flexbox-Layout, das von 31 00:02:19,860 --> 00:02:23,955 den neueren Versionen der verschiedenen Browser unterstützt wird, 32 00:02:23,955 --> 00:02:30,070 ermöglicht wesentlich einfachere und flexiblere Layout-Optionen in CSS. 33 00:02:30,070 --> 00:02:31,980 Nun, die eigentliche Diskussion darüber, 34 00:02:31,980 --> 00:02:36,800 wie CSS Flexbox-Layout funktioniert, geht über den Rahmen dieses Kurses hinaus. 35 00:02:36,800 --> 00:02:41,040 Wir werden uns darauf beschränken, wie CSS Flexbox 36 00:02:41,040 --> 00:02:45,565 von Bootstrap für sein Grid-System genutzt wird. 37 00:02:45,565 --> 00:02:54,710 Frühere Bootstrap hatte ein eigenes Grid-System, das vor dem CSS Flexbox-Layout war, 38 00:02:54,710 --> 00:02:58,840 aber die neueste Version von Bootstrap 39 00:02:58,840 --> 00:03:06,650 hat das CSS-Flexbox-Layout als Standard für das Bootstrap-Raster gemacht. 40 00:03:06,650 --> 00:03:10,375 Dieses Flexbox-Layout kann 41 00:03:10,375 --> 00:03:17,390 dynamische Inhalte leicht verarbeiten und die Container an den dynamischen Inhalt anpassen 42 00:03:17,390 --> 00:03:20,780 und kann sich auch leicht an die unbekannte Größe des 43 00:03:20,780 --> 00:03:24,890 tatsächlichen Inhalts anpassen, der in den Containern eingeschlossen ist. 44 00:03:24,890 --> 00:03:30,320 Das Flexbox-Layout unterstützt auch das richtungsunabhängige Layout. 45 00:03:30,320 --> 00:03:37,084 Was das Flexbox-Layout zu den Bootstrap-Rastern bringt, ist die 46 00:03:37,084 --> 00:03:44,005 Möglichkeit, den Inhalt innerhalb eines übergeordneten Elements einfach vertikal auszurichten. 47 00:03:44,005 --> 00:03:48,595 Wir werden die Verwendung dieses in der folgenden Übung sehen. 48 00:03:48,595 --> 00:03:52,625 Außerdem ermöglicht es eine einfache Neuanordnung der Inhalte 49 00:03:52,625 --> 00:03:58,170 über verschiedene Geräte und Bildschirmauflösungen mit Hilfe von Medienabfragen. 50 00:03:58,170 --> 00:04:03,050 Wieder werden wir ein wenig davon in der Übung sehen, wie Bootstrap 51 00:04:03,050 --> 00:04:08,645 das nutzt, um interessante Möglichkeiten zum Auslegen von Inhalten zu unterstützen. 52 00:04:08,645 --> 00:04:11,670 Auch dieser Inhalt selbst, 53 00:04:11,670 --> 00:04:19,275 die Content-Container können auch so konzipiert werden, dass Spalten mit gleicher Höhe, so dass 54 00:04:19,275 --> 00:04:25,245 der Content-Container mit der größten 55 00:04:25,245 --> 00:04:32,915 Höhe bestimmt die Höhe aller verbleibenden Container, die in der gleichen Zeile angeordnet sind. 56 00:04:32,915 --> 00:04:39,375 Lassen Sie uns jetzt ein wenig mehr Details über das Bootstrap-Grid und wie es tatsächlich funktioniert. 57 00:04:39,375 --> 00:04:41,400 Die Art und Weise, wie das Bootstrap-Raster funktioniert, 58 00:04:41,400 --> 00:04:48,765 besteht darin, ein Container plus auf die äußerste Ebene anzuwenden. 59 00:04:48,765 --> 00:04:51,815 Wir könnten ein div verwenden, um 60 00:04:51,815 --> 00:04:57,075 das Element zu definieren, für das wir die Container-Klasse im Allgemeinen anwenden. 61 00:04:57,075 --> 00:05:03,855 Der Container ist die äußerste Einheit, in der der tatsächliche Inhalt ausgelegt ist. 62 00:05:03,855 --> 00:05:10,220 Bootstrap unterstützt sowohl die Container-Klasse, die ein Layout mit fester Breite ist, 63 00:05:10,220 --> 00:05:16,010 was bedeutet, dass der Inhalt selbst auf eine feste Breite auf dem Bildschirm beschränkt ist. 64 00:05:16,010 --> 00:05:22,420 Diese Container-Klasse ermöglicht es dieser festen Breite, sich automatisch an 65 00:05:22,420 --> 00:05:25,920 die Größe des Bildschirms anzupassen, indem Sie Medienabfragen verwenden, so dass 66 00:05:25,920 --> 00:05:29,695 das responsive Design in unsere Rettung kommt. 67 00:05:29,695 --> 00:05:36,340 Später werden wir sehen, wie sich dieser Container an verschiedene Bildschirmgrößen anpasst. 68 00:05:36,340 --> 00:05:39,490 Jetzt haben wir auch die Flexibilität, in 69 00:05:39,490 --> 00:05:42,684 anderen klassischen Behälterflüssigkeit 70 00:05:42,684 --> 00:05:49,200 zu verwenden, was es dem Behälter ermöglicht, sich automatisch an die Größe des Bildschirms anzupassen. 71 00:05:49,200 --> 00:05:50,855 Aber der Container mit fester Breite, 72 00:05:50,855 --> 00:05:56,270 fixiert die Größe der tatsächlichen Layoutbreite. 73 00:05:56,270 --> 00:06:01,370 Innerhalb des Containers wird der Inhalt in Form von Zeilen ausgelegt, 74 00:06:01,370 --> 00:06:04,770 also normalerweise, was wir tun würden, ist innerhalb 75 00:06:04,770 --> 00:06:08,360 und außerhalb von div, auf das wir die Container-Klasse anwenden, wir werden 76 00:06:08,360 --> 00:06:12,440 ein inneres div einschließen, auf das wir die Zeilenklasse anwenden werden. 77 00:06:12,440 --> 00:06:17,550 Der Inhalt selbst wird also vertikal in mehrere Zeilen unterteilt. 78 00:06:17,550 --> 00:06:21,000 Und sobald dies in Zeilen innerhalb jeder Zeile unterteilt ist, 79 00:06:21,000 --> 00:06:25,995 können Sie den Inhalt dann mithilfe von Spalten anordnen. 80 00:06:25,995 --> 00:06:28,810 Also, jede Zeile in Bootstrap, 81 00:06:28,810 --> 00:06:34,565 wird in 12 gleich große Spalten unterteilt. 82 00:06:34,565 --> 00:06:43,820 Jetzt können Sie Ihren Inhalt so gestalten, dass er eine beliebige Anzahl dieser 12 Spalten belegt. 83 00:06:43,820 --> 00:06:48,900 Also, und die Tatsache, dass sich der Inhalt selbst an 84 00:06:48,900 --> 00:06:51,310 die Bildschirmbreite anpasst und die Zeile selbst 85 00:06:51,310 --> 00:06:54,710 in den Container eingeschlossen wird, passt sich automatisch an die Bildschirmbreite 86 00:06:54,710 --> 00:06:58,120 und auch die Spalten an, 87 00:06:58,120 --> 00:07:01,320 die 12 Spalten werden bestimmt. 88 00:07:01,320 --> 00:07:05,010 Ihre Breiten werden von der Reihe selbst bestimmt. 89 00:07:05,010 --> 00:07:08,520 Also, was bedeutet, dass für eine andere Bildschirmgröße, 90 00:07:08,520 --> 00:07:12,470 unabhängig von Inhalt, die Sie Layout alle diese 12 Spalten 91 00:07:12,470 --> 00:07:18,220 automatisch an die Breite anpassen, die für den Inhalt erlaubt ist. 92 00:07:18,220 --> 00:07:21,990 So ist die Reaktionsfähigkeit 93 00:07:21,990 --> 00:07:27,370 in das Bootstrap-Grid-Verfahren zum Auslegen des Inhalts integriert. 94 00:07:27,370 --> 00:07:30,285 Also, wie genau gestalten wir den Inhalt? 95 00:07:30,285 --> 00:07:33,845 Darüber reden wir in den nächsten Folien. 96 00:07:33,845 --> 00:07:36,315 Das Bootstrap-Raster selbst 97 00:07:36,315 --> 00:07:45,160 stellt uns fünf Klassen zur Verfügung, um standardmäßig verschiedene Bildschirmgrößen anzugeben. 98 00:07:45,160 --> 00:07:49,870 Es gibt eine Standardklasse, die alle Bildschirmgrößen abzielt, 99 00:07:49,870 --> 00:07:53,210 beginnend von extra klein bis extra groß. 100 00:07:53,210 --> 00:07:59,205 So 101 00:07:59,205 --> 00:08:02,884 ist der gesamte Bereich der Bildschirmbreiten in Bootstrap Begriffen, unterteilt in extra kleine, kleine 102 00:08:02,884 --> 00:08:07,405 , mittlere, große und extra große Bildschirmgrößen. 103 00:08:07,405 --> 00:08:11,180 Dann schauen Sie sich an, wie diese verschiedenen Klassen 104 00:08:11,180 --> 00:08:16,350 von Bildschirmgrößen detailliert in einer der späteren Folien bestimmt werden. 105 00:08:16,350 --> 00:08:18,540 In Ihrem Code 106 00:08:18,540 --> 00:08:22,830 werden Sie also die Layoutspezifikation identifizieren, 107 00:08:22,830 --> 00:08:29,060 indem Sie sm für die kleine Bildschirmgröße, 108 00:08:29,060 --> 00:08:32,195 md für medium, lg für groß 109 00:08:32,195 --> 00:08:35,905 und xl für extra große Bildschirmgrößen angeben. 110 00:08:35,905 --> 00:08:37,400 Also, wenn Sie das Layout machen, 111 00:08:37,400 --> 00:08:40,345 wie wir in der vorherigen Folie gesehen haben, 112 00:08:40,345 --> 00:08:45,405 ist jede Zeile in einem Bootstrap-Gittersystem in 12 Spalten unterteilt. 113 00:08:45,405 --> 00:08:50,905 Jetzt werden wir Layout Inhalt mit dem, was als die Spaltenklassen genannt wird. 114 00:08:50,905 --> 00:08:52,450 Für die Spaltenklassen 115 00:08:52,450 --> 00:08:59,162 können wir angeben, wie das Layout für verschiedene Bildschirmbreiten ausgeführt wird. 116 00:08:59,162 --> 00:09:04,735 Sehen Sie sich die Details dazu später in den nachfolgenden Folien an. 117 00:09:04,735 --> 00:09:11,020 Aber lassen Sie mich schnell darauf aufmerksam machen, wie wir die Spaltengrößen angeben. 118 00:09:11,020 --> 00:09:13,655 Sie können die Spaltengrößen als col angeben, 119 00:09:13,655 --> 00:09:19,485 was eine der Klassen ist, die sie col-sm für 120 00:09:19,485 --> 00:09:25,360 small und col-md für mittel und groß und extra groß und so weiter sagen werden. 121 00:09:25,360 --> 00:09:29,810 Nun werden diese Spaltenklassen verwendet, um 122 00:09:29,810 --> 00:09:38,260 genau anzugeben, wie viele Spalten in einer Zeile jeder Inhalt belegen wird. 123 00:09:38,260 --> 00:09:40,015 Wie funktioniert das? 124 00:09:40,015 --> 00:09:42,215 Das sehen wir auf der nächsten Folie. 125 00:09:42,215 --> 00:09:45,565 Also, wenn wir zurück zu unserem Bootstrap Grid gehen, 126 00:09:45,565 --> 00:09:50,345 nehmen wir an, wir haben ein Stück Inhalt und wir wollen die Ruhe der Inhalte. 127 00:09:50,345 --> 00:09:54,915 Wir können angeben, dass dieser Inhalt in einem anderen div eingeschlossen ist, 128 00:09:54,915 --> 00:09:57,815 auf das wir Spaltenklasse anwenden, 129 00:09:57,815 --> 00:10:00,390 wie zum Beispiel col-sm-5. 130 00:10:00,390 --> 00:10:08,560 Also, in diesem Fall, was wir spezifizieren, ist, dass für kleine bis extra große Bildschirmgrößen, 131 00:10:08,560 --> 00:10:15,890 dieser Teil des Inhalts fünf Spalten aus diesen 12 Spalten besetzen wird. 132 00:10:15,890 --> 00:10:17,505 Jetzt wirst du mich sofort fragen, 133 00:10:17,505 --> 00:10:19,835 was ist mit dem zusätzlichen Smocking? 134 00:10:19,835 --> 00:10:23,465 Wenn es nicht explizit für die extra intelligente Lockette 135 00:10:23,465 --> 00:10:31,575 durch die gesamte Breite der 12 Spalten angegeben 136 00:10:31,575 --> 00:10:38,135 wird, können sie explizit angeben, aus welchem Bereich das Spaltenlayout wie viele Spalten belegen soll. 137 00:10:38,135 --> 00:10:39,890 Also, in diesem speziellen Fall, 138 00:10:39,890 --> 00:10:42,470 wenn ich spezifiziere, nenne ich sie nur sm-5, 139 00:10:42,470 --> 00:10:48,295 was ich meine, ist, dass dieser bestimmte Inhalt, der in diesen div eingeschlossen ist, 140 00:10:48,295 --> 00:10:52,375 fünf Spalten für alle Bildschirmgrößen einnehmen wird, 141 00:10:52,375 --> 00:10:56,595 von klein bis extra groß. 142 00:10:56,595 --> 00:11:00,595 Jetzt sehen wir, dass 143 00:11:00,595 --> 00:11:02,515 wir von den 12 Spalten bereits fünf Spalten besetzt haben. 144 00:11:02,515 --> 00:11:05,070 Es sind noch sieben weitere Spalten übrig. 145 00:11:05,070 --> 00:11:09,925 Ich könnte ein anderes Stück Inhalt nehmen und es dann rechts davon positionieren, 146 00:11:09,925 --> 00:11:14,085 indem ich ein anderes div verteidige und dann Spalte sm-7 anwende. 147 00:11:14,085 --> 00:11:15,855 Nun, in diesem Fall 148 00:11:15,855 --> 00:11:18,065 sehen Sie, dass 5 plus 7 gleich 12 ist. 149 00:11:18,065 --> 00:11:22,900 Also, diese zwei Teile von Inhalten, die in den beiden divs eingeschlossen sind, 150 00:11:22,900 --> 00:11:25,530 werden jetzt nebeneinander positioniert, 151 00:11:25,530 --> 00:11:30,070 und die Summe von ihnen nimmt die gesamte 12 Spaltenbreite ein. 152 00:11:30,070 --> 00:11:35,765 So können wir angeben und die Arbeit mit den 12 Spalten 153 00:11:35,765 --> 00:11:42,630 bei der Definition des Layouts der aktuellen Ebene. 154 00:11:42,630 --> 00:11:46,960 Mit der Verwendung des CSS-Flexbox-Layouts 155 00:11:46,960 --> 00:11:51,660 unterstützt Bootstrap auch die sogenannten Auto-Layout-Spalten. 156 00:11:51,660 --> 00:11:52,905 Also, in diesem Fall 157 00:11:52,905 --> 00:11:55,380 kann ich einfach 158 00:11:55,380 --> 00:12:00,060 Spalte sm angeben, ohne anzugeben, wie viele Spalten es besetzen soll. 159 00:12:00,060 --> 00:12:07,570 Aber falls ich drei Doobs Breite Spalte sm in meinem Saum 5 spezifiziere, 160 00:12:07,570 --> 00:12:13,575 dann wird das Bootstrap-Gitter diese Inhalte automatisch in diesen divs positionieren 161 00:12:13,575 --> 00:12:14,905 , 162 00:12:14,905 --> 00:12:18,875 nebeneinander, so dass jeder von ihnen ein Drittel der Gesamtbreite erhält. 163 00:12:18,875 --> 00:12:22,220 Da wir hier 12 Spalten haben, 164 00:12:22,220 --> 00:12:26,045 erhält jede dieser drei vier Spalten. 165 00:12:26,045 --> 00:12:32,525 Und dies wird automatisch durch den Bootstraps Layout-Mechanismus erledigt. 166 00:12:32,525 --> 00:12:35,550 Jetzt können wir explizit 167 00:12:35,550 --> 00:12:40,375 die Anzahl der Spalten angeben, die ein bestimmtes Stück Inhalt besetzen. 168 00:12:40,375 --> 00:12:45,625 Angenommen, ich gebe drei Spaltenklassen an, 169 00:12:45,625 --> 00:12:49,565 aber die mittlere gebe ich Spalte sm 6. 170 00:12:49,565 --> 00:12:52,615 Was passiert, ist, wenn Bootstrap das Layout ausführt, 171 00:12:52,615 --> 00:12:55,760 wird die mittlere sechs Spalten besetzen, 172 00:12:55,760 --> 00:13:01,885 und dann werden die linken und die rechten Teile des Inhalts besetzen, was ausgelassen wird. 173 00:13:01,885 --> 00:13:04,785 Also, von den 12 Spalten, die wir haben, 174 00:13:04,785 --> 00:13:08,630 wenn 6 Spalten, die durch das mittlere Stück des Inhalts besetzt, 175 00:13:08,630 --> 00:13:12,855 dann haben wir mit uns verlassen 6 weitere Spalten und das wird gleichmäßig 176 00:13:12,855 --> 00:13:17,965 zwischen dem Inhalt und den beiden Seiten dieser mittleren Spalte aufgeteilt werden. 177 00:13:17,965 --> 00:13:23,585 Also, jeder von ihnen erhält freie Spalten von Speicherplatz jeder. 178 00:13:23,585 --> 00:13:27,730 So wird das Layout automatisch mit Bootstrap gemacht. 179 00:13:27,730 --> 00:13:34,110 In der Übung werden wir verschiedene Kombinationen der Verwendung dieser Art 180 00:13:34,110 --> 00:13:43,680 von Spezifikationen sehen, wie viele Spalten jedes Stück Inhalt im Farblayout einnehmen wird. 181 00:13:43,680 --> 00:13:49,135 Diese Tabelle fasst zusammen, wie Bootstrap 182 00:13:49,135 --> 00:13:54,860 die verschiedenen Bildschirmraster behandelt und wie Sie diese Bildschirmraster identifizieren. 183 00:13:54,860 --> 00:13:57,095 Wie ich bereits angegeben habe, 184 00:13:57,095 --> 00:14:04,580 teilt Bootstrap den gesamten Bildschirmbreitenbereich in 5 Klassen auf. 185 00:14:04,580 --> 00:14:12,890 Die extra kleinen Bildschirme sind diejenigen, deren Gitter unter 776 Pixel liegen. 186 00:14:12,890 --> 00:14:22,090 Kleine Bildschirme sind solche, die zwischen 576 und unter 768 Pixeln liegen. 187 00:14:22,090 --> 00:14:25,600 Mittlere Bildschirme von 768 bis 992, 188 00:14:25,600 --> 00:14:31,380 groß von 992 bis 1200 und alles etwa 1200 Pixel Breite 189 00:14:31,380 --> 00:14:34,685 wird als ein extra großer Bildschirm behandelt. 190 00:14:34,685 --> 00:14:39,390 So wird das Standard-Bootstrap Grid konfiguriert. 191 00:14:39,390 --> 00:14:43,570 Sobald Sie sich jetzt mit Bootstrap vertraut gemacht 192 00:14:43,570 --> 00:14:48,595 haben, können Sie diese Divisionen auch selbst konfigurieren. 193 00:14:48,595 --> 00:14:50,770 Aber für diesen Kurs 194 00:14:50,770 --> 00:14:56,210 bleiben wir bei der Standardkonfiguration, die Bootstrap unterstützt. 195 00:14:56,210 --> 00:14:59,195 Nun, das Rasterverhalten in diesem Fall 196 00:14:59,195 --> 00:15:01,825 ist, dass alles, was für extra klein ausgelegt ist, 197 00:15:01,825 --> 00:15:04,885 zu jeder Zeit horizontal ist, 198 00:15:04,885 --> 00:15:09,235 für die höheren Bits werden sie auf 2Startbreite reduziert, 199 00:15:09,235 --> 00:15:13,040 aber horizontal um die Bruchpunkte. 200 00:15:13,040 --> 00:15:17,855 Wir werden sehen, wie das in kurzer Zeit mit einigen Beispielen funktioniert. 201 00:15:17,855 --> 00:15:24,980 Jetzt haben wir die Verwendung des Containers in der vorherigen Folie gesehen. 202 00:15:24,980 --> 00:15:28,545 Bei extra kleinen Bildschirmen 203 00:15:28,545 --> 00:15:32,895 wird die Containerbreite automatisch durch die Bildschirmbreite bestimmt. 204 00:15:32,895 --> 00:15:34,575 Aber für klein, mittel, 205 00:15:34,575 --> 00:15:36,045 groß und extra groß 206 00:15:36,045 --> 00:15:39,425 ist die Containerbreite wie angegeben. 207 00:15:39,425 --> 00:15:42,600 Also, wenn Sie das div mit einem Klassencontainer verwenden, 208 00:15:42,600 --> 00:15:46,105 dann sind es für kleine Bildschirme 540 Pixel. 209 00:15:46,105 --> 00:15:52,330 Also, Sie werden feststellen, dass, wenn Sie eine Bildschirmbreite zwischen 576 und 768 haben, 210 00:15:52,330 --> 00:15:56,485 Ihr Inhalt wird in 540 Pixel ausgelegt, 211 00:15:56,485 --> 00:16:00,670 wird in der Bildschirmbreite zentriert. 212 00:16:00,670 --> 00:16:08,435 Der übrige Platz wird also als Ränder auf beiden Seiten dieses Inhalts belassen. 213 00:16:08,435 --> 00:16:12,795 In ähnlicher Weise ist es für mittlere 720 Pixel und so weiter. 214 00:16:12,795 --> 00:16:17,640 Nun geben Sie an, wie viele Spalten jeder Inhalt belegt. 215 00:16:17,640 --> 00:16:20,885 Dann sind die Spaltenklassenpräfixe, die Sie verwenden werden, 216 00:16:20,885 --> 00:16:26,670 .col für extra kleine, .col-sm für kleine, 217 00:16:26,670 --> 00:16:29,420 bis zu extra groß. 218 00:16:29,420 --> 00:16:31,625 Wenn Sie etwas mit.col-md angeben, 219 00:16:31,625 --> 00:16:36,530 gilt dies für mittlere bis extragroße Bildschirme. 220 00:16:36,530 --> 00:16:41,785 Also, wenn Sie eine Col- und einige Zahlen angeben, 221 00:16:41,785 --> 00:16:47,895 dann gilt das für diese bestimmte Bildschirmgröße und alles über diese Bildschirmgröße. 222 00:16:47,895 --> 00:16:51,035 Jetzt ist in allen Fällen der Bildschirmgröße 223 00:16:51,035 --> 00:16:54,955 die Anzahl der Spalten auf 12 Spalten definiert. 224 00:16:54,955 --> 00:17:02,345 Das Raster im Falle von Bootstrap ist auf 12 Spalten ausgelegt und das ist konfigurierbar, 225 00:17:02,345 --> 00:17:04,830 aber der Standardwert ist 12 Spalten. 226 00:17:04,830 --> 00:17:10,355 Der Grund für die Wahl von 12 ist, dass 12 ein gutes Vielfaches von zwei, drei, 227 00:17:10,355 --> 00:17:11,755 vier und so weiter ist. 228 00:17:11,755 --> 00:17:14,965 Es gibt Ihnen also viel Flexibilität in Bezug auf die 229 00:17:14,965 --> 00:17:19,065 Anzahl der Spalten, die Sie für das Layout Ihrer Inhalte auswählen. 230 00:17:19,065 --> 00:17:22,345 Zwischen jeder Spalte, also wenn 231 00:17:22,345 --> 00:17:25,510 Sie zwei Teile des Inhalts nebeneinander mit ihren divs anlegen, 232 00:17:25,510 --> 00:17:31,035 werden sie zwischen diesen beiden Inhaltsstücken eine kleine Rinne sein, die übrig bleibt. 233 00:17:31,035 --> 00:17:37,255 Leerer Leerraum, bei dem die Breite der Rinnenbreite ausgeblendet 234 00:17:37,255 --> 00:17:41,030 wird, die standardmäßig nur 30 Pixel beträgt. 235 00:17:41,030 --> 00:17:45,855 Also, 15 Pixel sind von einem Stück Inhalt und 15 Pixel von anderen Stück Inhalt. 236 00:17:45,855 --> 00:17:48,600 SumTotal zusammen 30 Pixel 237 00:17:48,600 --> 00:17:53,470 Leerraum werden zwischen den beiden Teilen des Inhalts gelassen werden. 238 00:17:53,470 --> 00:17:57,465 Denken Sie darüber nach, wie ein Zeitungsspaltenlayout 239 00:17:57,465 --> 00:18:01,530 ausgeführt wird, und Sie beginnen zu sehen, wie die Korrespondenz zwischen 240 00:18:01,530 --> 00:18:04,970 dem Layout der Zeitungsspalte erfolgt und wie 241 00:18:04,970 --> 00:18:10,815 das Bootstrap-Raster das Layout des Inhalts auf dieser Tonhöhe ausführt. 242 00:18:10,815 --> 00:18:14,725 Bootastrap Raster ermöglicht es Ihnen, Inhalte auf nächster Ebene zu machen, 243 00:18:14,725 --> 00:18:20,710 so dass Sie Inhalte in Inhalte einschließen und dann verschachtelte Inhalte Layout erstellen können. 244 00:18:20,710 --> 00:18:23,790 Außerdem unterstützt es Offsets. 245 00:18:23,790 --> 00:18:28,712 Wir werden die Verwendung von Offsets auch in einigen Beispielen später sehen. 246 00:18:28,712 --> 00:18:36,555 Schauen wir uns also unser erstes Beispiel an, wie Sie Bootstraps-Spaltenklassen anwenden 247 00:18:36,555 --> 00:18:41,515 würden und wie sie tatsächlich auf verschiedenen Bildschirmgrößen gerendert werden würden. 248 00:18:41,515 --> 00:18:47,310 Hier ist ein Beispiel für eine Situation, in der ich auf die beiden divs angewendet, 249 00:18:47,310 --> 00:18:53,510 Spalte Bindestrich 12 und dann Spalte Bindestrich sm Bindestrich fünf für 250 00:18:53,510 --> 00:18:56,050 das rote Stück Inhalt und für 251 00:18:56,050 --> 00:19:00,980 das andere habe ich Spaltenstrich 12 und Spalte sm sieben angewendet. 252 00:19:00,980 --> 00:19:06,045 Die Art und Weise, wie dieser Inhalt angelegt wird, ist für extra kleine Bildschirme, 253 00:19:06,045 --> 00:19:10,690 die zwei Teile des Inhalts werden übereinander gestapelt. 254 00:19:10,690 --> 00:19:15,450 So wird der rote auf dem meeregrün gefärbten gestapelt. 255 00:19:15,450 --> 00:19:19,010 Aber für kleine bis extra große Bildschirme 256 00:19:19,010 --> 00:19:22,310 werden die beiden Inhalte nebeneinander angelegt. 257 00:19:22,310 --> 00:19:27,490 Der Grund dafür ist, weil wir Säule sm fünf und Spalte sm sieben für die beiden gesagt. 258 00:19:27,490 --> 00:19:31,510 Also für kleine bis extra große sind sie nebeneinander angelegt 259 00:19:31,510 --> 00:19:36,210 , so dass der rote Inhalt die ganz links 260 00:19:36,210 --> 00:19:45,945 fünf Spalten besetzt und der Meergrün-Inhalt die rechten sieben Spalten Ihrer Reihe einnimmt, 261 00:19:45,945 --> 00:19:50,440 von kleinen bis extra großen Bildschirmgrößen. 262 00:19:50,440 --> 00:19:55,605 So würden wir das Inhaltslayout für verschiedene Bildschirmgrößen angeben. 263 00:19:55,605 --> 00:20:00,220 Bootstrap bietet auch zusätzliche Klassen, 264 00:20:00,220 --> 00:20:07,055 die als Ordnungs-/Bindestrichen-Klassen bezeichnet werden, mit denen Sie den Inhalt auf dem Bildschirm neu anordnen können. 265 00:20:07,055 --> 00:20:11,440 Also zum Beispiel, wenn Sie eine Bestellung sm zuerst anwenden, 266 00:20:11,440 --> 00:20:15,200 eine Bestellung einige letzte Klasse zu den divs, 267 00:20:15,200 --> 00:20:19,265 wie im Beispiel hier gezeigt wird, in diesem Fall 268 00:20:19,265 --> 00:20:26,160 wird das div, für das Sie die Bestellung sm zuletzt anwenden, auf 269 00:20:26,160 --> 00:20:29,390 die rechte Seite des Bildschirms 270 00:20:29,390 --> 00:20:33,125 geschoben werden und Ordnung sm erste div wird auf die linke Seite des -Bildschirm. 271 00:20:33,125 --> 00:20:38,570 Wenn Sie diese Sortierklassen anwenden, können Sie den Inhalt des Skripts neu anordnen. 272 00:20:38,570 --> 00:20:45,000 Nicht nur dies, die Reihenfolge sm ermöglicht es Ihnen auch, die gleiche Reihenfolge sm ein zu 273 00:20:45,000 --> 00:20:51,750 bestellen sm 12 angeben, um die Reihenfolge anzugeben, in der der Inhalt auf dem Bildschirm gerendert werden muss. Wenn Sie 274 00:20:51,750 --> 00:20:53,850 also eine größere Zahl verwenden, 275 00:20:53,850 --> 00:20:57,395 können Sie den Inhalt auf die rechte Seite 276 00:20:57,395 --> 00:21:01,795 der Zeile verschieben und eine kleinere Zahl verschiebt den Inhalt auf die linke Seite der Zeile. 277 00:21:01,795 --> 00:21:05,785 Ein Beispiel dafür werden wir auch in der Übung sehen. 278 00:21:05,785 --> 00:21:10,850 Die gemischte interessante Unterstützung, die Bootstrap Grid mit der Verwendung 279 00:21:10,850 --> 00:21:16,195 des Flexbox-Layouts bringt, ist die vertikale Ausrichtung des Inhalts. 280 00:21:16,195 --> 00:21:19,530 Die früheren Bootstrap-Versionen, 281 00:21:19,530 --> 00:21:22,315 wie Bootstrap 3 und früher, 282 00:21:22,315 --> 00:21:27,915 hatten nicht die Möglichkeit, Inhalte vertikal auszurichten. 283 00:21:27,915 --> 00:21:34,870 Durch die Verwendung der Flexbox für die Gestaltung des Bootstrap Grids in Bootstrap vier 284 00:21:34,870 --> 00:21:41,365 erhalten wir die Flexibilität, die CSS Flexbox in Bezug auf die vertikale Ausrichtung bringt. 285 00:21:41,365 --> 00:21:46,295 Wenn Sie also möchten, dass der Inhalt vertikal zentriert ist, 286 00:21:46,295 --> 00:21:48,370 dann 287 00:21:48,370 --> 00:21:52,765 würden Sie auf die Zeile die Klasse „Align-Elemente Center“ anwenden. 288 00:21:52,765 --> 00:21:55,585 In diesem Fall 289 00:21:55,585 --> 00:22:00,750 wird also unabhängig von dem Inhalt, der angelegt ist, innerhalb dieser bestimmten Zeile vertikal ausgerichtet. 290 00:22:00,750 --> 00:22:03,560 Der Inhalt, der 291 00:22:03,560 --> 00:22:08,780 die größte Höhe einnimmt, wird also derjenige sein, an dem die verbleibenden 292 00:22:08,780 --> 00:22:16,905 ausgerichtet werden, wenn er in dieser Zeile angeordnet ist, oder wenn Sie die Höhe der Zeile vorher angeben, 293 00:22:16,905 --> 00:22:24,935 wird der gesamte Inhalt vertikal innerhalb dieser bestimmten Zeile zentriert. 294 00:22:24,935 --> 00:22:30,795 Nicht nur das, Bootstrap's Grid unterstützt auch die horizontale Ausrichtung von Inhalten. 295 00:22:30,795 --> 00:22:32,400 Schauen wir uns ein Beispiel an. 296 00:22:32,400 --> 00:22:35,060 Also, wenn Sie Ihren Inhalt so angeben. 297 00:22:35,060 --> 00:22:40,320 Sagen Sie, Sie haben drei Spalten und die erste, die Sie div Klasse Spalte drei angeben, 298 00:22:40,320 --> 00:22:44,140 dann die mittlere Sie sagen div Klasse Spalte auto. 299 00:22:44,140 --> 00:22:47,010 Ich werde in kurzer Zeit zu dieser Spalte Auto zurückkommen. 300 00:22:47,010 --> 00:22:50,045 Und der rechte sagt div Klasse Spalte 3. 301 00:22:50,045 --> 00:22:53,065 In diesem Fall geben wir an, dass der linke und 302 00:22:53,065 --> 00:22:58,540 der rechte Inhalt jeweils drei Spalten besetzen wird. 303 00:22:58,540 --> 00:23:02,120 Die mittlere, wenn ich sage, „Spalte auto“, 304 00:23:02,120 --> 00:23:07,200 bedeutet dies, dass die Anzahl der Spalten, die dieses spezielle div 305 00:23:07,200 --> 00:23:14,090 belegt, automatisch durch den Inhalt bestimmt wird, der darin eingeschlossen ist. 306 00:23:14,090 --> 00:23:16,840 Basierend auf dem Inhalt passt 307 00:23:16,840 --> 00:23:21,710 sich die Anzahl der Spalten, die vom div belegt sind, automatisch an. 308 00:23:21,710 --> 00:23:25,070 In diesem speziellen Fall 309 00:23:25,070 --> 00:23:31,040 wird in diesem Layout dieser Inhalt in vier Spalten untergebracht. 310 00:23:31,040 --> 00:23:34,985 Jetzt haben Sie vier Spalten, die vom mittleren div verwendet werden, 311 00:23:34,985 --> 00:23:38,020 drei Spalten links und drei Spalten rechts. 312 00:23:38,020 --> 00:23:40,650 Also Summe Summe, Sie haben 10 Spalten. 313 00:23:40,650 --> 00:23:43,730 Sie haben also zwei Spalten, die leer bleiben. 314 00:23:43,730 --> 00:23:46,070 Wenn Sie nun für die Zeile angeben, 315 00:23:46,070 --> 00:23:50,165 geben Sie Ausrichtungsinhaltscenter an, dann 316 00:23:50,165 --> 00:23:54,570 wird der gesamte Inhalt in dieser bestimmten Zeile in 317 00:23:54,570 --> 00:23:59,365 Bezug auf die horizontale Zeile zentriert. 318 00:23:59,365 --> 00:24:02,080 Sie können auch den Inhalt linksbündig, 319 00:24:02,080 --> 00:24:05,584 rechtsbündig und ein paar andere Optionen haben. 320 00:24:05,584 --> 00:24:09,260 Details finden Sie in der Bootstraps-Dokumentation. Mit 321 00:24:09,260 --> 00:24:13,755 Bootstrap können Sie auch Spaltenoffsets durchführen. 322 00:24:13,755 --> 00:24:16,725 Wie funktioniert das? Schauen wir uns ein Beispiel an. 323 00:24:16,725 --> 00:24:18,710 In dieser Spalte Offset, 324 00:24:18,710 --> 00:24:21,320 können wir ein Stück Inhalt angeben, 325 00:24:21,320 --> 00:24:27,750 hinzufügen, dass, wenn wir die Klasse als Offset Bindestrich sm Bindestrich eins anwenden. 326 00:24:27,750 --> 00:24:33,585 Was wir spezifizieren, ist für kleine bis extra große Bildschirme 327 00:24:33,585 --> 00:24:38,425 , dieser Inhalt sollte um eine Spalte nach rechts verschoben werden. 328 00:24:38,425 --> 00:24:41,970 Wenn dieser Inhalt angelegt ist, wie Sie sehen können, 329 00:24:41,970 --> 00:24:49,560 wird die ganz links eine Spalte leer gelassen und der Inhalt wird um eine Spalte nach rechts verschoben. 330 00:24:49,560 --> 00:24:52,925 Und Sie können den verbleibenden Inhalt auf der rechten Seite anordnen. 331 00:24:52,925 --> 00:24:55,860 Also Summe, Sie können sehen, dass die beiden divs 332 00:24:55,860 --> 00:24:59,670 11 Spalten belegen, aber eine Spalte nach rechts versetzt. 333 00:24:59,670 --> 00:25:05,910 So können wir das Layout des Inhalts mit einem Spaltenversatz steuern. 334 00:25:05,910 --> 00:25:07,380 Wie Sie sehen können, können 335 00:25:18,635 --> 00:25:23,925 wir mit den Spaltengrößenspezifikationen, der vertikalen und horizontalen Ausrichtung, dem Offset, dem Push und dem Pull und dem Flex zuerst und dem Flex-Last eine Menge Kontrolle darüber bekommen, wie wir 336 00:25:23,925 --> 00:25:29,825 Inhalte für verschiedene Bildschirmbreiten und verschiedene Bildschirmgrößen anlegen . 337 00:25:29,825 --> 00:25:36,800 Bootstrap geht noch weiter, indem es Ihnen erlaubt, Inhalte in divs zu verschachteln. 338 00:25:36,800 --> 00:25:39,585 Wenn Sie zum Beispiel zwei divs angeben, 339 00:25:39,585 --> 00:25:43,130 wie Sie mit Spalte sm fünf und Spalte sm sieben sehen, 340 00:25:43,130 --> 00:25:45,725 werden die beiden Inhalte wie hier gesehen angelegt. 341 00:25:45,725 --> 00:25:48,265 Jetzt, innerhalb des rechten div, 342 00:25:48,265 --> 00:25:50,630 kann ich wieder hineingehen und 343 00:25:50,630 --> 00:25:58,080 die Breite dieses divs in eine Zeile teilen und dann gibt mir diese Zeile automatisch 344 00:25:58,080 --> 00:26:04,960 weitere 12 Spalten für diesen Teil des Bildschirms und dann kann ich das Layout mit 345 00:26:04,960 --> 00:26:13,330 Verschachtelung der divs machen und das Layout für verschiedene Teile dieser Spalte ausführen . Wenn Sie 346 00:26:13,330 --> 00:26:15,595 also so verschachteln, 347 00:26:15,595 --> 00:26:23,570 erhalten Sie noch mehr Flexibilität in der Art und Weise, wie Sie Inhalte in Ihrem Spielfeld anlegen. 348 00:26:23,570 --> 00:26:27,910 Mit all der Diskussion über das Bootstrap Grid System und wie 349 00:26:27,910 --> 00:26:34,280 das Bootstrap Grid verschiedene Möglichkeiten zur Gestaltung von Inhalten unterstützt 350 00:26:34,280 --> 00:26:39,670 , gehen wir jetzt zu unseren nächsten Übungen. 351 00:26:39,670 --> 00:26:45,820 Wir werden das Bootstrap-Raster auf unsere index.html Seite anwenden, 352 00:26:45,820 --> 00:26:52,770 um das Layout des Inhalts innerhalb oder index.html Seite zu tun. 353 00:26:52,770 --> 00:26:57,350 Wir werden auch einige benutzerdefinierte CSS-Klassen verwenden.