Keine Selbstachtung Webseiten-Designer,
würde heute Web-Seiten entwerfen, ohne
irgendeine Form von Bildern oder Medien auf ihren Websites.
Informatik-Professoren sind eine Ausnahme.
In diesem Stadium erwarten Sie wahrscheinlich,
dass ich das sage, aber das werde ich nicht sagen.
Ich werde sagen, dass
„Ein Bild ist $12 wert auf iStockphoto.com.
Bootstrap bietet umfangreiche Unterstützung für die Aufnahme von
Bildern und verschiedenen Arten von Medien in Ihre Websites und Ihre Webseiten.
Das Bild HTML-Tag wird offensichtlich für die Aufnahme von Bildern in Ihre Webseiten verwendet werden.
Bootstrap bietet auch eine Reihe von Klassen, die Sie auf das
Image-Tag anwenden können, um die Art und Weise, wie Bilder in Ihrer Webseite enthalten sind, weiter zu verbessern.
So könnten Sie eine Bildklasse namens img-fluid verwenden, die Ihre Bilder reaktionsschnell macht,
was bedeutet, dass die Größe des Bildes automatisch an verschiedene Bildschirmgrößen angepasst wird.
Sie können auch ein img-thumbnail verwenden, das einen weißen Rahmen um Ihr Bild legt.
Sie können auch mit den Formen und Größen von Bildern umgehen, wie Sie
in diesem Bild sehen, so dass Sie Bilder haben können, für die Sie abgerundete Ecken erstellen,
entweder alle vier Ecken
oder ein beliebiges Paar von Ecken.
So können Sie die Klasse um sie herum anwenden, um
ein Bild mit abgerundeten Ecken zu erstellen, oder Sie können
einen abgerundeten Bindestrich oben links oder rechts sehen, um
die abgerundeten Ecken in einer dieser vier Kanten Ihres Bildes zu platzieren.
Sie können auch einen gerundeten Kreis anwenden, um kreisförmige Bilder zu erstellen.
Wenn Sie also Websites besuchen,
würden Sie sehen, dass Bilder bereits auf viele dieser Arten verwendet werden.
Sie werden sich daran erinnern, dass wir die Kartenklasse in der vorherigen Lektion und in der Übung gesehen haben.
Hier illustriere ich die Verwendung der Karte Klasse mit einem Bild enthalten.
Also in diesem Fall, wir fügen ein Bild mit der Klasse Karte Bild oben und wenn Sie
groß genug Größe das Bild, das Bild wird
oben enthalten und dann in eine Karte wie diese eingeschlossen.
Wenn das Bild zu klein ist,
kann es an einer Ecke in Ihrer Karte positioniert werden.
Verwenden Sie also ein ausreichend großes Bild, um eine saubere Karte wie diese definieren zu können.
Hier sehen Sie also das Bild, das mit beschrieben wird,
die Klassen, die darauf angewendet werden, einschließlich Kartenbild oben
und img-fluid, um das Bild automatisch reaktionsschnell zu machen.
So können Sie die Bilder mit der Kartenklasse verwenden, um
Karten zu definieren, die Sie auf Ihren Webseiten verwenden.
Eine andere Möglichkeit, Bilder und verwandte Inhalte in Ihre Webseiten aufzunehmen, ist ein Medienobjekt. Mit
einem Medienobjekt können Sie ein Bild angeben, das Sie
entweder links oder rechts neben der Beschreibung positionieren können.
Außerdem können Sie einen Medienkörper einschließen,
der die Beschreibung enthält, die mit dem Bild zusammenhängt.
Wie Sie in diesem Beispiel sehen,
schließt der Medienkörper selbst alle HTML-formatierten Inhalte hier ein.
Also hier verwende ich eine h2 und h4 zusammen mit
einer p-Klasse innerhalb des Medienkörpers, um den tatsächlichen Inhalt zu definieren.
Wir werden das Medienobjekt in der folgenden Übung verwenden.
Sie können auch eine Responsive Einbettung von Inhalten durchführen.
Wenn Sie beispielsweise ein Video haben, das Sie in Ihrer Webseite einschließen möchten,
können Sie eine iframe-Klasse verwenden, um das Video zu rahmen
und es dann in das div mit den Klassen einschließen, die
responsive geben Größen eingebettet sind, so dass Sie 16by9,
4by3 oder Video, Inhalt angezeigt werden kann.
So responsive embedded, können Sie die embedded oder iframe
oder video oder object HTML-Tags verwenden und dann in ein div einschließen.
Anwenden der eingebetteten Responsive und auch zusammen mit dem eingebetteten Responsive,
Angabe der Dimensionen, die Sie für 4by3 oder 16by9 Dimensionen verwenden möchten.
So können Sie auch Videoinhalte in Ihre Webseiten einschließen.
Nun, da wir die Unterstützung für Bilder und Medien gesehen haben,
ist es an der Zeit, auf eine Übung zu gehen, in der wir schauen, wie wir
Bilder in die Webseite oder die Website, an der wir gearbeitet haben, aufnehmen können.
Wir werden einige Änderungen an der Seite index.html vornehmen, indem
einige Bilder und Inhalte mithilfe des Medienobjekts aufgenommen werden.