Source

Zahlen

Dokumentation und Beispiele für die Anzeige verwandter Bilder und Texte mit der figure-Komponente in Bootstrap.

Jedes Mal, wenn Sie einen Inhalt anzeigen müssen, z. B. ein Bild mit einer optionalen Beschriftung, sollten Sie die Verwendung einer <figure>.

Verwenden Sie die enthaltenen .figure, .figure-imgund .figure-caption-Klassen, um einige grundlegende Stile für HTML5 <figure>und <figcaption>-Elemente bereitzustellen. Bilder in Abbildungen haben keine explizite Größe, fügen Sie also unbedingt die .img-fluidKlasse zu Ihrer hinzu <img>, damit sie reagiert.

400 x 300
Eine Beschriftung für das obige Bild. 
<figure class="figure">
  <img src=".../400x300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

Das Ausrichten der Bildunterschrift ist mit unseren Textdienstprogrammen ganz einfach .

400 x 300
Eine Beschriftung für das obige Bild. 
<figure class="figure">
  <img src=".../400x300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
  <figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
</figure>