Μετάβαση στο κύριο περιεχόμενο Μετάβαση στην πλοήγηση εγγράφων
Check
in English

Φιγούρες

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

Σε αυτήν την σελίδα

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

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

Placeholder 400x300
Μια λεζάντα για την παραπάνω εικόνα.
html
<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

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

Placeholder 400x300
Μια λεζάντα για την παραπάνω εικόνα.
html
<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption text-end">A caption for the above image.</figcaption>
</figure>

Sass

Μεταβλητές

$figure-caption-font-size:          $small-font-size;
$figure-caption-color:              $gray-600;