Obrazy z podpisem / Figures

10 852 0

Sprawdź najnowszą wersję komponentu figures zbudowaną na podstawie Bootstrapa 5. Kliknij tutaj aby zobaczyć przykłady oraz dowiedzieć się jak z nich skorzystać.


Wraz z HTML5 pojawił się nowy znacznik <figure>, który ma służyć do umieszczania w jego wnętrzu obrazów, diagramów, ilustracji z opcjonalnym podpisem umieszczonym wewnątrz <figcaption>. Ten tag jest również wstępnie ostylowany przez twórców Bootstrapa. Jego struktura jest następująca:

  • Znacznik <figure class="figure">...</figure>
  • Wewnątrz niego znacznik <img src="..." class="figure-img img-fluid">
  • I również wewnątrz <figure> znacznik <figcaption class="figure-caption">Opis obrazka</figcaption>

Dzięki zastosowaniu powyższego kodu uzyskamy następujący element:

Przykład

PLaceholder
Podpis pod obrazkiem

Kod

</p>
<figure class="figure">
  <img src="https://placehold.it/400x400" class="figure-img img-fluid rounded" alt="PLaceholder">
  <figcaption class="figure-caption">Podpis pod obrazkiem</figcaption>
</figure>
<p>

Tekst podpisu możemy łatwo przenieść na prawą stronę korzystając z klasy .text-right do <figcaption>

Przykład

PLaceholder
Podpis pod obrazkiem

Kod

</p>
<figure class="figure">
  <img src="https://placehold.it/400x400" class="figure-img img-fluid rounded" alt="PLaceholder">
  <figcaption class="figure-caption text-right">Podpis pod obrazkiem</figcaption>
</figure>
<p>

Przydało się? Oceń proszę jak bardzo: SłaboJako takoNie ma źleDobrzeRewelacja! (21 głosów, średnia: 4,86 na 5)
Loading...

Chcesz coś napisać?

Podziel się swoją opinią bądź dodaj coś od siebie.

*

*