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
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>Tekst podpisu możemy łatwo przenieść na prawą stronę korzystając z klasy .text-right do <figcaption>
Przykład
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>
(21 głosów, średnia: 4,86 na 5)
Loading...