Φιγούρες

Κάθε φορά που χρειάζεται να εμφανίσετε ένα κομμάτι περιεχομένου—όπως μια εικόνα με προαιρετική λεζάντα, σκεφτείτε να χρησιμοποιήσετε ένα <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-end">A caption for the above image.</figcaption>
</figure>

Sass

Μεταβλητές

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