Bootstrap tutorial logo

Miniaturki zdjęć / Thumbnails

autor: Robert

15 marca 2014

Przykładowo gdy tworzymy galerię zdjęć to dobrze było by dodac do nich jakieś ramki by całość wyglądała estetycznie. Oczywiście jak już się domyślacie i tu mamy gotowe rozwiązanie.

Odpowiednią ilość zdjęć zamykamy w rzędzie <row> a następnie każde zdjęcie zamykamy w odpowiadającej nam szerokością kolumnie.

Ja w przykładzie zamknąłem 4 zdjęcia w widoku dla komputera i po 2 zdjęcia w widoku dla komórki

Boksy z miniaturką i treścią

Jeśli prócz samego zdjęcia chcemy dołączyć do niego tytuł, opis czy przycisk – wystarczy delikatnie zmodyfikować kod

Tutaj ponownie całość zamykamy w rzędzie <row> i ustalamy szerokości kolumn, następnie wewnątrz tworzymy div z klasą .thumbnail. W tym divie dopisujemy adres zdjęcia, które chcemy wyświetlić. Kolejnym divem który musimy wpisać wewnątrz jest <div class="caption"> w którym umieszczamy opis. Tutaj mamy już dowolność, możemy zastosować nagłówki, paragrafy, linki czy przyciski

...

Tytuł

Treść opisu zdjęcia

Przycisk Przycisk

...

Tytuł

Treść opisu zdjęcia

Przycisk Przycisk

No i stronka z przykładem:

Strona z przykładami

Z racji tego, że zbliża się termin opłaty za hosting bardzo proszę o klikanie w interesujące was reklamy:)


Post się przydał? Oceń go proszę.
1 Gwiazdka2 Gwiazdki3 Gwiazdki4 Gwiazdki5 Gwiazdek (3 głosów, średnia: 5,00 na 5)
Loading...

Tomasz 14 października 2014 o 19:20

Dlaczego przy kodzie do miniaturek 200×200 div odpowiedzialny za kolumny ma dwie klasy?
– można tak? Jaki daje to efekt?

Odpowiedz
    Robert 14 października 2014 o 20:23

    Chodzi ci o to, że ma klasy .col-xs-6 .col-md-3? Oczywiście, że można a wręcz czasami trzeba. Kod ten powoduje, że dla ekranu laptopa wyświetlają się 4 kolumny obok siebie a na smartfonie wyświetlają się 2 obok siebie.

    Odpowiedz
Bartek 26 czerwca 2015 o 22:10

A gdybym chciał przyciski wyrównać do prawej strony?

Odpowiedz
    Bartek 26 czerwca 2015 o 22:35

    Poradziłem sobie.
    Utworzyłem osobną klasę (b-cent-right) którą umieściłem tu:
    Przycisk Przycisk

    Natomiast w klasę tą wrzuciłem:
    .b-cent-right{ /*ustawienie buttona z prawej strony dla strony głównej w sekcjach najnowsze … */
    display: table;
    margin-left: auto;
    }

    Odpowiedz
sandblue 2 lipca 2015 o 14:49

w html5 mamy znaczniki i dla obrazka z opisem. czy można do nich zastosować klasy bootstrapa ?

Odpowiedz
    sandblue 2 lipca 2015 o 14:51

    ucięło mi znaczniki & lt; figure & gt; i & lt; figcaption & gt; w pytaniu

    Odpowiedz
    Robert 2 lipca 2015 o 15:12

    Szczerze powiedziawszy to nie pamiętam czy stosowałem Bootstrapa do figure. Spróbuj uruchomić sobie nawet lokalnie jakąś stronę i zobaczyć co się dzieje:)

    Odpowiedz