Obrazy z podpisem / Figures

4 277 0

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

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

Przykład

PLaceholder
Podpis pod obrazkiem

Kod

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

Chcesz coś napisać?

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

*

*