Element Media
autor: Robert
23 marca 2014
Właściwie to nie wiem jak dokładnie nazwać ten element, więc opiszę do czego można go zastosować
Element "media" można wykorzystać jako szablon komentarzy, listę z miniaturką np. artykułów czy galerii zdjęć, czytnik RSS czy tweetów
Obrazki po lewej
Nagłówek
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.Nagłówek
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.Zagnieżdzony nagłówek
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.Obrazki po prawej
Nagłówek
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.Nagłówek
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.Zagnieżdzony nagłówek
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.Naszym elementem "sklejającym" w całość jest div z klasą .media. Wewnątrz zamieszczamy "kotwicę" czyli element <a href="#"> z klasą .pull-left gdy obrazek ma być po lewej stronie, lub z klasą .pull-right gdy obrazek ma być po prawej. Wewnątrz kotwicy umieszczamy obrazek. Kolejnym elementem wewnątrz jest div z klasą .media-body w którym umieszczamy nagłówek (h1, h2, h3, h4 itp) z klasą .media-heading oraz tekst, który będzie opisem.
Media jako lista
Element media może być stworzony za pomocą elementów listy <li> co umożliwia głębokie zagnieżdzanie kolejnych elementów (np dodawanie kolejnych odpowiedzi na jakiś komentarz).
-
Nagłówek
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Zagnieżdzony nagłówek
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.Zagnieżdzony nagłówek
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.Zagnieżdzony nagłówek
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. -
Nagłówek
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Tutaj tworzymy listę z klasą .media-list i każdy najwyższy element listy musi mieć klasę .media. Wewnątrz stosujemy już kod identyczny jak w przykładzie wyżej czyli kotwiczka, obrazek, media-body i media-heading. W celu zagnieżdzenia elementów wewnątrz pierwszego elementu listy z klasą .media-body umieszczamy divy z klasą .media i zawartością jak w 1 przykładzie.
Post się przydał? Oceń go proszę.
(4 głosów, średnia: 4,00 na 5)
Loading...Komentarze: 3 komentarze
Mister Klikacz 7 grudnia 2014 o 18:01
A czy nie można by było umieścić tego obrazka w zwykłym divie zamiast w kotwicy? Spróbowałem tak zrobić u siebie i wszystko działa tak samo, z tą różnicą, że obrazek nie jest takim „bezsensownym” linkiem. Jeśli akurat nie chcemy, aby obrazek był linkiem, to byłoby to chyba lepsze rozwiązanie, prawda?
OdpowiedzRobert 8 grudnia 2014 o 08:59
Na tym właśnie polega tworzenie stron WWW. Ja pokazuję przykład wykorzystania a Wy robicie z tym coś aby dopasować do swojej strony. Jeśli ktoś nie chce linka do go sobie usuwa, jeśli ktoś chce większą miniaturkę to taką robi. Także w twoim przypadku brak linka jest dobrym rozwiązaniem ale nie wiemy czy dla innych ten link nie jest potrzebny. Łatwiej pokazać jakąś funkcjonalność i z niej później zrezygnować niż jej nie pokazać i inni z niej nie skorzystają.
Odpowiedz- Bootstrap 3 (47)
- Bootstrap 4 (3)
- Breadcrumbs (1)
- Buttony (5)
- CSS (15)
- Etykiety (2)
- Formularze (4)
- Ikony (1)
- JavaScript (5)
- Karuzela / Slider (1)
- Klasy pomocnicze (1)
- Komponenty (20)
- Lista rozwijana / dropdown (2)
- Listy (1)
- Media (1)
- Menu (2)
- Modal (1)
- Obrazy (2)
- Panele (2)
- Paski postępu (1)
- Powiadomienia (1)
- Rusztowanie szablonu (3)
- Studnia (1)
- Tabele (1)
- Tworzenie strony www (2)
- Typografia (2)
- Uncategorized (1)
- Wprowadzenie (9)
- Zakładki (1)
