Bildklassen in Bootstrap 5 | Erklärt
Bildung Bilder in Bootstrap 5
Um Ihre Bilder zu stylen, indem sie ihnen etwas Form zur Verfügung stellen, sind in Bootstrap 5 mehrere Klassen verfügbar. Diese Klassen zusammen mit ihren Demonstrationen wurden in diesem Abschnitt erörtert.
.gerundet
Um die Ecken des Bildes zu runden, verwenden Sie die .gerundet Klasse. Dazu müssen Sie diese Klasse einfach in das Tag einbeziehen.
Html
Wir wissen, dass Bootstrap mit Wickeln von Elementen in einem Container funktioniert. Daher haben wir im obigen Code einen Div -Container erstellt und ein Bild darin verschachtelt. Dem Bild wurde die abgerundete Klasse zusammen mit einer gewissen Breite und Höhe zugewiesen.
Ausgang
Die obige Ausgabe zeigt ein Bild mit abgerundeten Ecken.
.Rundkreis
Wie der Name schon sagt, macht die in diesem Abschnitt diskutierte Klasse ein Bild zum Kreis. Im Folgenden haben wir seine Demonstration gezeigt.
Html
Um das Bild zu einem Kreis zu machen, haben wir dem Bild die Klassen mit abgerundeter Kreis zugewiesen.
Ausgang
Das Bild wurde mit Erfolg in einen Kreis gemacht.
.IMG-Dambnail
Miniaturansichten spielen eine wichtige Rolle beim Entwerfen einer Website, auf der mehrere Bilder auf einer einzelnen Webseite angezeigt werden. In Bootstrap 5, um Bilder in eine Miniaturansicht umzuwandeln, die .IMG-Dambnail Klasse wird verwendet.
Html
Um unser Image als Miniaturansicht erscheinen zu lassen, haben wir es zugewiesen, die .IMG-Dambnail-Klasse. Diese Klasse macht im Grunde genommen ein Miniaturbild mit einer Grenze.
Ausgang
Eine Miniaturansicht wurde erfolgreich erstellt.
Ausrichten von Bildern in Bootstrap 5
Neben der Gestaltung von Bildern ist es auch sehr bedeutend, sie in der richtigen Position auszurichten. In diesem Abschnitt werden mehrere Klassen erläutert, mit denen Sie Bilder in Bootstrap 5 ausrichten können.
.Float-Start
Diese Klasse positioniert ein Bild zu Beginn des Containers.
Html
Hier haben wir zunächst einen Container erstellt und ein Bild darin platziert. Um dieses Bild zu Beginn des Containers zu platzieren, weisen wir es dem zu .Float-Start-Klasse und etwas Breite und Höhe.
Ausgang
Das Bild wurde zu Beginn des Behälters positioniert.
.Float-End
Um ein Bild am Ende des Behälters zu platzieren, wird diese Klasse verwendet.
Html
Im obigen Code, um das Bild am Ende des Containers zu positionieren, haben wir dem Tag das Tag gegeben .Float-End-Klasse.
Ausgang
Das Bild wurde am Ende des Behälters erfolgreich platziert.
.MX-Auto .D-Block
Diese Klassen werden verwendet, um ein Bild in einem Behälter zu zentrieren. Der .MX-Auto Die Klasse passt den Rand an automatisch an und die .D-Block Die Klasse zeigt ein Bild als Block an. So werden diese Klassen verwendet.
Html
Zum Zweck der Zentrierung eines Bildes die .MX-Auto und .D-Blockklassen wurden dem Bild im Codes-Snippet oben zugeordnet.
Ausgang
Das Bild wurde zentriert.
Responsive Bilder in Bootstrap 5
Um Bilder anzusprechen, die ihr Verhalten abhängig von der Gerätebreite ändern.
.IMG-Fluid
Der .Die IMG-Fluid-Klasse macht ein Bild seine Größe nach der Bildschirmgröße verändert. Das Bild mit dieser Klasse ändert seine Größe in Übereinstimmung mit dem übergeordneten Element. Darüber hinaus passt diese Klasse die maximale Breite des Bildes auf 100% und die Höhe an das Auto an.
Html
Im obigen Code weisen wir dem Bild die Klasse img-Fluid zu. Um den Effekt dieser Klasse zu sehen, skalieren Sie Ihr Browserfenster auf und ab.
Ausgang
Wenn die Bildschirmbreite 680px und höher beträgt.
Bei Bildschirmbreite 400px und darunter.
Das Bild wurde erfolgreich reaktionsschnell gemacht.
Abschluss
Im Bildklassen in Bootstrap 5 können Sie die Bilder, die auf Ihrer Website erscheinen, stylen. Mit diesen Klassen können Sie Bildern eine bestimmte Form und Ausrichtung geben oder sie auch reaktionsschnell machen. Einige der Bootstrap 5 -Bildklassen sind .gerundet, .IMG-Fluid, .Float-Start usw. Diese Klassen werden ausführlich diskutiert, um den Zweck zu erläutern, den ihnen erfüllt.