in English
Φιγούρες
Τεκμηρίωση και παραδείγματα για την εμφάνιση σχετικών εικόνων και κειμένου με το στοιχείο σχήμα στο 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="...">
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>
Η ευθυγράμμιση της λεζάντας του σχήματος είναι εύκολη με τα βοηθητικά προγράμματα κειμένου .
<figure class="figure">
<img src="..." class="figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
</figure>