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

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ę.

(4 głosów, średnia: 4,75 na 5)

Loading...

---

← Starszy post
Aktualne CDNy / Bootstrap CDN
Nowszy post →
Ostrzeżenia i powiadomienia / Alerts

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: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: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