Source

Φιγούρες

Τεκμηρίωση και παραδείγματα για την εμφάνιση σχετικών εικόνων και κειμένου με το στοιχείο σχήμα στο Bootstrap.

Κάθε φορά που χρειάζεται να εμφανίσετε ένα κομμάτι περιεχομένου—όπως μια εικόνα με προαιρετική λεζάντα, σκεφτείτε να χρησιμοποιήσετε ένα <figure>.

Χρησιμοποιήστε τα συμπεριλαμβανόμενα .figureκαι .figure-imgτις .figure-captionκλάσεις για να παρέχετε ορισμένα βασικά στυλ για το HTML5 <figure>και <figcaption>τα στοιχεία. Οι εικόνες σε σχήματα δεν έχουν σαφές μέγεθος, επομένως φροντίστε να προσθέσετε την .img-fluidκλάση στην κλάση σας <img>για να την κάνετε να ανταποκρίνεται.

Μια γενική τετράγωνη εικόνα κράτησης θέσης με στρογγυλεμένες γωνίες σε σχήμα.
Μια λεζάντα για την παραπάνω εικόνα.
<figure class="figure">
  <img src="..." 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>

Η ευθυγράμμιση της λεζάντας του σχήματος είναι εύκολη με τα βοηθητικά προγράμματα κειμένου .

Μια γενική τετράγωνη εικόνα κράτησης θέσης με στρογγυλεμένες γωνίες σε σχήμα.
Μια λεζάντα για την παραπάνω εικόνα.
<figure class="figure">
  <img src="..." 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>