Φιγούρες

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

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

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

<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>

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

<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>