1 00:00:03,250 --> 00:00:07,080 Keine Selbstachtung Webseiten-Designer, 2 00:00:07,080 --> 00:00:10,990 würde heute Web-Seiten entwerfen, ohne 3 00:00:10,990 --> 00:00:15,665 irgendeine Form von Bildern oder Medien auf ihren Websites. 4 00:00:15,665 --> 00:00:19,055 Informatik-Professoren sind eine Ausnahme. 5 00:00:19,055 --> 00:00:23,390 In diesem Stadium erwarten Sie wahrscheinlich, 6 00:00:23,390 --> 00:00:26,270 dass ich das sage, aber das werde ich nicht sagen. 7 00:00:26,270 --> 00:00:29,255 Ich werde sagen, dass 8 00:00:29,255 --> 00:00:33,425 „Ein Bild ist $12 wert auf iStockphoto.com. 9 00:00:33,425 --> 00:00:38,060 Bootstrap bietet umfangreiche Unterstützung für die Aufnahme von 10 00:00:38,060 --> 00:00:42,800 Bildern und verschiedenen Arten von Medien in Ihre Websites und Ihre Webseiten. 11 00:00:42,800 --> 00:00:49,040 Das Bild HTML-Tag wird offensichtlich für die Aufnahme von Bildern in Ihre Webseiten verwendet werden. 12 00:00:49,040 --> 00:00:55,170 Bootstrap bietet auch eine Reihe von Klassen, die Sie auf das 13 00:00:55,170 --> 00:01:02,215 Image-Tag anwenden können, um die Art und Weise, wie Bilder in Ihrer Webseite enthalten sind, weiter zu verbessern. 14 00:01:02,215 --> 00:01:08,535 So könnten Sie eine Bildklasse namens img-fluid verwenden, die Ihre Bilder reaktionsschnell macht, 15 00:01:08,535 --> 00:01:15,195 was bedeutet, dass die Größe des Bildes automatisch an verschiedene Bildschirmgrößen angepasst wird. 16 00:01:15,195 --> 00:01:22,585 Sie können auch ein img-thumbnail verwenden, das einen weißen Rahmen um Ihr Bild legt. 17 00:01:22,585 --> 00:01:29,480 Sie können auch mit den Formen und Größen von Bildern umgehen, wie Sie 18 00:01:29,480 --> 00:01:36,635 in diesem Bild sehen, so dass Sie Bilder haben können, für die Sie abgerundete Ecken erstellen, 19 00:01:36,635 --> 00:01:38,995 entweder alle vier Ecken 20 00:01:38,995 --> 00:01:42,020 oder ein beliebiges Paar von Ecken. 21 00:01:42,020 --> 00:01:45,595 So können Sie die Klasse um sie herum anwenden, um 22 00:01:45,595 --> 00:01:49,450 ein Bild mit abgerundeten Ecken zu erstellen, oder Sie können 23 00:01:49,450 --> 00:01:53,130 einen abgerundeten Bindestrich oben links oder rechts sehen, um 24 00:01:53,130 --> 00:01:57,905 die abgerundeten Ecken in einer dieser vier Kanten Ihres Bildes zu platzieren. 25 00:01:57,905 --> 00:02:02,780 Sie können auch einen gerundeten Kreis anwenden, um kreisförmige Bilder zu erstellen. 26 00:02:02,780 --> 00:02:05,170 Wenn Sie also Websites besuchen, 27 00:02:05,170 --> 00:02:10,310 würden Sie sehen, dass Bilder bereits auf viele dieser Arten verwendet werden. 28 00:02:10,310 --> 00:02:16,000 Sie werden sich daran erinnern, dass wir die Kartenklasse in der vorherigen Lektion und in der Übung gesehen haben. 29 00:02:16,000 --> 00:02:21,085 Hier illustriere ich die Verwendung der Karte Klasse mit einem Bild enthalten. 30 00:02:21,085 --> 00:02:27,320 Also in diesem Fall, wir fügen ein Bild mit der Klasse Karte Bild oben und wenn Sie 31 00:02:27,320 --> 00:02:30,760 groß genug Größe das Bild, das Bild wird 32 00:02:30,760 --> 00:02:35,030 oben enthalten und dann in eine Karte wie diese eingeschlossen. 33 00:02:35,030 --> 00:02:36,860 Wenn das Bild zu klein ist, 34 00:02:36,860 --> 00:02:41,245 kann es an einer Ecke in Ihrer Karte positioniert werden. 35 00:02:41,245 --> 00:02:47,315 Verwenden Sie also ein ausreichend großes Bild, um eine saubere Karte wie diese definieren zu können. 36 00:02:47,315 --> 00:02:52,030 Hier sehen Sie also das Bild, das mit beschrieben wird, 37 00:02:52,030 --> 00:02:56,035 die Klassen, die darauf angewendet werden, einschließlich Kartenbild oben 38 00:02:56,035 --> 00:03:00,510 und img-fluid, um das Bild automatisch reaktionsschnell zu machen. 39 00:03:00,510 --> 00:03:04,470 So können Sie die Bilder mit der Kartenklasse verwenden, um 40 00:03:04,470 --> 00:03:08,525 Karten zu definieren, die Sie auf Ihren Webseiten verwenden. 41 00:03:08,525 --> 00:03:16,605 Eine andere Möglichkeit, Bilder und verwandte Inhalte in Ihre Webseiten aufzunehmen, ist ein Medienobjekt. Mit 42 00:03:16,605 --> 00:03:20,740 einem Medienobjekt können Sie ein Bild angeben, das Sie 43 00:03:20,740 --> 00:03:26,225 entweder links oder rechts neben der Beschreibung positionieren können. 44 00:03:26,225 --> 00:03:29,690 Außerdem können Sie einen Medienkörper einschließen, 45 00:03:29,690 --> 00:03:32,880 der die Beschreibung enthält, die mit dem Bild zusammenhängt. 46 00:03:32,880 --> 00:03:35,110 Wie Sie in diesem Beispiel sehen, 47 00:03:35,110 --> 00:03:41,270 schließt der Medienkörper selbst alle HTML-formatierten Inhalte hier ein. 48 00:03:41,270 --> 00:03:44,820 Also hier verwende ich eine h2 und h4 zusammen mit 49 00:03:44,820 --> 00:03:49,755 einer p-Klasse innerhalb des Medienkörpers, um den tatsächlichen Inhalt zu definieren. 50 00:03:49,755 --> 00:03:54,240 Wir werden das Medienobjekt in der folgenden Übung verwenden. 51 00:03:54,240 --> 00:03:57,670 Sie können auch eine Responsive Einbettung von Inhalten durchführen. 52 00:03:57,670 --> 00:04:03,360 Wenn Sie beispielsweise ein Video haben, das Sie in Ihrer Webseite einschließen möchten, 53 00:04:03,360 --> 00:04:07,690 können Sie eine iframe-Klasse verwenden, um das Video zu rahmen 54 00:04:07,690 --> 00:04:10,760 und es dann in das div mit den Klassen einschließen, die 55 00:04:10,760 --> 00:04:16,410 responsive geben Größen eingebettet sind, so dass Sie 16by9, 56 00:04:16,410 --> 00:04:21,020 4by3 oder Video, Inhalt angezeigt werden kann. 57 00:04:21,020 --> 00:04:27,630 So responsive embedded, können Sie die embedded oder iframe 58 00:04:27,630 --> 00:04:34,450 oder video oder object HTML-Tags verwenden und dann in ein div einschließen. 59 00:04:34,450 --> 00:04:41,345 Anwenden der eingebetteten Responsive und auch zusammen mit dem eingebetteten Responsive, 60 00:04:41,345 --> 00:04:47,295 Angabe der Dimensionen, die Sie für 4by3 oder 16by9 Dimensionen verwenden möchten. 61 00:04:47,295 --> 00:04:53,685 So können Sie auch Videoinhalte in Ihre Webseiten einschließen. 62 00:04:53,685 --> 00:04:57,570 Nun, da wir die Unterstützung für Bilder und Medien gesehen haben, 63 00:04:57,570 --> 00:05:02,230 ist es an der Zeit, auf eine Übung zu gehen, in der wir schauen, wie wir 64 00:05:02,230 --> 00:05:07,310 Bilder in die Webseite oder die Website, an der wir gearbeitet haben, aufnehmen können. 65 00:05:07,310 --> 00:05:11,345 Wir werden einige Änderungen an der Seite index.html vornehmen, indem 66 00:05:11,345 --> 00:05:17,200 einige Bilder und Inhalte mithilfe des Medienobjekts aufgenommen werden.